Android App UI 开发基础入门

前言#

Android 应用开发中，UI（用户界面） 是最直观、也是初学者最先接触的部分。无论你是想做一个记账 App、聊天工具还是个人博客客户端，都需要先学会如何”画”出界面。

Android UI 开发主要有两种方式：

传统方式：XML 布局 + View 系统（本文重点）
现代方式：Jetpack Compose 声明式 UI（文末简介）

本文将从零开始，带你掌握 Android UI 开发的核心知识：

Android 项目的 UI 文件结构
常用布局（LinearLayout、RelativeLayout、ConstraintLayout、FrameLayout）
常用控件（TextView、Button、EditText、ImageView、RecyclerView）
事件处理（点击、长按）
单位与资源适配

Note

本文使用 Kotlin 作为示例代码语言，XML 布局部分与 Java 通用。推荐使用 Android Studio 作为开发工具。

1. UI 文件在哪里？#

一个典型的 Android 项目结构如下：

1
app/
2
├── src/
3
│   └── main/
4
│       ├── java/                    # Kotlin/Java 代码
5
│       │   └── com/example/app/
6
│       │       └── MainActivity.kt
7
│       └── res/                     # 资源文件夹
8
│           ├── layout/              # 📁 布局文件（XML）
9
│           │   └── activity_main.xml
10
│           ├── drawable/            # 📁 图片、形状
11
│           ├── mipmap/              # 📁 应用图标
12
│           ├── values/              # 📁 字符串、颜色、尺寸
13
│           │   ├── strings.xml
14
│           │   ├── colors.xml
15
│           │   └── dimens.xml
16
│           └── themes/              # 📁 主题
17
│               └── themes.xml

关键文件：

res/layout/activity_main.xml —— 界面布局，定义控件的位置和样式
MainActivity.kt —— Activity 代码，负责逻辑和事件处理

2. 你的第一个界面#

2.1 XML 布局#

1
<?xml version="1.0" encoding="utf-8"?>
2
<LinearLayout
3
    xmlns:android="http://schemas.android.com/apk/res/android"
4
    android:layout_width="match_parent"
5
    android:layout_height="match_parent"
6
    android:orientation="vertical"
7
    android:padding="16dp"
8
    android:gravity="center">
9

10
    <TextView
11
        android:id="@+id/tv_greeting"
12
        android:layout_width="wrap_content"
13
        android:layout_height="wrap_content"
14
        android:text="Hello, Android!"
15
        android:textSize="24sp"
16
        android:textColor="#333333" />
17

18
    <Button
19
        android:id="@+id/btn_click"
20
        android:layout_width="wrap_content"
21
        android:layout_height="wrap_content"
22
        android:layout_marginTop="16dp"
23
        android:text="点我" />
24

25
</LinearLayout>

2.2 Activity 代码#

1
package com.example.app
2

3
import android.os.Bundle
4
import android.widget.Button
5
import android.widget.TextView
6
import androidx.appcompat.app.AppCompatActivity
7

8
class MainActivity : AppCompatActivity() {
9
    override fun onCreate(savedInstanceState: Bundle?) {
10
        super.onCreate(savedInstanceState)
11
        setContentView(R.layout.activity_main)  // 加载布局
12

13
        val tvGreeting = findViewById<TextView>(R.id.tv_greeting)
14
        val btnClick = findViewById<Button>(R.id.btn_click)
15

16
        btnClick.setOnClickListener {
17
            tvGreeting.text = "你点了我！"
18
        }
19
    }
20
}

Note

R.layout.activity_main 对应 res/layout/activity_main.xml，R.id.tv_greeting 对应 XML 中的 android:id="@+id/tv_greeting"。Android 构建时自动为所有资源生成 R 类，方便在代码中引用。

3. 四大常用布局#

布局决定了子控件如何排列。以下是开发中最常用的四种。

3.1 LinearLayout（线性布局）#

子控件按水平或垂直方向依次排列。

1
<LinearLayout
2
    android:layout_width="match_parent"
3
    android:layout_height="wrap_content"
4
    android:orientation="vertical">
5

6
    <TextView android:text="第一行" />
7
    <TextView android:text="第二行" />
8
    <TextView android:text="第三行" />
9

10
</LinearLayout>

关键属性：

属性	说明
`android:orientation`	`vertical`（垂直）/ `horizontal`（水平）
`android:layout_weight`	按权重分配剩余空间
`android:gravity`	子控件在本控件内的对齐方式

