【Android】常见的界面布局

常见的界面布局

View视图

Android所有的UI元素都是通过View和ViewGroup构建的，对于一个Android应用的用户界面来说，ViewGroup作为容器盛装界面的控件，它可以包含普通的View可见，也可以包含ViewGroup。减下来通过一个图描述假面真的ViewGroup布局和View可见的包含关系，如图1-1所示

图 1-1

需要注意的是:Android应用的每个界面的改元素必须有且只有一个ViewGroup容器

为了使用不同的界面风格，Android系统提供了五种常用的布局，分别为RelativeLayout（相对布局）、LinearLayout（线性布局）、FrameLayout（帧布局）、TableLayout（表格布局）、ConstraintLayout（约束布局）

布局的通用属性

Android系统提供的物种常用布局之恶或者间接继承ViewGroup，一次五种常用的布局也支持zaiViewGroup中定义属性，这些属性可以看作布局的通用属性

表 1-2 布局的通用属性

属性名称	功能描述
android:id	设置布局的标识
android:layout_width	设置布局的宽度
android:layout_height	设置布局的高度
android:backgroup	设置布局的背景
android:layout_margin	设置当前布局与屏幕边界或者与周围控件的距离
android:padding	设置当前布局与该布局中控件的距离

LinearLayout(线性布局)

是一种非常常用的布局。正如它的名字所描述的一样，这个布局会将它所包含的控件在线性方向上依次排列。既然是线性排列，肯定就不仅只有一个方向，这里一般只有两个方向：水平方向和垂直方向

• 下面我们将LinearLayout（线性布局）常用到的属性简单归纳一下：

属性1：android:orientation      指定线性布局的方向（水平或者垂直）

属性2：android:width            线性布局的容器宽度

属性3：android:height           线性布局的容器高度

属性4：android:background       线性布局的背景

属性5：android:gravity          线性布局中，子容器相对于父容器所在的位置

属性1的值

android:orientation="horizontal"         指定线性布局方向：水平

android:orientation="vertical"           指定线性布局方向：垂直

属性2的值

android:width="xxxdp"                    指定线性布局的容器宽度为：xxxdp

android:width="wrap_content"             指定线性布局的容器宽度为：根据容器内容宽度大小来填充屏幕宽度

android:width="match_parent"             指定线性布局的容器宽度为：撑满整个屏幕宽度

属性3的值

android:height="xxxdp"                   指定线性布局的容器高度为：xxxdp

android:height="wrap_content"            指定线性布局的容器高度为：根据容器内容高度大小来填充屏幕高度

android:height="match_parent"            指定线性布局的容器高度为：撑满整个屏幕高度

属性4的值

android:background="#000"                  指定线性布局的背景为：黑色（rgb颜色）

android:background="@android:color/black"  指定线性布局的背景为：黑色（引用android系统自带的原始黑色）

andrid:background="@color/colorPrimary"    指定线性布局的背景为：（根据res/color.xml 中的colorPrimary所定义的颜色设置）

属性5的值

android:gravity="center"               指定线性布局中，子容器相对于父容器所在的位置为：正中心

android:gravity="cente_verticalr"      指定线性布局中，子容器相对于父容器所在的位置为：垂直方向的正中心

android:gravity="center_horizontal"    指定线性布局中，子容器相对于父容器所在的位置为：水平方向的正中心

android:gravity="left"                 指定线性布局中，子容器相对于父容器所在的位置为：最左边（默认）

android:gravity="right"     		   指定线性布局中，子容器相对于父容器所在的位置为：最右边

android:gravity="top"     			   指定线性布局中，子容器相对于父容器所在的位置为：最上方(默认)

android:gravity="bottom"    		   指定线性布局中，子容器相对于父容器所在的位置为：最下方

weight(权重)属性详解

• 设置一个一面有三个按钮，水平排列，大小之比分别是1:1:2
  • 发现我们只要设置layout_weight属性就好

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.LinearLayoutActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="按钮3" />
</LinearLayout>

为LinearLayout设置分割线

• :直接在布局中添加一个view,这个view的作用仅仅是显示出一条线

      <View
          android:layout_width="match_parent"
          android:layout_height="1px"
          android:background="#F80707" />
  

RelativeLayout(相对布局)

父容器定位属性

• 示意图

• 属性值

上：android:layout_alignParentTop

下：android:layout_alignParentBottom

中：android:layout_centerInParent

左：android:layout_alignParentLeft

右：android:layout_alignParentRight

练习代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.RelativeLayoutActivity">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="btn1"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:text="btn2"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="btn3"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="btn4"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="btn5"
        android:textAllCaps="false" />

</RelativeLayout>

• 效果图

根据兄弟组件定位

• 示意图

图中的组件1,2就是兄弟组件了,而组件3与组件1或组件2并不是兄弟组件,所以组件3不能通过 组件1或2来进行定位

• 属性值

上：android:layout_above="@id/控件id"

下：android:layout_below="@id/控件id"

左：android:layout_toLeftOf="@id/控件id"

右：android:layout_toRightOf="@id/控件id"

