布局与视图
使用 XML 布局设计用户界面。使用 ConstraintLayout、LinearLayout 以及 TextView、Button、ImageView 和 EditText 等常见视图。
布局与视图 是 CoddyKit 上的免费 Android Academy 课时。 这是第 3 节课，共 7 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Android Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 7 节课。
使用 XML 构建界面
Android 界面定义在存储于 res/layout/ 中的 XML 布局文件里。布局描述了屏幕的结构和外观——显示哪些视图，以及它们位于何处。
然后，您的 Kotlin 代码会在运行时加载此布局，并与其中的视图进行交互。
常见视图类型
最常用的 View 组件：
TextView— 显示文本EditText— 文本输入框Button— 可点击的按钮ImageView— 显示图像CheckBox— 开关选项Switch— 开关切换（Material）
ConstraintLayout
ConstraintLayout 是大多数屏幕推荐使用的布局。您可以使用约束，让视图相对于其他视图或父视图进行定位，就像连接锚点一样。
- 层级扁平——无需嵌套布局
- 灵活——可以适应各种屏幕尺寸
- 新建 Android Studio 项目时默认使用
ConstraintLayout XML
在 ConstraintLayout 中将 TextView 居中显示：
<!-- res/layout/activity_main.xml -->
<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">
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Android!"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>LinearLayout
LinearLayout 将视图排列成单行或单列：
android:orientation="vertical"— 将视图从上到下堆叠android:orientation="horizontal"— 将视图并排排列android:layout_weight— 按比例分配剩余空间
它简单且易于预测，但应避免过深的嵌套。
关键布局属性
每个 View 都有以下必要属性：
layout_width/layout_height：match_parent、wrap_content或固定的 dp 值id：用于在 Kotlin 中引用该视图margin：视图外部的间距padding：视图内部的间距
尺寸使用 dp（与密度无关的像素），文本大小使用 sp。
ScrollView
当内容高度超过屏幕时，请将其放在 ScrollView 中：
- 只能包含一个直接子视图（通常是 LinearLayout）
- 默认支持垂直滚动
- 需要水平滚动时使用
HorizontalScrollView
对于较长的动态列表，请改用 RecyclerView——它的效率更高。
在代码中查找视图
在 Kotlin 代码中访问视图有两种方式：
findViewById(R.id.tvTitle)— 经典方式，根据 ID 返回视图- ViewBinding — 现代方式：根据 XML 生成绑定类，以类型安全的方式访问所有视图
强烈建议使用 ViewBinding——您将在下一课学习它。
使用 findViewById
在 onCreate 中访问并修改视图：
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val tvTitle = findViewById<TextView>(R.id.tvTitle)
tvTitle.text = "Welcome!"
tvTitle.textSize = 20f
}
}快速检查
在 Android 布局中，文本大小应使用哪种单位？
回顾：布局与视图
现在您已经可以设计 Android 屏幕：
- 界面定义在
res/layout/中的 XML 布局文件里 - 常见视图：TextView、EditText、Button、ImageView
- ConstraintLayout — 灵活、层级扁平，推荐使用
- LinearLayout — 简单的行列排列
- 尺寸使用
dp，文本使用sp - 使用
findViewById在 Kotlin 中访问视图
下一步：处理用户输入，让界面具有交互性。
常见问题解答
「布局与视图」课时是免费的吗？
是的 — 「布局与视图」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Android Academy 课程的其余内容，请升级到 CoddyKit PRO。 Android Academy 课程共包含 7 节课。
「布局与视图」这节课中我会学到什么？
使用 XML 布局设计用户界面。使用 ConstraintLayout、LinearLayout 以及 TextView、Button、ImageView 和 EditText 等常见视图。 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Android Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 7 节。
「布局与视图」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Android Academy 课中编写并运行代码吗？
能。每节 Android Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。