3.2 RelativeLayout（相对布局）#

子控件相对于父容器或兄弟控件定位。

1
<RelativeLayout
2
    android:layout_width="match_parent"
3
    android:layout_height="match_parent">
4

5
    <Button
6
        android:id="@+id/btn_center"
7
        android:layout_width="wrap_content"
8
        android:layout_height="wrap_content"
9
        android:layout_centerInParent="true"
10
        android:text="居中" />
11

12
    <Button
13
        android:id="@+id/btn_below"
14
        android:layout_width="wrap_content"
15
        android:layout_height="wrap_content"
16
        android:layout_below="@id/btn_center"
17
        android:layout_centerHorizontal="true"
18
        android:layout_marginTop="8dp"
19
        android:text="在下面" />
20

21
</RelativeLayout>

常用定位属性：

相对于父容器	相对于兄弟控件
`layout_centerInParent`	`layout_below` / `layout_above`
`layout_centerHorizontal`	`layout_toLeftOf` / `layout_toRightOf`
`layout_alignParentBottom`	`layout_alignTop` / `layout_alignBottom`

3.3 FrameLayout（帧布局）#

子控件层叠放置，后添加的覆盖前面的。

1
<FrameLayout
2
    android:layout_width="200dp"
3
    android:layout_height="200dp">
4

5
    <ImageView
6
        android:layout_width="match_parent"
7
        android:layout_height="match_parent"
8
        android:src="@drawable/background" />
9

10
    <TextView
11
        android:layout_width="wrap_content"
12
        android:layout_height="wrap_content"
13
        android:layout_gravity="center"
14
        android:text="居中文字"
15
        android:textColor="#FFFFFF"
16
        android:textSize="20sp" />
17

18
</FrameLayout>

Note

FrameLayout 很简单，常用作占位容器（Fragment 容器）或层叠效果（图片上叠文字）。

3.4 ConstraintLayout（约束布局）⭐ 推荐#

Google 官方推荐的默认布局，通过约束关系定义控件位置，性能好、灵活度高。

1
<androidx.constraintlayout.widget.ConstraintLayout
2
    xmlns:app="http://schemas.android.com/apk/res-auto"
3
    android:layout_width="match_parent"
4
    android:layout_height="match_parent">
5

6
    <TextView
7
        android:id="@+id/tv_title"
8
        android:layout_width="wrap_content"
9
        android:layout_height="wrap_content"
10
        android:text="标题"
11
        android:textSize="20sp"
12
        app:layout_constraintTop_toTopOf="parent"
13
        app:layout_constraintStart_toStartOf="parent"
14
        app:layout_constraintEnd_toEndOf="parent"
15
        android:layout_marginTop="32dp" />
16

17
    <Button
18
        android:id="@+id/btn_action"
19
        android:layout_width="wrap_content"
20
        android:layout_height="wrap_content"
21
        android:text="操作"
22
        app:layout_constraintTop_toBottomOf="@id/tv_title"
23
        app:layout_constraintStart_toStartOf="parent"
24
        app:layout_constraintEnd_toEndOf="parent"
25
        android:layout_marginTop="16dp" />
26

27
</androidx.constraintlayout.widget.ConstraintLayout>

约束格式：app:layout_constraint[方向]_to[目标方向]Of="目标id或parent"

约束	含义
`Top_toTopOf="parent"`	顶上边对齐父容器上边
`Top_toBottomOf="@id/btn"`	顶上边对齐 btn 的下边
`Start_toEndOf="@id/btn"`	左边对齐 btn 的右边

5. 常用控件#

5.1 TextView（文本）#

1
<TextView
2
    android:id="@+id/tv_info"
3
    android:layout_width="wrap_content"
4
    android:layout_height="wrap_content"
5
    android:text="这是一段文本"
6
    android:textSize="16sp"
7
    android:textColor="#333333"
8
    android:textStyle="bold"
9
    android:maxLines="2"
10
    android:ellipsize="end"
11
    android:gravity="center" />

关键属性：

maxLines + ellipsize="end" → 超出两行显示 ...
textStyle → normal / bold / italic
gravity → 文字在控件内的对齐方式

5.2 Button（按钮）#

1
<Button
2
    android:id="@+id/btn_submit"
3
    android:layout_width="wrap_content"
4
    android:layout_height="wrap_content"
5
    android:text="提交"
6
    android:enabled="true" />

Kotlin 点击事件：

1
// 方式一：setOnClickListener
2
btnSubmit.setOnClickListener {
3
    // 点击处理
4
}
5

