Android布局——线性布局、相对布局、帧布局、表格布局、网格布局、约束布局_android 线性布局 相对布局 表格布局 帧布局

1.概述

1.1 布局的作用：布局是对界面结构的全面规划和安排，通过api中提供的各种布局能够快速的完成对界面的设计和规划
1.2 布局的种类：线性布局（LinearLayout）、相对布局(RelativeLayout)、帧布局(FrameLayout)、表格布局（TableLayout）、网格布局（GridLayout）、约束布局（ConstraintLayout）其中三种不常用布局帧布局、表格布局、网格布局
1.3 常用属性：layout_width 宽度、layout_height 高度、layout_padding 内边距、layout_margin 外边距，这个四个属性是所有布局共有的属性，取值有三种：match_parent匹配父容器、wrap_content适应内容、xxdp具体数值，比如200dp

2.线性布局

1.方向属性orientation：内容摆放的方向，有垂直（vertical）、水平（horizontal）两种

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:padding="20dp">
     
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ff0000"
            android:text="登录按钮"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00ff00"
            android:text="退出按钮"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0000ff"
            android:text="注册按钮"/>
    </LinearLayout>

 

2.权重属性layout_weight

如果要出现下图的布局

这里只需要给第一个控件添加权重

渲染的时候先展示没有权重的，最后剩余的空间会被有权重的全部拥有

如果要合理的按比例分配，此时要设置layout_width="0dp"(如果垂直设置高度为0dp)

总共5份，以此占1/5 2/5 2/5，并且控件的内容是不会影响这个比列的

3.重力属性

让控件左，右，上，下，居中等进行偏移，但是如果水平上的布局比例已经确定，重力属性在水平不再起作用，

如下让中间的偏移到垂直居中

 

2.相对布局

相对布局是通过相对定位的方式让控件出现在布局任意位置； 

在相对布局中如果不指定控件摆放的位置，那么控件都会被默认放在RelativeLayout的左上角。因此要先指定第一个控件的位置，再根据此控件去给其他控件布局。

RelativeLayout常见属性
相对于父容器layout_centerInParent（取值: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)

其他属性：

android:layout_below      位于元素的下方
    android:layout_above      位于元素的的上方
    android:layout_toLeftOf   位于元素的左边
    android:layout_toRightOf  位于元素的右边

    android:layout_alignTop   该元素的上边缘和某元素的的上边缘对齐
    android:layout_alignLeft  该元素的左边缘和某元素的的左边缘对齐
    android:layout_alignBottom 该元素的下边缘和某元素的的下边缘对齐
    android:layout_alignRight  该元素的右边缘和某元素的的右边缘对齐

3.帧布局

如上图类似这种布局就是帧布局，后面的子元素直接覆盖在前面的子元素之上，将前面的子元素部分和全部遮挡

常用属性

android:layout_gravity="center"//控件重力
android:gravity="center"//控件内容相对于控件本身的位置
android:foreground="@mipmap/bg"//前景
android:foregroundGravity="center_vetical"//前景重力

案例代码

<TextView
    android:layout_width="350dp"
    android:layout_height="350dp"
    android:background="#ff0000"
    android:layout_gravity="center"/>
<TextView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="#00ff00"
    android:layout_gravity="center"
   />
<TextView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#0000ff"
    android:layout_gravity="center"
    android:text="测试内容"
    android:textColor="#ffffff"
    android:gravity="center"
    />

效果

4.表格布局

通过行列的形式展示我们的控件，这样的布局就是表格布局

常见属性

android:stretchColumns="*"//设置可伸展的列，传入的是整型数据，即列的索引，*代表所有，也可多个比如1,2
android:shrinkColumns="1"//可伸缩的列
android:collapseColumns="2,3"//隐藏的列

案例代码

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*"
    >
    <!--
    1.直接在Tablelayout中添加控件，默认控件和父容器等宽，要让一些控件出现在同一行，把这些控件放在TableRow
    里面，宽度默认是内容宽度
    -->
    <EditText/>
    <TableRow>

        <Button android:text="7" />
        <Button android:text="8" />
        <Button android:text="9" />
        <Button android:text="/" />
    </TableRow>

    <TableRow>

        <Button android:text="4" />
        <Button android:text="5" />
        <Button android:text="6" />
        <Button android:text="-" />
    </TableRow>

    <TableRow>

        <Button android:text="1" />
        <Button android:text="2" />
        <Button android:text="3" />
        <Button android:text="+" />
    </TableRow>

    <TableRow>

        <Button android:text="." />
        <Button android:text="0" />
        <Button android:text="=" />
        <Button android:text="*" />
    </TableRow>
    
</TableLayout>

5.网格布局

如上图，网格布局和表格布局类似，但是网格能自身确定整个布局应该出现多少行多少列。控件放入的时候从左到右摆满指定的列数，再从第二行开始摆放

常用属性

android:orientation="horizontal"//表示控件在网格中从左到右顺序摆放还是上到下的顺序摆放
android:rowCount="4"//行数
android:columnCount="3"//列数
android:layout_rowSpan="2"//跨2行
android:layout_columnSpan="2"//跨2列
android:layout_gravity="fill"//填充展示

案例

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:rowCount="4"
    android:columnCount="3"
    >
    <Button android:text="1"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="4"
        android:layout_rowSpan="2"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"/>
    <Button android:text="5"/>
    <Button android:text="6"/>
    <Button android:text="7"/>
    <Button android:text="8"/>
    <Button android:text="9"/>
</GridLayout>

6.约束布局

约束布局特点

1.前面介绍的布局，虽然在AS中可以拖拽控件实现，但写代码更加方便，但是约束布局更加倾向通过拖拽设计可视化

2.能够有效解决布局过多问题，让页面更加扁平化

（由于是通过动手拖拽实现，所以需要多次尝试才能熟练掌握）

常用属性

app:layout_constraintBottom_toBottomOf="@+id/m"//当前控件的下边线约束到到指定控件或者父容器下边线

在AS中拖拽实现约束布局界面（尝试多用几次掌握）

文章首发地址：www.javayihao.top

更多内容公众号：java一号