Android 开发 | 常用布局

1. 线性布局 LinearLayout

通过 android:orientation 区分两种方向：

• horizontal：水平方向
• vertical：垂直方向

默认水平方向。

权重：按指定比例分配下级视图。

规定：如果设置了 layout_weight 属性值，那么 layout_width 或者 layout_height 必须填 0dp。如果 layout_width 为 0dp，那么 layout_weight 就表示水平方向的权重；如果 layout_height 为 0dp，那么 layout_weight 就表示垂直方向的权重；

如下，橙色视图和绿色视图的比例为2:1

代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".layout.LinearLayoutDemo2Activity">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="300dp"
        android:layout_weight="2"
        android:background="@color/orange" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="300dp"
        android:layout_weight="1"
        android:background="@color/green" />

</LinearLayout>

2. 相对布局 RelativeLayout

相对参照物的位置，参照物分两种：

1. 与该视图自身平级的视图；
2. 该视图的上级视图（它归属的 RelativeLayout）

例子：

代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="@color/orange"
    tools:context=".layout.RelativeLayoutDemoActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我在左上角" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="我在中上" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:text="我在右上角" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="我在正中间" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_centerInParent="true"
        android:text="我在中左" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerInParent="true"
        android:text="我在中右" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="我在中下" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:text="我在左下角" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:text="我在右下角" />

</RelativeLayout>

再来一个例子：

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

    <TextView
        android:id="@+id/first_label"
        android:text="第一个label"
        android:padding="5dp"
        android:background="@color/orange"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/second_label"
        android:text="第二个label，紧接第一个label"
        android:layout_toEndOf="@+id/first_label"
        android:background="@color/yellow"
        android:padding="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/third_label"
        android:text="第三个label\n在第二个label下方"
        android:layout_below="@+id/second_label"
        android:layout_alignStart="@+id/second_label"
        android:padding="5dp"
        android:background="@color/purple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/forth_label"
        android:text="第四个label，宽度不够时自动换行"
        android:layout_toEndOf="@+id/second_label"
        android:background="@color/red"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

3. 网格布局 GridLayout

网格布局默认从左到右、从上到下。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/orange"
    android:columnCount="3"
    android:padding="20dp"
    tools:context=".layout.GridLayoutDemoActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/red"
        android:text="第一个label" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/yellow"
        android:text="第2个label" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/red"
        android:text="第3个label" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/red"
        android:text="第4个label" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/purple"
        android:text="第5个label" />


</GridLayout>