【android开发布局从入门到精通 pdf】android开发布局从入门到精通

更新时间:2019-11-30    来源:php入门    手机版     字体:

【www.bbyears.com--php入门】

Android的UI组件都是继承View类,View表示一个空白的矩形区域。TextView、Button、EditText这些常用的组件等都是直接或间接继承自View。

此外,View还有一个重要的子类ViewGroup,该类可以用来包含多个View组件,本身也可以当做一个View组件被其他的ViewGroup所包含,由此,可以构建出非常复杂的UI界面。

常用的布局管理器如FrameLayout、LinearLayout、RelativeLayout等都直接继承自ViewGroup。

在Android应用中,Activity就相当于传统桌面开发中的Form,刚创建出来就是一个空白的屏幕,因此,要显示UI界面时,就需要调用setContentView()方法传入要显示的视图实例或者布局资源。

如:

传入一个布局资源:

setContentView(R.layout.main);

传入一个View实例:

TextView myTv = new TextView(this);

setContentView(myTv);

myTv.setText(“hello, world”);

因为setContentView()只能接受一个View实例,要显示复杂的UI界面,就需要用到ViewGroup来包含多个多个View实例,然后将ViewGroup实例传给setContentView。ViewGroup是个抽象类,一般直接使用的都是它的子类,被称之为布局管理器。

Android有两种方式编写UI界面,一种是在xml布局资源文件中,另一种是直接在代码中编写,如上面的传入一个View实例的做法就是直接在代码中编写,这是传统的Form编程的做法。现在比较推荐的是在xml布局资源文件中编写UI界面,这样一来就可以将应用表示层与逻辑层相分离,无需修改代码就可以修改表示层。

要编写复杂的UI界面,需要掌握android中常用的布局管理器。主要有:

AbsoluteLayout:绝对布局

FrameLayout:帧布局

LinearLayout:线性布局

RelativeLayout:相对布局

TableLayout:表格布局

GridLayou:网格布局(Android 4.0添加的新的布局管理器)

1.LinearLayout 线性布局

线性布局就是放在其中的View组件将进行线性对齐排列,可以设置是垂直排列还是水平排列。

新建一个布局资源文件的方法:

右击res/layout,然后在弹出的菜单中选择new,然后选择Android Xml File,要新建LinearLayout布局文件,就选择LinearLayout作为其根节点即可。

linear_layout.xml代码如下:



    


activity中代码如下:

protected void onCreate(Bundle savedInstanceState) {
           // TODO Auto-generated method stub
           super.onCreate(savedInstanceState);
           setContentView(R.layout.linear_layout);
}


显示效果:

 

常用的几个属性:

1)orientation属性:设置LinearLayout中组件的排列方式,可以取值vertical或者horizontal表示垂直排成一列或者水平排成一行。

上面代码中,如果把orientation设置为horizontal。显示则变为:

 


因为只显示一行,而第一个Button的宽度就是充满父元素,所以只显示出来了第一个Button。

2)layout_width属性:设置在父元素中该组件的宽度,可以取值wrap_content、match_parent或者fill_parent。其中wrap_content表示宽度能够包裹该组件中的内容即可,fill_parent和match_parent含义相同表示宽度充满父元素,现在,更常使用match_parent,而很少用fill_parent。

如上面代码中把所有的Button的layout_width都设置为wrap_content,则显示效果如下:

3)layout_height属性:设置在父元素中该组件的宽度,取值同layout_width。

4)grativity属性:设置该容器内组件的对齐方式。

如在LinearLayout节点中添加属性:android:gravity="center_vertical"

则显示效果如下:

 

该属性的取值可以是:top、bottom、left、right、center、center_vertical、center_horizontal等值,或者这些值相或(即位或运算 " )

如:android:gravity="bottom|right" 显示效果

5)layout_gravity属性:当前控件在父元素的位置。

如将aaaaaa那个Button中layout_gravity设置为”center”,其效果将会与其所处容器即LinearLayout中的gravity属性效果进行叠加,显示如下:

垂直上进行了居中,水平上还是排在bbbbbb的左边

6)layout_weight属性:在子控件中设置父元素中多出来的额外空间的分配权重。

此时,如果只在aaaaaa这个button中设置layout_weight属性,可以设置为任意值,习惯设置为1。则aaaaaa这个button会拉伸占据剩下的空间,显示如下:

 


如果同时在aaaaaa和dddddd两个button中都设置layout_weight属性,且第一个设置为1,第二个设置为2,则之前多出来的剩余空间会分给aaaaaa 1/3,分给dddddd 2/3,即各自的权重值/总的权重值,即为各自所分得的剩余空间的比例,显示如下:
http://images0.cnblogs.com/blog2015/693030/201506/271935226428211.png

7)weightSum属性:设置容器中剩余空间的总的权重值,这个属性是LinearLayout中的属性,而layout_weight是各个子控件中的属性,若不设置,则默认为各个子控件layout_weight属性值的总和。

若如上面aaaaaa的layout_weight值为1,dddddd的layout_weight的值为2,同时在LinearLayout中设置weightSum值为6,则仍会有一半的剩余空间,aaaaaa只分得原来剩余空间的1/6,dddddd分得2/6,显示如下:

8)visibility属性:控制是否显示,取值可以是invisible、visible、gone。visible表示显示出来,invisible和gone不显示出来,其中invisible不显示,但控件仍然存在,占用着空间,而gone表示控件不存在了,也就不占用空间了。

如:cccccc设置visibility属性为gone,显示如下:

