现在的位置: 首页 > 综合 > 正文

MonoDroid学习笔记(四)—— MonoDroid程序界面的布局

2013年09月17日 ⁄ 综合 ⁄ 共 15979字 ⁄ 字号 评论关闭

    上一篇文章中,我们已经简要分析了一个MonoDroid工程的基本结构,这次我们来讨论更多。每一种应用程序基本都会有用户界面(UI),在.Net里,winform程序的UI是一个form窗体,wpf或silverlight程序的UI是一个xaml,asp.net页面是一个aspx,那么在MonoDroid里,就是一个Activity。上面说的.net里的程序都可以既使用可视化界面进行拖拽,也可以在源代码中进行编辑,但MonoDroid中,只能对xml文件或axml文件进行编辑或者在Activity类中使用c#代码进行动态加载。那么如何对程序的界面进行布局呢?我们这篇文章就来进行探讨。

    打开Main.xml,可以看到Button是被嵌套在LiearLayout里的,这个LiearLayout直接翻译过来就是线性布局,它是MonoDroid中布局的一种,MonoDroid的支持多种布局方式:有LinearLayout(线性布局),RelativeLayout(相对位置布局),TableLayout(表格布局),GridView(网格视图),TabLayout(标签页布局),ListView(列表视图)等等,如下图所示,详细的布局可以参考Android.Widget命名空间下以Layout结尾的类都有哪些。

 

                  线性布局                                         相对布局                                        表格布局

          

 

                 网格视图                                          标签页布局                                       列表视图

       

 

   下面我们来试试写一个例子,把几个布局都用上。设计这样一个界面:有四个标签页,第一个标签页内有线性布局和相对布局;第二个标签页内有表格布局,第三个标签页内有网格视图,第四个标签页内有列表视图。

    首先我们要先设计标签页界面。需要使用TabHost和TabWidget。TabHost必须是布局的根节点,它包括用来显示标签页的TabWdiget和显示标签内容的FrameLayout。在Main.axml中添加如下代码:

在Resources/Layout文件夹下增加Tab1~Tab4共四个axml布局文件,分别表示四个标签页的内容:

 

 

 

 

新建一个Tabs文件夹,在文件夹中增加四个Activity,分别表示四个标签页的后台类:

 

 

 

 

    你要为每个标签页分别指定标签页被选中与没被选中两种状态时的图标,所以准备8张图片,放到Resources/Drawable文件夹下。再在这个文件夹下新建4个xml文件,用以标识每个标签页使用哪两张图片作为图标。这里只列举其中一个xml文件作为例子,其余三个类似:

 

最终的工程文件结构如下:

 

Activity1的代码如下,注意这次Activity1不再继承Activity,而是继承TabActivity:

 

运行程序,好了,我们设计的界面出来了~~

 

 

 

 

    我首先在Debug版本下生成了项目,运行起来一切正常,但是后来我改成了Release版本以后,在切换到第三和第四个页签时都会报An exception was thrown by the type initializer for Android.Widget.ItemClickImplementor的异常,但是如果把项目属性中的Linking 选为None,那么在Release版本下也不会出错了,但是生成的apk安装文件却有13M+之巨……具体原因现在不明,初步估计应该是Mono的一个Bug,在官网与技术人员沟通过后,他们也不知原因何在,让我关注他们的下一版本,如果下一版本还存在这个问题,到时给他们提一个Bug。

抱歉!评论已关闭.