Android六大布局

柔光的暖阳◎ 2022-06-06 14:28 283阅读 0赞

# Android六大布局 #

**Android应用程序的用户图形界面中有着形形色色的组件，而为了控制各个组件的位置、大小以及他们的相关性，就引入了布局。android六大布局方式为 线性布局LinearLayout,表格布局TableLayout,帧布局FrameLayout,相对布局RelativeLayout,网格布局GridLayout,绝对布局AbsoluteLayout，所有的布局都直接或间接的继承了ViewGroup类，下面我们来分别介绍一下这六大布局**

**1.线性布局LinearLayout**

线性布局里面的组件按照线性横向或者纵向排列，当组件超出显示范围的时候，会被自动隐藏。其重要的XML属性有：
    1.android:baselineAligned 是否允许用户调整它内容的基线。
    2.android:divider 设置垂直布局是两个按钮之间的分割条
    3.android:gravity 设置组件的对其方式
    4.android:orientation 设置它内容的对其方向（horizontal横向/vertical竖向）。
    5.android:layout_gravity 该子元素（注意，是子元素）在LinearLayout中的对齐方式
    6.android:weight 该子元素在LinearLayout中所占的权重

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent" android:gravity="bottom" //底部对齐，也可以同时指定多种对齐方式，例如left|center_vertical android:orientation="horizontal" //水平排列 >
    
        <Button android:layout_width="0pt"//当设置权重时，该属性应该设置为0或者match_parent android:layout_height="wrap_content" android:layout_weight="2" //数值越大所占的比重也越大 android:text="btn1"/>
        <Button android:layout_width="0pt" android:layout_height="wrap_content" android:layout_weight="1" android:text="btn2"/>
        <Button android:layout_width="0pt" android:layout_height="wrap_content" android:layout_weight="1" android:text="btn3"/>
    
    </LinearLayout>

![这里写图片描述][SouthEast]

**2.表格布局TableLayout**

TableLayout继承自LinearLayout，所以TableLayout可以看成是一种特殊的线性布局，依然采用行，列的方式来管理组件，但是TableLayout需要通过TableRow来控制表格的行数和列数，每添加一个TableRow，就是一个表格行，可以在TableRow中添加组件，每个组件为一列。如果直接在TableLayout中添加组件，则每个组件独占一行。其重要的XML属性有：
    
     1.android:collapseColumns 设置需要被隐藏的列的序列号，多个序列号之间用逗号隔开
     2.android:shrinkColumns 设置允许被收缩的列的序列号。多个序列号之间用逗号隔开
     3.android:stretchColumns 设置允许被拉伸的列的序列号。多个序列号之间用逗号隔开

<?xml version="1.0" encoding="utf-8"?>
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent" android:shrinkColumns="1" //第二列收缩 android:stretchColumns="0" //第一列拉伸 >
        <TableRow>
            <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮"/>
            <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="收缩的按钮"/>
        </TableRow>
        <TableRow>
            <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮"/>
            <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="收缩的按钮"/>
            <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="btn3"/>
        </TableRow>
        <Button //独占一行的组件 android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="btn4"/>
    
    </TableLayout>

![这里写图片描述][SouthEast 1]

**3.帧布局FrameLayout**  
帧布局为每个加入其中的组件创建一个空白的区域，每个子组件占据一帧，这些帧都会根据gravity属性自动对齐，也就是把组件一个个的叠加到一起

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent" >
    
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="140pt" android:height="140pt" android:background="@color/color1"/>
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="120pt" android:height="120pt" android:background="@color/color2"/>
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="100pt" android:height="100pt" android:background="@color/color3"/>
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="80pt" android:height="80pt" android:background="@color/color4"/>
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="60pt" android:height="60pt" android:background="@color/color5"/>
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="40pt" android:height="40pt" android:background="@color/color1"/>
    
    
    </FrameLayout>

![这里写图片描述][SouthEast 2]

