zoukankan      html  css  js  c++  java

  • 页面的五种布局以及嵌套『Android系列八』

    转自：http://blog.csdn.net/dazlly/article/details/7860125

      因为学习比较晚，我用的相关版本为SDK4.1、eclipse4.2，而自己看的教材都是低版本的，这造成了细节上的不同，有时候给学习造成了不小的困扰，不过这样也好，通过解决问题获得的知识理解更加深刻一点，这篇文章就是因为版本不同这个原因由来的。

            使用上面说的版本新建一个Android项目，然后打开main.xml文件，注意看代码：

    [html] view plaincopy
     
    1. <RelativeLayout 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:layout_width="wrap_content"  
    8.         android:layout_height="wrap_content"  
    9.         android:layout_centerHorizontal="true"  
    10.         android:layout_centerVertical="true"  
    11.         android:text="@string/hello_world"  
    12.         tools:context=".Main" />  
    13.   
    14. </RelativeLayout>  


            RelativeLayout，这个就是五种布局的其中之一，而大多数教材上面讲的都是LinearLayout布局，布局的不同造成模拟机界面显示的不同，为了避免再次困然，先把五种布局都了解一下吧。

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

            布局一：

            相对布局RelativeLayout，定义各控件之间的相对位置关系，通过位置属性和各自的ID配合指定位置关系，在指定位置关系时引用的ID必须在引用之前先被定义，否则将出现异常。

            layout/main.xml的代码

    [html] view plaincopy
     
    1. <RelativeLayout 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. </RelativeLayout>  

            定义了4个文本标签，各自的文本值（下面几种布局使用同样的strings.xml文件）

    [html] view plaincopy
     
    1. <string name="first">First</string>  
    2. <string name="second">Second</string>  
    3. <string name="third">Third</string>  
    4. <string name="fourth">Fourth</string>  

            为了清晰展示，从一到四标签的背景颜色为白黄红绿，注意看上面没有定义任何相对位置属性，结果：

            都重合到一起了，这说明在没有定义相对位置属性的情况下，所有标签都是相对于屏幕左上角布局的，现在更改一下main.xml的代码：

    [html] view plaincopy
     
    1. <RelativeLayout 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:layout_below="@id/firstText"  
    19.         android:text="@string/second" />  
    20.   
    21.     <TextView  
    22.         android:id="@+id/thirdText"  
    23.         android:layout_width="wrap_content"  
    24.         android:layout_height="wrap_content"  
    25.         android:background="#FF00FF"  
    26.         android:layout_below="@id/secondText"  
    27.         android:text="@string/third" />  
    28.   
    29.     <TextView  
    30.         android:id="@+id/fourthText"  
    31.         android:layout_width="wrap_content"  
    32.         android:layout_height="wrap_content"  
    33.         android:background="#00FFFF"  
    34.         android:layout_below="@id/thirdText"  
    35.         android:text="@string/fourth" />  
    36.   
    37. </RelativeLayout>  


            从二开始、每个标签都加了一个属性android:layout_below，意思是该组件位于引用组件的下方，而引用的组件就是这个属性值里面的内容“@id/要引用的id名”。然后再运行一下，看结果：

            OK，符合预期，这就是相对布局，下面列出所有的位置属性以及他们代表的意思，参考一下：

            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中可以动态添加控件，这个是添加的控件长宽自适应内容。

            布局二：

            线性布局LinearLayout，按照垂直或者水平的顺序依次排列子元素(如果不指定，默认为水平)，每一个子元素都位于前一个元素之后。这样形成单行N列，或者单列N行的布局；如果想要N行N列，可以嵌套使用LinearLayout。先看看效果：

            layout/main.xml

    [html] view plaincopy
     
    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.   
    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. </LinearLayout>  


            这里没有指定任何属性，显示如下，可以看到4个标签水平依次排列：

            现在略微修改一下代码，在LinearLayout节点内添加属性android:orientation="vertical"，显示如下：

            再来演示下N行N列的布局方法，使用嵌套结构，还是main.xml代码：

    [html] view plaincopy
     
    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:background="#FFFFFF"  
    17.             android:text="@string/first" />  
    18.   
    19.         <TextView  
    20.             android:id="@+id/secondText"  
    21.             android:layout_width="wrap_content"  
    22.             android:layout_height="wrap_content"  
    23.             android:background="#FFFF00"  
    24.             android:text="@string/second" />  
    25.     </LinearLayout>  
    26.   
    27.     <LinearLayout  
    28.         android:layout_width="match_parent"  
    29.         android:layout_height="wrap_content"  
    30.         android:orientation="horizontal" >  
    31.   
    32.         <TextView  
    33.             android:id="@+id/thirdText"  
    34.             android:layout_width="wrap_content"  
    35.             android:layout_height="wrap_content"  
    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:background="#00FFFF"  
    44.             android:text="@string/fourth" />  
    45.     </LinearLayout>  
    46.   
    47. </LinearLayout>  


            所得效果如下：（注意每个TextView里面的android:layout_width和android:layout_height的属性值，有兴趣的可以试试不同的值显示的不同的效果）

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

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

    [html] view plaincopy
     
    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属性来设置水平或者垂直居中，这个可以自己多调试一下。

            布局三：

            表格布局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 plaincopy
     
    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”，注意|前后不能有空格

            布局四：

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

            layout/main.xml代码：

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

            layout/main.xml代码：

    [html] view plaincopy
     
    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>  


            效果：

            布局到此为止，不同的布局之间还可以嵌套，大家有兴趣的话可以自己多尝试尝试。
  • 相关阅读:
    约瑟夫问题
    十点半
    鹊桥相会
    C语言实验——数日子
    汉诺塔
    读入字符串
    C语言实验——各位数字之和排序
    数据结构实验之链表五：单链表的拆分
    C语言实验——分割整数
    大一上学期
  • 原文地址：https://www.cnblogs.com/mochaMM/p/5091698.html
Copyright © 2011-2022 走看看