Android开发-常用布局

一、LinearLayout：线性排列

LinearLayout 是最简单、最直观的布局，它将子视图按单一方向（水平或垂直）线性排列。

1. 核心属性

• android:orientation：排列方向。
  • vertical：垂直排列（从上到下）。
  • horizontal：水平排列（从左到右）。

2. 代码示例

<!-- 垂直线性布局：标题、图片、描述依次排列 -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文章标题"
        android:textSize="20sp"
        android:textStyle="bold" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/article_image"
        android:scaleType="centerCrop" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这里是文章的简短描述..."
        android:textSize="14sp" />
        
</LinearLayout>

3. 权重（layout_weight）的妙用

android:layout_weight 属性允许子视图根据权重分配父容器的剩余空间。

<!-- 水平布局：两个按钮平分宽度 -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_width="0dp" <!-- 关键：设为0dp -->
        android:layout_height="wrap_content"
        android:layout_weight="1" <!-- 权重为1 -->
        android:text="取消" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" <!-- 权重为1 -->
        android:text="确定" />
        
</LinearLayout>

✅ 优点 ：简单易懂，适合线性排列的场景。

⚠️ 缺点：嵌套层级过深会影响性能；实现复杂相对定位较困难。

二、RelativeLayout：相对定位

RelativeLayout 允许子视图通过相对于父容器或其他兄弟视图的位置来确定自身位置，非常灵活。

1. 核心定位属性（以 android:layout_ 开头）

属性	说明
layout_toLeftOf / layout_toRightOf	位于某视图的左侧/右侧
layout_above / layout_below	位于某视图的上方/下方
layout_alignLeft / layout_alignRight	与某视图左/右对齐
layout_alignTop / layout_alignBottom	与某视图顶部/底部对齐
layout_centerInParent	在父容器中居中
layout_centerHorizontal / layout_centerVertical	水平/垂直居中

2. 代码示例

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#F0F0F0">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerVertical="true"
        android:layout_marginStart="16dp"
        android:src="@drawable/user_icon" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/icon" <!-- 位于 icon 右侧 -->
        android:layout_alignTop="@id/icon" <!-- 与 icon 顶部对齐 -->
        android:layout_marginStart="16dp"
        android:text="用户名"
        android:textSize="18sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/icon"
        android:layout_below="@id/title" <!-- 位于 title 下方 -->
        android:layout_marginStart="16dp"
        android:text="在线状态"
        android:textSize="14sp"
        android:textColor="#666666" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true" <!-- 对齐父容器右边缘 -->
        android:layout_centerVertical="true"
        android:layout_marginEnd="16dp"
        android:text="关注" />
        
</RelativeLayout>

✅ 优点 ：定位灵活，减少嵌套。

⚠️ 缺点 ：在旧版本 Android 上性能略差于 LinearLayout；属性较多，易出错。

三、ConstraintLayout：现代布局之王（强烈推荐）

ConstraintLayout 是 Google 推荐的现代化、高性能布局 。它结合了 RelativeLayout 的灵活性和扁平化的视图结构，是复杂 UI 的首选。

1. 核心概念：约束（Constraints）

• 每个子视图必须至少有一个水平约束 和一个垂直约束。
• 约束可以连接到父容器的边缘或其他视图的边缘。
• 支持链（Chains）、屏障（Barriers）、引导线（Guidelines）等高级功能。

2. 代码示例（XML 手写）

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/avatar" />

    <TextView
        android:id="@+id/name"
        android:layout_width="0dp" <!-- 宽度为0，由约束决定 -->
        android:layout_height="wrap_content"
        android:text="张三"
        android:textSize="16sp"
        app:layout_constraintStart_toEndOf="@id/avatar"
        app:layout_constraintEnd_toStartOf="@+id/timestamp"
        app:layout_constraintTop_toTopOf="@id/avatar" />

    <TextView
        android:id="@+id/timestamp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2分钟前"
        android:textSize="12sp"
        android:textColor="#888888"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/avatar" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="这是一条动态消息内容..."
        android:textSize="14sp"
        app:layout_constraintStart_toStartOf="@id/name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/name"
        app:layout_constraintBottom_toBottomOf="@id/avatar" />
        
</androidx.constraintlayout.widget.ConstraintLayout>

✅ 优点：

• 扁平化结构：避免深层嵌套，性能优异。
• 高度灵活：轻松实现复杂布局。
• 强大的工具支持：Android Studio 的 Layout Editor 提供拖拽和自动约束功能。
• 响应式设计：易于适配不同屏幕尺寸。
  ⚠️ 缺点：XML 代码可能较复杂，初学有一定门槛。

四、FrameLayout：层叠布局

FrameLayout 是最简单的布局容器之一，它将所有子视图堆叠在左上角，后面的视图会覆盖前面的视图。

1. 典型用途

• 显示单个视图（如 ImageView）。
• 实现Fragment的容器。
• 创建遮罩层 或悬浮按钮 （常与 CoordinatorLayout 配合）。

2. 代码示例

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <!-- 背景图片 -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background"
        android:scaleType="centerCrop" />

    <!-- 叠加的标题 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="欢迎光临"
        android:textColor="#FFFFFF"
        android:textSize="24sp"
        android:textStyle="bold" />

    <!-- 右下角的悬浮按钮 -->
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add"
        android:background="?attr/selectableItemBackgroundBorderless" />
        
</FrameLayout>

✅ 优点 ：简单高效，适合层叠效果。

⚠️ 缺点：定位能力弱，不适合复杂排列。

五、ScrollView：滚动容器

ScrollView 是一个只能包含一个直接子视图 的特殊 FrameLayout，它允许其内容在垂直方向上滚动。

1. 使用场景

当内容高度超过屏幕时，确保所有内容都可访问。

2. 代码示例

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- ScrollView 只能有一个直接子View/ViewGroup -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="内容1..." />
        <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="内容2..." />
        <!-- 更多内容... -->
        <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="内容N..." />
        
    </LinearLayout>
    
</ScrollView>

⚠️ 重要：

• ScrollView 只支持垂直滚动 。需要水平滚动用 HorizontalScrollView。
• 内容过多时性能可能下降，考虑使用 RecyclerView。

六、布局选型指南

场景	推荐布局
简单线性排列（列表项、表单）	LinearLayout
需要相对定位（复杂卡片）	ConstraintLayout (首选) 或 RelativeLayout
现代、复杂、高性能 UI	✅ ConstraintLayout
层叠效果（背景+文字、Fragment 容器）	FrameLayout
内容过长需要滚动	ScrollView / HorizontalScrollView
列表或网格（大量数据）	RecyclerView (非布局容器，但常替代 ScrollView 内的 LinearLayout)

🔥 黄金法则 ：优先选择 ConstraintLayout。它能胜任绝大多数场景，并且性能优越。

七、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！