• 练习代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.RelativeLayoutActivity">

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="btn3"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn3"
        android:layout_toLeftOf="@id/btn3"
        android:text="btn1"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn3"
        android:layout_toRightOf="@id/btn3"
        android:text="btn2"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn3"
        android:layout_toLeftOf="@id/btn3"
        android:text="btn4"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn3"
        android:layout_toRightOf="@id/btn3"
        android:text="btn5"
        android:textAllCaps="false" />

</RelativeLayout>

• 效果图

TableLayout(表格布局)

TableLayout继承了LinearLayout，完全支持LinearLayout所有属性。他的本质依然是线性布局，通过行列来控制。

• 三个常用属性

android:collapseColumns:设置需要被隐藏的列的序号
android:shrinkColumns:设置允许被收缩的列的列序号
android:stretchColumns:设置运行被拉伸的列的列序号

以上这三个属性的列号都是从0开始算的,比如shrinkColunmns = "2",对应的是第三列！
可以设置多个,用逗号隔开比如"0,2",如果是所有列都生效,则用"*"号即可
除了这三个常用属性,还有两个属性,分别就是跳格子以及合并单元格,这和HTML中的Table类似:

android:layout_column="2":表示的就是跳过第二个,直接显示到第三个格子处,从1开始算的!
android:layout_span="4":表示合并4个单元格,也就说这个组件占4个单元格

• 测试练习

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <!--定义第一个表格布局，指定第二列允许收缩，第三列允许拉伸，列从0开始算-->
    <TableLayout
        android:id="@+id/TableLayout01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="1"
        android:stretchColumns="2">

        <!--直接添加控件，他会占用一行-->
        <Button
            android:id="@+id/ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAllCaps="false"
            android:text="占用一行"
            />

        <!--添加一个表格行-->
        <TableRow>
            <!--增加三个按钮，相当于增加三列-->
            <Button
                android:id="@+id/ok1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAllCaps="false"
                android:text="普通按钮"
                />
            <Button
                android:id="@+id/ok2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAllCaps="false"
                android:text="收缩按钮"
                />
            <Button
                android:id="@+id/ok3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAllCaps="false"
                android:text="拉伸按钮"
                />
        </TableRow>
    </TableLayout>




    <!--定义第二个表格布局，指定第二列隐藏-->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1">
        <Button
            android:id="@+id/ok5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAllCaps="false"
            android:text="独自一行的按钮"
            />
        <TableRow>
            <Button
                android:id="@+id/ok6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAllCaps="false"
                android:text="普通按钮"
                />
            <Button
                android:id="@+id/ok7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAllCaps="false"
                android:text="隐藏按钮"
                />
            <Button
                android:id="@+id/ok8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAllCaps="false"
                android:text="拉伸按钮"
                />

        </TableRow>
    </TableLayout>






    <!--第三个表格布局，定义第二列和第三列可以被拉伸-->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="1,2">
        <Button
            android:id="@+id/ok9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAllCaps="false"
            android:text="独自一行的按钮"
            />
        <TableRow>
            <Button
                android:id="@+id/ok10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAllCaps="false"
                android:text="普通按钮"
                />
            <Button
                android:id="@+id/ok11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAllCaps="false"
                android:text="拉伸按钮"
                />
            <Button
                android:id="@+id/ok12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAllCaps="false"
                android:text="拉伸按钮"
                />

        </TableRow>
    </TableLayout>
</LinearLayout>

• 测试结果图

FrameLayout(帧布局)

前景图像:永远处于帧布局最上面,直接面对用户的图像,就是不会被覆盖的图片。

• 属性

android:foreground:			设置改帧布局容器的前景图像

android:foregroundGravity:	设置前景图像显示的位置

• 代码实例

  • 例子

  • android:foreground="@drawable/ic_launcher_background"设置前景图片

  • android:foregroundGravity="left|bottom"设置前景图片的位置

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/FrameLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:foreground="@drawable/ic_launcher_background"
        android:foregroundGravity="left|bottom">
    
        <TextView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="#FF6143" />
        <TextView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:background="#7BFE00" />
        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#FFFF00" />
    
    </FrameLayout>    
    

  • 结果
    

GridLayout(网格布局)

• 特点

可以自己设置布局中组件的排列方式
可以自定义网格布局有多少行,多少列
可以直接设置组件位于某行某列
可以设置组件横跨几行或者几列
默认每个组件都是一行一列
设置组件横跨几行或者几列;设置完毕后,需要在设置一个填充:android:layout_gravity = "fill"

• 使用
  • android:columnCount="4"每一行设置为四格
  • android:rowCount="6"一共六行
  • android:layout_rowSpan="2"合并2列
  • android:layout_columnSpan="2"合并2行

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="6" >

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#FFCCCC"
        android:text="0"
        android:textSize="50sp" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="回退" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="清空" />

    <Button android:text="+" />

    <Button android:text="1" />

    <Button android:text="2" />

    <Button android:text="3" />

    <Button android:text="-" />

    <Button android:text="4" />

    <Button android:text="5" />

    <Button android:text="6" />

    <Button android:text="*" />

    <Button android:text="7" />

    <Button android:text="8" />

    <Button android:text="9" />

    <Button android:text="/" />

    <Button
        android:layout_width="wrap_content"
        android:text="." />

    <Button android:text="0" />

    <Button android:text="=" />

</GridLayout>

​ 结果