五种布局

来源:互联网 发布:javascript特效代码 编辑:程序博客网 时间:2024/05/16 23:31


        五个布局对象:RelativeLayout、LinearLayout、TableLayout、FrameLayout、AbsoulteLayout。


1. RelativeLayout

        在指定位置关系时引用的ID必须在引用之前先被定义,否则将出现异常。

        在没有定义相对位置属性的情况下,所有标签都是相对于屏幕左上角布局的。

        android:layout_above 位于引用组件的上方
        android:layout_below 位于引用组件的下方
        android:layout_toLeftOf 位于引用组件的左方
        android:layout_toRightOf 位于引用组件的右方
        android:layout_alignParentTop 是否对齐父组件的顶部
        android:layout_alignParentBottom 是否对齐父组件的底部
        android:layout_alignParentLeft 是否对齐父组件的左端
        android:layout_alignParentRight 是否齐其父组件的右端
        android:layout_centerInParent 是否相对于父组件居中
        android:layout_centerHorizontal 是否横向居中
        android:layout_centerVertical 是否垂直居中

        另外可能会用到:ViewGroup.LayoutParams.WRAP_CONTENT,在main.java中可以动态添加控件,这个是添加的控件长宽自适应内容。


2. LinearLayout

        这个布局中还有个android:layout_weight属性限定在水平布局时,不同的控件占的宽度比率,具体规则为:如果水平布局有两个控件,其android:layout_weight属性值分别为n和m,则属性值为n的控件所占的长度比例为总长的n/(n+m),属性值为m的控件所占的长度比例为m/(n+m);属性值越大,占的份额越多。

        这里再演示一下,main.xml中四个控件分别加上android:layout_weight=“对应的数字”:

[html] view plain copy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <LinearLayout  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:orientation="horizontal" >  
  11.   
  12.         <TextView  
  13.             android:id="@+id/firstText"  
  14.             android:layout_width="wrap_content"  
  15.             android:layout_height="wrap_content"  
  16.             android:layout_weight="1"  
  17.             android:background="#FFFFFF"  
  18.             android:text="@string/first" />  
  19.   
  20.         <TextView  
  21.             android:id="@+id/secondText"  
  22.             android:layout_width="wrap_content"  
  23.             android:layout_height="wrap_content"  
  24.             android:layout_weight="2"  
  25.             android:background="#FFFF00"  
  26.             android:text="@string/second" />  
  27.     </LinearLayout>  
  28.   
  29.     <LinearLayout  
  30.         android:layout_width="match_parent"  
  31.         android:layout_height="wrap_content"  
  32.         android:orientation="horizontal" >  
  33.   
  34.         <TextView  
  35.             android:id="@+id/thirdText"  
  36.             android:layout_width="wrap_content"  
  37.             android:layout_height="wrap_content"  
  38.             android:layout_weight="3"  
  39.             android:background="#FF00FF"  
  40.             android:text="@string/third" />  
  41.   
  42.         <TextView  
  43.             android:id="@+id/fourthText"  
  44.             android:layout_width="wrap_content"  
  45.             android:layout_height="wrap_content"  
  46.             android:layout_weight="4"  
  47.             android:background="#00FFFF"  
  48.             android:text="@string/fourth" />  
  49.     </LinearLayout>  
  50.   
  51. </LinearLayout>  

        显示效果:


        另外还能通过LinearLayout的android:gravity属性或者控件的android:layout_gravity属性,结合LinearLayout的android:orientation属性来设置水平或者垂直居中,这个可以自己多调试一下。


3. TableLayout

        表格布局TableLayout,更方便的展示N行N列的布局格式。TableLayout由许多TableRow组成,每个TableRow都代表一行。
  TableRow继承自LinearLayout,android:orientation="horizontal",android:layout_width=“match_parent”,android:layout_height =“wrap_content”。里面定义的控件都是横向排列,并且宽高一致的,相当于表格中的单元格,但是不能合并单元格。

         看代码,layout/main.xml

[html] view plain copy
  1. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <TableRow  
  7.         android:layout_width="fill_parent"  
  8.         android:layout_height="wrap_content" >  
  9.   
  10.         <TextView  
  11.             android:id="@+id/firstText"  
  12.             android:layout_width="wrap_content"  
  13.             android:layout_height="wrap_content"  
  14.             android:layout_weight="1"  
  15.             android:background="#FFFFFF"  
  16.             android:text="@string/first" />  
  17.   
  18.         <TextView  
  19.             android:id="@+id/secondText"  
  20.             android:layout_width="wrap_content"  
  21.             android:layout_height="wrap_content"  
  22.             android:layout_weight="1"  
  23.             android:background="#FFFF00"  
  24.             android:text="@string/second" />  
  25.     </TableRow>  
  26.   
  27.     <TableRow  
  28.         android:layout_width="fill_parent"  
  29.         android:layout_height="wrap_content" >  
  30.   
  31.         <TextView  
  32.             android:id="@+id/thirdText"  
  33.             android:layout_width="wrap_content"  
  34.             android:layout_height="wrap_content"  
  35.             android:layout_weight="1"  
  36.             android:background="#FF00FF"  
  37.             android:text="@string/third" />  
  38.   
  39.         <TextView  
  40.             android:id="@+id/fourthText"  
  41.             android:layout_width="wrap_content"  
  42.             android:layout_height="wrap_content"  
  43.             android:layout_weight="1"  
  44.             android:background="#00FFFF"  
  45.             android:text="@string/fourth" />  
  46.     </TableRow>  
  47.   
  48. </TableLayout>  

        效果图:(有兴趣的可以去掉android:layout_weight属性看看效果)



        关于表格布局需要了解的还有:

        android:stretchColumns某一列自动填充空白区域

        android:shrinkColumns压缩某个列(用于内容过长,横向显示不完全,多余的往下自动扩展)

        TableLayout的列序号从0开始

        android:gravity设置对齐规则可以多个条件中间用|分开,比如android:gravity=“top|right”,注意|前后不能有空格