**4.相对布局RelativeLayout**  
RelativeLayout里面的子控件的位置总是根据其他组件或者父容器来确定的，常见的属1.第一类:属性值为true或false  
android:layout\_centerHrizontal 水平居中  
android:layout\_centerVertical 垂直居中  
android:layout\_centerInparent 相对于父元素完全居中  
android:layout\_alignParentBottom 贴紧父元素的下边缘  
android:layout\_alignParentLeft 贴紧父元素的左边缘  
android:layout\_alignParentRight 贴紧父元素的右边缘  
android:layout\_alignParentTop 贴紧父元素的上边缘  
android:layout\_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物

第二类：属性值必须为id的引用名“@id/id-name”
    android:layout_below                        在某元素的下方
    android:layout_above                        在某元素的的上方
    android:layout_toLeftOf                     在某元素的左边
    android:layout_toRightOf                    在某元素的右边
    
    android:layout_alignTop                     本元素的上边缘和某元素的的上边缘对齐
    android:layout_alignLeft                    本元素的左边缘和某元素的的左边缘对齐
    android:layout_alignBottom                  本元素的下边缘和某元素的的下边缘对齐
    android:layout_alignRight                   本元素的右边缘和某元素的的右边缘对齐
    
    第三类：属性值为具体的像素值，如30dip，40px
    android:layout_marginBottom                 离某元素底边缘的距离
    android:layout_marginLeft                   离某元素左边缘的距离
    android:layout_marginRight                  离某元素右边缘的距离
    android:layout_marginTop                    离某元素上边缘的距离12

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent" >
    
        <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" //在父容器居中 android:text="btn1"/>
        <Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="btn2" android:layout_toRightOf="@id/btn1" //在btn1右侧 android:layout_alignLeft="@id/btn1" //与btn1的左边距对齐 />
        <Button android:id="@+id/btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="btn3" android:layout_below="@id/btn1" android:layout_alignTop="@id/btn1"/>
    </RelativeLayout>

![这里写图片描述][SouthEast 3]

**5.网格布局GridLayout**  
GridLayout可以把容器划分为x\*y个网格，也可以设置一个组件横跨多少列，纵跨多少行，常见的属性有：

1.android:rowCount               //设置网格布局几行
    2.android:columnCount            //设置网格布局有几列
    3.android:layout_row             //设置组件位于第几行
    4.android:layout_column          //设置该组件位于第几列
    5.android:layout_rowSpan         //纵向横跨几行
    6.android:layout_columnSpan      //横向横跨几列

<?xml version="1.0" encoding="utf-8"?>
    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="wrap_content" android:rowCount="2" android:columnCount="2" android:orientation="horizontal" >
    <Button android:layout_columnSpan="2" //跨两列 android:layout_gravity="fill" android:text="btn1"/>
    
        <Button android:text="btn2" />
        <Button android:text="btn3"/>
        <Button android:text="btn4" android:layout_rowSpan="2" //跨两行 android:layout_gravity="fill"/>
        <Button android:text="btn5"/>
        <Button android:text="btn6"/>
    
    </GridLayout>

![这里写图片描述][SouthEast 4]

**6.绝对布局AbsoluteLayout**  
AbsoluteLayout根据X、Y坐标来控制组件的位置，因为安卓手机的大小，分辨率都大不相同，所以用绝对布局实现的效果在不同的手机中各有差异，一般不建议使用AbsoluteLayout，所有的界面都可以用以上五种布局来实现，我们要学会根据不同的界面，找到最合适的布局方式。

[SouthEast]: /images/20220606/5bfe9939f795487281c045c430ed694e.png
[SouthEast 1]: /images/20220606/758fa195979d47f18966d2e40d0ba728.png
[SouthEast 2]: /images/20220606/c76216230f9549f2bae37f6e67f2ddaa.png
[SouthEast 3]: /images/20220606/3063688bbce04e6497d0ab04cbc5bfd2.png
[SouthEast 4]: /images/20220606/135f491e83c84c9e9900e866473aee03.png