当前位置：首页 > news >正文

Android开发-常用布局

news 2025/9/8 8:27:55

一、LinearLayout：线性排列

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

1. 核心属性

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

2. 代码示例

<!-- 垂直线性布局：标题、图片、描述依次排列 -->
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="16dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="文章标题"android:textSize="20sp"android:textStyle="bold" /><ImageViewandroid:layout_width="match_parent"android:layout_height="200dp"android:src="@drawable/article_image"android:scaleType="centerCrop" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="这里是文章的简短描述..."android:textSize="14sp" /></LinearLayout>

3. 权重（layout_weight）的妙用

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

<!-- 水平布局：两个按钮平分宽度 -->
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><Buttonandroid:layout_width="0dp" <!-- 关键：设为0dp -->android:layout_height="wrap_content"android:layout_weight="1" <!-- 权重为1 -->android:text="取消" /><Buttonandroid: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. 代码示例

<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="200dp"android:background="#F0F0F0"><ImageViewandroid:id="@+id/icon"android:layout_width="60dp"android:layout_height="60dp"android:layout_centerVertical="true"android:layout_marginStart="16dp"android:src="@drawable/user_icon" /><TextViewandroid: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" /><TextViewandroid: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" /><Buttonandroid: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.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:padding="16dp"><ImageViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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. 代码示例

<FrameLayoutandroid:layout_width="match_parent"android:layout_height="200dp"><!-- 背景图片 --><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:src="@drawable/background"android:scaleType="centerCrop" /><!-- 叠加的标题 --><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="欢迎光临"android:textColor="#FFFFFF"android:textSize="24sp"android:textStyle="bold" /><!-- 右下角的悬浮按钮 --><ImageButtonandroid: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. 代码示例

<ScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"><!-- ScrollView 只能有一个直接子View/ViewGroup --><LinearLayoutandroid: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)