Android语言基础教程（42）Android用户界面设计之布局管理器：别让UI打架了！Android布局管理器的“相亲”指南，附保姆级代码-优快云博客

嘿，各位未来的App大神们，今天咱们来唠点Android开发里最基础，但也最容易让人头秃的东西——布局管理器。

你有没有经历过这种绝望？在设计师那里美轮美奂的界面，一到你手里就变得七扭八歪，不同尺寸的手机上一跑，直接上演“UI离家出走”的惨剧。按钮叠在了一起，文字跑出了屏幕，图片大得能当背景…… 别慌，这八成是你的“布局管家”没选对，或者你没摸清它的脾气。

简单说，布局管理器就是个看不见的容器，它负责告诉你里面的每一个按钮、每一行文字应该摆在屏幕的哪个位置，以及它们之间应该保持什么样的“社交距离”。今天，咱们就请出Android界的几位“金牌管家”，深度扒一扒它们的底细。

第一位管家：佛系的“排队狂魔”——LinearLayout

这位是新手村最好用的伙伴，LinearLayout（线性布局）。它的管理哲学就一个字：“排！”。

核心思想：把所有子视图（也就是那些按钮、文本框）像小学生放学一样，一个接一个地排成一条直线。方向？要么**垂直（vertical）排成一列，要么水平（horizontal）**排成一行。简单粗暴，非常直观。
独门秘籍：layout_weight（权重）
这是LinearLayout最牛逼的武器，堪称“空间分配大师”。它用来决定在排好队后，剩余的空间该怎么分。
举个例子：你有两个按钮，一个想让它固定宽度，另一个想让它占满剩下的所有空间。这时候，给第二个按钮设置 android:layout_weight="1"，它就会像吃了增高药一样，“咻”地一下把剩余空间全占了。如果两个按钮都设置weight="1"，那它们就会平分剩余空间，实现五五开，绝对公平。
缺点：太死板了！想实现稍微复杂一点的布局，比如一个视图在右下角，另一个在顶部中央，你就得开始“套娃”——在LinearLayout里面再嵌套另一个LinearLayout。嵌套层数一多，App渲染起来就会变慢，就像穿了太多件衣服，活动起来不方便。

简单示例（一个简单的水平布局，带权重）：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_width="0dp" <!-- 宽度交给weight来决定 -->
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="同意" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="拒绝" />

</LinearLayout>

你看，这两个按钮就会乖乖地各占屏幕宽度的一半。

第二位管家：人脉广阔的“关系户”——RelativeLayout

如果你觉得LinearLayout太僵化，那RelativeLayout（相对布局）就是个“社交花”。它的核心是**“关系”**。

核心思想：每个视图的位置，都不是绝对的，而是相对于父布局或者其他兄弟视图来确定的。

- “老爸，我要贴在你底部”（android:layout_alignParentBottom="true"）
- “喂，老哥，请让我放在你的右边”（android:layout_toRightOf="@id/title_view"）
- “我要和那个图片底部对齐”（android:layout_alignBottom="@id/avatar_image"）

优点：相比LinearLayout，它可以减少布局嵌套，实现更灵活的布局。比如把Logo放在顶部中央，把提交按钮固定在底部，非常方便。
缺点：视图之间的依赖关系太复杂！如果某个视图的位置依赖于另一个视图，而那个视图又依赖于第三个…… 这就成了一团乱麻。性能上，RelativeLayout可能需要测量两次才能确定所有视图的位置，而且依赖关系一多，你自己看代码都容易晕。

第三位管家：功能最强的“乐高大师”——ConstraintLayout（官方主推！）

前面两位都是老将了，而现在，乃至未来，真正的王者是它——ConstraintLayout（约束布局）。你可以把它理解为RelativeLayout的Pro Max Plus升级版，功能强大到没朋友，是Google现在亲爹般大力推荐的首选。

核心思想：“约束”。每一个视图都必须至少在水平和垂直方向上各有一个约束，才能确定自己的位置。它就像用乐高搭房子，每一块积木（视图）都必须和旁边的积木或者底板（父布局）有连接点（约束）。
它为啥是神？

1. 扁平化，性能高：用它几乎可以完全避免深层嵌套，布局层级非常扁平，测量和绘制效率极高。
2. 比例定位，精准狠：除了传统的边到边约束，它还能用偏执（Bias） 来在约束的空间内按比例调整位置。比如左右各约束在父布局两边，然后设置app:layout_constraintHorizontal_bias="0.3"，它就会出现在水平方向30%的位置，实现精准定位。
3. 尺寸比例：可以直接设置视图的宽高比，比如 app:layout_constraintDimensionRatio="1:1"，轻松实现一个正方形图片。
4. 辅助工具人（Guideline、Barrier）：它还有两个神器：

- - Guideline（参考线）：一条看不见的线，你可以把它放在屏幕某个百分比或固定距离的位置，然后让其他视图以它为基准进行约束。完美实现设计稿里的对齐。
  - Barrier（屏障）：多个视图宽度不确定时，Barrier会自动站在它们最右边的位置，其他视图只需要约束在Barrier的右边，就能实现动态避让，超级智能！

