Android：布局管理器

前言

在 Android 中，每个组件在窗体中都有具体的位置和大小，在窗体中摆放各种组件时，很难进行判断。不过，使用 Android 布局管理器可以很方便地控制各组件的位置和大小。

Android 提供了以下 5 种布局管理器
①、相对布局管理器(RelativeLayout)：通过相对定位的方式来控制组件的摆放位置。
②、线性布局管理器(LinearLayout)：在垂直或水平方向依次摆放组件。
③、帧布局管理器(FrameLayout)：没有任何定位方式，所有的组件都会摆放在容器的左上角。
④、表格局部管理器(TableLayout)：使用表格的方式按行、列来摆放组件。
⑤、绝对布局管理器(AbsoluteLayout)：通过绝对定位(x, y坐标)的方式来控制组件的摆放位置。

举例说明：相对布局管理器

<!-- 在 activity_main.xml 中实现相对布局管理器 -->
<?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"
    android:background="@mipmap/backgound"
    tools:context=".MainActivity">

<!-- 添加一个居中显示的文本视图 textView1 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16dp"
        android:text="发现有 Widget 的新版本，您想现在就安装吗？"
        android:id="@+id/textView1"
        android:layout_centerInParent="true"/>

<!-- 添加一个按钮 button2，该按钮与 textView1 的右边界对齐且在 textView1 下方 -->
    <Button
        android:text="以后再说"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:layout_alignRight="@+id/textView1"
        android:layout_below="@+id/textView1"/>

<!-- 添加一个在 button2 左侧显示的按钮 button1 且在 textView1 下方 -->
    <Button
        android:id="@+id/button1"
        android:text="现在更新"
        android:layout_width = "wrap_content"
        android:layout_height= "wrap_content"
        android:layout_below = "@+id/textView1"
        android:layout_toLeftOf="@+id/button2"/>

</RelativeLayout>

运行所得界面

---

布局管理器的嵌套

在进行用户界面设计时，很多时候只通过一种布局管理器很难实现想要的界面效果，这时就得将多种布局管理器混合使用，即布局管理器的嵌套。在实现布局管理器的嵌套时，需要记住以下几点原则。
①、根布局管理器必须包含 xmlns 属性。
②、在一个布局文件中，最多只能有一个根布局管理器，如果需要有多个，还需要使用一个根布局管理器将它们括起来。
③、不能嵌套太深，如果嵌套太深会影响性能，主要体现在降低页面加载速度。

<?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="vertical"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp">

        <ImageView
            android:id="@+id/icol"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_alignParentLeft="true"
            android:layout_marginStart="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="10dp"
            android:src="@mipmap/v_icol" />

        <TextView
            android:id="@+id/name1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@+id/icol"
            android:text="雪绒花"
            android:textColor="#576B95" />

        <TextView
            android:id="@+id/content1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/name1"
            android:layout_alignParentEnd="true"
            android:layout_toRightOf="@+id/icol"
            android:minLines="3"
            android:text="祝我的亲人、朋友们新年快乐！" />

        <TextView
            android:id="@+id/content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/content1"
            android:layout_marginTop="3dp"
            android:layout_marginBottom="5dp"
            android:layout_toRightOf="@+id/icol"
            android:text="昨天"
            android:textColor="#9A9A9A" />

        <ImageView
            android:id="@+id/comment1"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_below="@id/content1"
            android:layout_alignParentRight="true"
            android:src="@mipmap/comment" />

        <ImageView
            android:id="@+id/Icol"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_below="@id/icol"
            android:layout_alignParentLeft="true"
            android:layout_marginStart="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="10dp"
            android:src="@mipmap/v_icol" />

        <TextView
            android:id="@+id/Name1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/icol"
            android:layout_alignTop="@id/Icol"
            android:text="雪绒花"
            android:textColor="#576B95" />

        <TextView
            android:id="@+id/Content1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Name1"
            android:layout_alignParentEnd="true"
            android:layout_toRightOf="@+id/Icol"
            android:minLines="3"
            android:text="祝我的亲人、朋友们新年快乐！" />

        <TextView
            android:id="@+id/Content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Content1"
            android:layout_marginTop="3dp"
            android:layout_marginBottom="5dp"
            android:layout_toRightOf="@+id/Icol"
            android:text="昨天"
            android:textColor="#9A9A9A" />

        <ImageView
            android:id="@+id/Comment1"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_below="@id/Content1"
            android:layout_alignParentRight="true"
            android:src="@mipmap/comment" />
    </RelativeLayout>
</LinearLayout>

结果