4. FrameLayout

        单帧布局FrameLayout,理解起来最简单,所有的控件都不能指定位置,从左上角对齐依次叠加,后面的控件直接覆盖在前面的控件之上。为了清晰的显示出效果,这里使用两种不同的控件大小展示。

        layout/main.xml代码:

[html] view plain copy
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <TextView  
  7.         android:id="@+id/firstText"  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:background="#FFFFFF"  
  11.         android:text="@string/first" />  
  12.   
  13.     <TextView  
  14.         android:id="@+id/secondText"  
  15.         android:layout_width="wrap_content"  
  16.         android:layout_height="wrap_content"  
  17.         android:background="#FFFF00"  
  18.         android:text="@string/second" />  
  19.   
  20.     <TextView  
  21.         android:id="@+id/thirdText"  
  22.         android:layout_width="wrap_content"  
  23.         android:layout_height="wrap_content"  
  24.         android:background="#FF00FF"  
  25.         android:text="@string/third" />  
  26.   
  27.     <TextView  
  28.         android:id="@+id/fourthText"  
  29.         android:layout_width="wrap_content"  
  30.         android:layout_height="wrap_content"  
  31.         android:background="#00FFFF"  
  32.         android:text="@string/fourth" />  
  33.   
  34. </FrameLayout>  

        显示效果:(因为second比fourth长那么一点点,所以露出来一点)


      换个代码再演示一下main.xml

[html] view plain copy
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <TextView  
  7.         android:id="@+id/firstText"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:background="#FFFFFF"  
  11.         android:text="@string/first" />  
  12.   
  13.     <TextView  
  14.         android:id="@+id/secondText"  
  15.         android:layout_width="200dp"  
  16.         android:layout_height="200dp"  
  17.         android:background="#FFFF00"  
  18.         android:text="@string/second" />  
  19.   
  20.     <TextView  
  21.         android:id="@+id/thirdText"  
  22.         android:layout_width="100dp"  
  23.         android:layout_height="100dp"  
  24.         android:background="#FF00FF"  
  25.         android:text="@string/third" />  
  26.   
  27.     <TextView  
  28.         android:id="@+id/fourthText"  
  29.         android:layout_width="50dp"  
  30.         android:layout_height="50dp"  
  31.         android:background="#00FFFF"  
  32.         android:text="@string/fourth" />  
  33.   
  34. </FrameLayout>  

        效果:



五. AbsoluteLayout

        绝对布局AbsoluteLayout,使用android:layout_x和android:layout_y属性来限定控件的位置,左上角坐标为(0,0),各控件位置可以重叠,实际开发中因为限定的位置太过死板而很少用到,实际上我使用的版本已经提示这个布局过期,不推荐使用,这里简单介绍一下。

        layout/main.xml代码:

[html] view plain copy
  1. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <TextView  
  7.         android:id="@+id/firstText"  
  8.         android:layout_x="50dp"  
  9.          android:layout_y="50dp"  
  10.         android:layout_width="50dp"  
  11.         android:layout_height="50dp"  
  12.         android:background="#FFFFFF"  
  13.         android:text="@string/first" />  
  14.   
  15.     <TextView  
  16.         android:id="@+id/secondText"  
  17.         android:layout_x="80dp"  
  18.          android:layout_y="80dp"  
  19.         android:layout_width="50dp"  
  20.         android:layout_height="50dp"  
  21.         android:background="#FFFF00"  
  22.         android:text="@string/second" />  
  23.   
  24.     <TextView  
  25.         android:id="@+id/thirdText"  
  26.         android:layout_x="120dp"  
  27.          android:layout_y="100dp"  
  28.         android:layout_width="50dp"  
  29.         android:layout_height="50dp"  
  30.         android:background="#FF00FF"  
  31.         android:text="@string/third" />  
  32.   
  33.     <TextView  
  34.         android:id="@+id/fourthText"  
  35.         android:layout_x="180dp"  
  36.          android:layout_y="10dp"  
  37.         android:layout_width="50dp"  
  38.         android:layout_height="50dp"  
  39.         android:background="#00FFFF"  
  40.         android:text="@string/fourth" />  
  41.   
  42. </AbsoluteLayout>  

        效果:


0 0
原创粉丝点击