【完整示例】用ConstraintLayout搭建一个漂亮的名片页

理论说再多不如上手干。下面我们就用ConstraintLayout来搭建一个简洁又好看的个人名片界面。

目标效果：一个包含头像、姓名、职位、简介和社交按钮的卡片，在各种屏幕上都能完美居中且自适应。

XML代码实现：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    android:background="#f5f5f5">

    <!-- 名片卡片背景 -->
    <View
        android:id="@+id/card_background"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/bg_card" <!-- 这里假设你有一个圆角矩形的drawable -->
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.1" <!-- 让卡片稍微靠上一点 -->
        app:layout_constraintWidth_percent="0.9" <!-- 宽度是父布局的90% -->
        app:layout_constraintHeight_percent="0.6" /> <!-- 高度是父布局的60% -->

    <!-- 头像（圆形，使用约束比例实现） -->
    <ImageView
        android:id="@+id/iv_avatar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/avatar_demo" <!-- 你的头像图片 -->
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="1:1" <!-- 关键！宽高比1:1，实现正方形 -->
        app:layout_constraintEnd_toEndOf="@id/card_background"
        app:layout_constraintStart_toStartOf="@id/card_background"
        app:layout_constraintTop_toTopOf="@id/card_background"
        app:layout_constraintWidth_percent="0.25" <!-- 宽度是卡片宽度的25% -->
        android:layout_marginTop="20dp" />

    <!-- 使用Guideline来辅助定位，在卡片垂直方向30%的位置 -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />

    <!-- 姓名 -->
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="李美丽"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@id/card_background"
        app:layout_constraintStart_toStartOf="@id/card_background"
        app:layout_constraintTop_toBottomOf="@id/guideline_name" /> <!-- 顶部约束在Guideline -->

    <!-- 职位 -->
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android开发大神 | 铲屎官"
        android:textColor="#666"
        app:layout_constraintEnd_toEndOf="@id/card_background"
        app:layout_constraintStart_toStartOf="@id/card_background"
        app:layout_constraintTop_toBottomOf="@id/tv_name" />

    <!-- 简介 -->
    <TextView
        android:id="@+id/tv_bio"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginTop="16dp"
        android:gravity="center_horizontal"
        android:text="一个热爱代码和猫咪的程序员。坚信技术能让生活更美好，目前正在努力学习不秃头。"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="@id/card_background"
        app:layout_constraintStart_toStartOf="@id/card_background"
        app:layout_constraintTop_toBottomOf="@id/tv_title" />

    <!-- 社交按钮容器（水平排列） -->
    <LinearLayout
        android:id="@+id/ll_social"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="@id/card_background"
        app:layout_constraintEnd_toEndOf="@id/card_background"
        app:layout_constraintStart_toStartOf="@id/card_background"
        app:layout_constraintTop_toBottomOf="@id/tv_bio"
        android:layout_marginBottom="20dp">

        <!-- 这里可以放你的社交图标按钮，比如微信、微博、GitHub -->
        <ImageButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/ic_wechat"
            android:background="?attr/selectableItemBackgroundBorderless"/>

        <ImageButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/ic_github"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:layout_marginStart="16dp"/>

        <!-- ... 更多按钮 -->

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

代码解读与ConstraintLayout精髓：

扁平化结构：整个布局只有一个根ConstraintLayout，里面直接包含了所有元素，几乎没有嵌套（除了最后的按钮容器用了LinearLayout，因为它本身就是水平排列，用起来方便）。
约束是王道：注意看，每个视图的layout_constraint[Start/End/Top/Bottom]_to[Start/End/Top/Bottom]Of属性都设置得非常清楚，这就是它们的“乐高连接点”。
百分比与比例：

- card_background 使用了 layout_constraintWidth_percent 来按比例设定宽高。
- iv_avatar 使用了 layout_constraintDimensionRatio="1:1" 来保证自己永远是正方形。

神器Guideline：guideline_name 这条看不见的线，稳稳地定位在卡片的30%高度处，然后姓名TextView就乖乖地以它为顶部基准。这样无论屏幕怎么变，头像和姓名的相对位置关系都是固定的，非常优雅。

总结：怎么选？听劝！

新手练手/简单列表：用 LinearLayout，配合 weight 玩玩，很快乐。
维护老项目：你会遇到很多 RelativeLayout，理解它的“关系学”很重要。
所有新项目：无脑上 ConstraintLayout！前期学习曲线稍微陡一点点，但一旦掌握，效率飞起，性能优越，绝对是帮你构建现代化、高响应式UI的不二法门。

所以，别再让你的UI组件在屏幕上“自由飞翔”或者“叠罗汉”了。选对管家，定好规矩，你的App界面瞬间就能从“业余选手”升级为“专业范儿”。快去给你的ConstraintLayout“乐高大师”一个机会吧！