6
// 方式二：XML 中定义 onClick（不推荐）
7
// android:onClick="onSubmitClick"
8
// 然后在 Activity 中定义 fun onSubmitClick(view: View) {}

5.3 EditText（输入框）#

1
<EditText
2
    android:id="@+id/et_input"
3
    android:layout_width="match_parent"
4
    android:layout_height="wrap_content"
5
    android:hint="请输入内容"
6
    android:inputType="text"
7
    android:maxLength="100"
8
    android:padding="12dp" />

常用 inputType：

值	用途
`text`	普通文本
`textPassword`	密码
`number`	数字
`phone`	电话号码
`textEmailAddress`	邮箱
`textMultiLine`	多行文本

1
// 获取输入内容
2
val text = etInput.text.toString()

5.4 ImageView（图片）#

1
<ImageView
2
    android:id="@+id/iv_photo"
3
    android:layout_width="100dp"
4
    android:layout_height="100dp"
5
    android:src="@drawable/ic_launcher"
6
    android:scaleType="centerCrop"
7
    android:contentDescription="描述图片内容" />

常用 scaleType：

值	效果
`centerCrop`	等比缩放填满，裁剪多余
`fitCenter`	等比缩放完整显示，居中
`fitXY`	拉伸填满，不保持比例

5.5 RecyclerView（列表）⭐ 重要#

RecyclerView 是 Android 最强大的列表控件，替代了旧的 ListView。

三步使用 RecyclerView：

① 添加依赖（build.gradle.kts）：

1
dependencies {
2
    implementation("androidx.recyclerview:recyclerview:1.3.2")
3
}

② XML 布局：

1
<androidx.recyclerview.widget.RecyclerView
2
    android:id="@+id/rv_list"
3
    android:layout_width="match_parent"
4
    android:layout_height="match_parent" />

③ 编写 Adapter：

1
// 数据类
2
data class Item(val name: String, val desc: String)
3

4
// Adapter
5
class MyAdapter(
6
    private val items: List<Item>,
7
    private val onItemClick: (Item) -> Unit
8
) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
9

10
    // ViewHolder 持有每个 item 的控件引用
11
    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
12
        val tvName: TextView = view.findViewById(R.id.tv_name)
13
        val tvDesc: TextView = view.findViewById(R.id.tv_desc)
14
    }
15

16
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
17
        val view = LayoutInflater.from(parent.context)
18
            .inflate(R.layout.item_layout, parent, false)
19
        return ViewHolder(view)
20
    }
21

22
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
23
        val item = items[position]
24
        holder.tvName.text = item.name
25
        holder.tvDesc.text = item.desc
26
        holder.itemView.setOnClickListener { onItemClick(item) }
27
    }
28

29
    override fun getItemCount() = items.size
30
}

④ 在 Activity 中使用：

1
val recyclerView = findViewById<RecyclerView>(R.id.rv_list)
2
recyclerView.layoutManager = LinearLayoutManager(this)
3
recyclerView.adapter = MyAdapter(items) { item ->
4
    Toast.makeText(this, "点击了: ${item.name}", Toast.LENGTH_SHORT).show()
5
}

6. 尺寸单位详解#

单位	含义	使用场景
dp	密度无关像素	控件宽高、边距（推荐）
sp	缩放无关像素	文字大小（推荐）
px	物理像素	极少使用
pt	磅	极少使用

Important

始终用 dp 定义控件尺寸、用 sp 定义文字大小。这样在不同屏幕密度的设备上显示效果一致，且会响应用户的字体大小设置。

1
<!-- ✅ 正确 -->
2
<TextView
3
    android:layout_width="200dp"
4
    android:textSize="16sp" />
5

6
<!-- ❌ 错误 -->
7
<TextView
8
    android:layout_width="200px"
9
    android:textSize="16pt" />

7. 常用属性速查#

7.1 通用属性（所有 View 都有）#

属性	说明
`android:id="@+id/xxx"`	唯一标识
`android:layout_width`	`match_parent` / `wrap_content` / 具体值
`android:layout_height`	同上
`android:layout_margin`	外边距
`android:padding`	内边距
`android:background`	背景色或背景图
`android:visibility`	`visible` / `invisible` / `gone`
`android:alpha`	透明度（0.0 ~ 1.0）

7.2 layout_width / layout_height 值#

值	含义
`match_parent`	填满父容器
`wrap_content`	包裹内容
`0dp`	在 ConstraintLayout 中表示”按约束决定”