若改为invisible:

LinearLayout设置invisible:


2.RelativeLayout:相对布局

顾名思义,即根据各控件的相对位置进行布局,相对位置,可以是子控件A相对父控件的位置,也可以是子控件A相对于子控件B的位置。

右击res/layout,然后在弹出的菜单中选择new,然后选择Android Xml File,要新建RelativeLayout布局文件,就选择RelativeLayout作为其根节点即可。文件名为relative_layout.xml。

代码如下:



    


修改FirstActivity中setContentView(R.layout.relative_layout);

显示效果:


aaaaaa在父容器中居中显示

bbbbbb在aaaaaa的右边显示,并且与aaaaaa顶部对齐

ccccccc在aaaaaa的左边显示,并且与aaaaaa顶部对齐

dddddd在aaaaaa的上面显示,并且与aaaaaa左对齐

eeeeee在aaaaaa的下面显示,并且与aaaaaa左对齐

主要属性:均为设置父子相对位置,或者子控件与子控件的相对位置

android:layout_toRightOf 在指定控件的右边

android:layout_toLeftOf  在指定控件的左边

android:layout_above          在指定控件的上边

android:layout_below           在指定控件的下边

android:layout_alignBaseline  跟指定控件水平对齐

android:layout_alignLeft  跟指定控件左对齐

android:layout_alignRight 跟指定控件右对齐

android:layout_alignTop  跟指定控件顶部对齐

android:layout_alignBottom   跟指定控件底部对齐

android:layout_alignParentLeft     是否跟父布局左对齐

android:layout_alignParentTop    是否跟父布局顶部对齐

android:layout_alignParentRight   是否跟父布局右对齐

android:layout_alignParentBottom     是否跟父布局底部对齐

android:layout_centerVertical       在父布局中垂直居中

android:layout_centerHorizontal   在父布局中水平居中

android:layout_centerInParent     在父布局中居中


3.FrameLayout:帧布局

如同Flash或者photoshop中图层的概念,在上面的图层遮盖下面的图层,没被遮到的地方仍然显示出来。

右击res/layout,然后在弹出的菜单中选择new,然后选择Android Xml File,要新建FrameLayout布局文件,就选择FrameLayout作为其根节点即可。文件名为frame_layout.xml。

代码如下:


<frameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    
</frameLayout>

依次放置两个ImageView用于显示两张图片,第一张为背景图片,第二张为一个人物图片。

修改FirstActivity中setContentView(R.layout.frame_layout);

显示效果如下:

 


先添加的控件位于下面,后添加的控件位于上面。

4.AbsoluteLayout:绝对布局

根据绝对坐标位置进行布局,不灵活,故而很少使用。

eclipse中也提示:AbsoluteLayout is deprecated,即不建议使用绝对布局。

新建一个layout文件,名为absolute_layout.xml,代码入下:



    


修改FirstActivity中代码:setContentView(R.layout.absolute_layout);

显示如下:

 

属性:

android:layout_x 指定控件在父布局的x轴坐标

android:layout_y      指定控件在父布局的y轴坐标

5.TableLayout:表格布局

需要配合TableRow进行使用,也不是太常用。

在TableLayout中每加入一个TableRow子节点,就表示在表格中加入了一行,之后在TableRow中每加入一个控件,就表示加入了一列。注意TableRow单元行里的单元格的宽度小于默认的宽度时就不起作用,其默认是fill_parent,高度可以自定义大小。

如果直接在TableLayout中添加控件,那么该控件将会占用一行。

新建一个layout布局文件,名为table_layout.xml,代码如下:



    


修改setContentView(R.layout.table_layout);

显示效果如下:

 

第0行一个按钮aaaaaa

第1行6个按钮,但是父控件宽度有限,只显示了5个

第2行一个TableRow,里面加了一个按钮dddddd

第3行也是一个按钮eeeeee

主要属性:

android:shrinkColumns         设置收缩的列,其值为要收缩的列的索引,从0开始,多个时用逗号分隔。

如:android:shrinkColumns="0,2",表示第0和第2列收缩,显示效果如下:

 

可以看出没有放在TableRow中的行没有被收缩。

android:stretchColumns        设置拉伸的列,其值为要收缩的列的索引,从0开始,多个时用逗号分隔。如上显示中第1行有6个按钮,父容器宽度不够用,此时拉伸任何一列都不会有效果。若第1行只有两个按钮,此时,设置android:stretchColumns="1",则会把第1列拉伸,充满父容器剩下的空间。显示效果如下:

android:collapseColumns       设置要隐藏的列,这里的隐藏于visibility设置为gone效果相同的。隐藏之后不占用父容器的空间。

如:android:collapseColumns="1,3,5",则第一行6个按钮,只剩下3个bbbbbb

6.GridLayout:网格布局

Android4.0中新增的布局管理器。因此,在android4.0之后的版本才可以直接使用。

新建项目设置最小SDK为14,其他也要高于14。

新建一个layout文件,名为grid_layout.xml,代码如下:



    


显示效果如下:

 


整个布局被分为4行5列。

主要属性:

android:columnCount 设置GridLayout的列数

android:rowCount设置GridLayou的行数

每个添加到GridLayout中的子控件都可以设置如下属性:

android:layout_row  设置该元素所在行,从0开始

android:layout_column  设置该元素所在列,从0开始

android:layout_rowSpan  设置该元素所跨的行数

android:layout_columnSpan  设置该元素所跨的列数。

本文来源:http://www.bbyears.com/jiaocheng/81495.html