8. 事件处理#

8.1 点击事件#

1
btn.setOnClickListener {
2
    Toast.makeText(this, "点击了", Toast.LENGTH_SHORT).show()
3
}

8.2 长按事件#

1
btn.setOnLongClickListener {
2
    Toast.makeText(this, "长按了", Toast.LENGTH_SHORT).show()
3
    true  // 返回 true 表示已处理，不再传递
4
}

8.3 触摸事件#

1
view.setOnTouchListener { _, event ->
2
    when (event.action) {
3
        MotionEvent.ACTION_DOWN -> { /* 按下 */ }
4
        MotionEvent.ACTION_MOVE -> { /* 移动 */ }
5
        MotionEvent.ACTION_UP -> { /* 抬起 */ }
6
    }
7
    true
8
}

9. ViewBinding（告别 findViewById）#

findViewById 繁琐且类型不安全。推荐使用 ViewBinding：

启用 ViewBinding（build.gradle.kts）：

1
android {
2
    buildFeatures {
3
        viewBinding = true
4
    }
5
}

使用：

1
class MainActivity : AppCompatActivity() {
2
    private lateinit var binding: ActivityMainBinding
3

4
    override fun onCreate(savedInstanceState: Bundle?) {
5
        super.onCreate(savedInstanceState)
6
        binding = ActivityMainBinding.inflate(layoutInflater)
7
        setContentView(binding.root)
8

9
        // 直接通过 binding 访问控件，无需 findViewById
10
        binding.btnClick.setOnClickListener {
11
            binding.tvGreeting.text = "你点了我！"
12
        }
13
    }
14
}

activity_main.xml 自动生成 ActivityMainBinding 类，XML 中的 @+id/btn_click 对应 binding.btnClick。

10. Jetpack Compose 简介（展望）#

Jetpack Compose 是 Google 推出的现代声明式 UI 框架，用 Kotlin 代码直接写 UI，不再需要 XML：

1
@Composable
2
fun Greeting(name: String) {
3
    Column(
4
        modifier = Modifier
5
            .fillMaxSize()
6
            .padding(16.dp),
7
        verticalArrangement = Arrangement.Center,
8
        horizontalAlignment = Alignment.CenterHorizontally
9
    ) {
10
        Text(
11
            text = "Hello, $name!",
12
            fontSize = 24.sp,
13
            color = Color(0xFF333333)
14
        )
15
        Button(onClick = { /* 处理点击 */ }) {
16
            Text("点我")
17
        }
18
    }
19
}

Note

Compose 是新项目的推荐选择，但传统 XML + View 系统仍然大量存在于现有项目中。建议两者都学：XML 方式帮助理解 Android 的 View 体系，Compose 则面向未来。

11. 总结#

内容	要点
布局文件	`res/layout/*.xml`
代码	`Activity` 中 `setContentView` + 事件绑定
推荐布局	`ConstraintLayout`（灵活高效）
必修控件	TextView、Button、EditText、ImageView、RecyclerView
尺寸单位	宽高用 `dp`，文字用 `sp`
推荐 IDE	Android Studio
推荐语言	Kotlin
未来方向	Jetpack Compose 声明式 UI

学习路线建议：

先手写几个 XML 布局，理解布局嵌套关系
掌握 LinearLayout 和 ConstraintLayout
学习 RecyclerView（列表是 App 的灵魂）
尝试做一个简单的小 App（比如：记事本、计数器）
进阶学习 Jetpack Compose

音乐

音乐

前言#

1. UI 文件在哪里？#

2. 你的第一个界面#

2.1 XML 布局#

2.2 Activity 代码#

3. 四大常用布局#

3.1 LinearLayout（线性布局）#

3.2 RelativeLayout（相对布局）#

3.3 FrameLayout（帧布局）#

3.4 ConstraintLayout（约束布局）⭐ 推荐#

5. 常用控件#

5.1 TextView（文本）#

5.2 Button（按钮）#

5.3 EditText（输入框）#

5.4 ImageView（图片）#

5.5 RecyclerView（列表）⭐ 重要#

6. 尺寸单位详解#

7. 常用属性速查#

7.1 通用属性（所有 View 都有）#

7.2 layout_width / layout_height 值#

8. 事件处理#

8.1 点击事件#

8.2 长按事件#

8.3 触摸事件#

9. ViewBinding（告别 findViewById）#

10. Jetpack Compose 简介（展望）#

11. 总结#

参考资料#

文章分享

评论区