UI 开发 - 从 HTML/CSS 到 Android 布局

第三章：UI 开发 - 从 HTML/CSS 到 Android 布局

XML 布局系统基础

对于熟悉 HTML/CSS 的前端开发者来说，Android 的 XML 布局系统也是一种标记语言，概念相通。让我们看一个简单的对比：

<!-- Android Layout -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android" />
        
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />
</LinearLayout>

等同于 HTML 中的：

<div style="display: flex; flex-direction: column;">
    <span>Hello Android</span>
    <button>Click Me</button>
</div>

Android 常用控件

基础控件对比

Android 控件	HTML 元素	说明
TextView	<span>, <p>	文本显示
EditText	<input>	文本输入
Button	<button>	按钮
ImageView	<img>	图片显示
CheckBox	<input type="checkbox">	复选框
RadioButton	<input type="radio">	单选按钮

示例代码

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:orientation="vertical">

    <EditText
        android:id="@+id/nameInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入用户名" />

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="8dp"
        android:src="@drawable/avatar" />

    <CheckBox
        android:id="@+id/rememberMe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="记住我" />
</LinearLayout>

布局管理

LinearLayout（类似 Flexbox）

<!-- 垂直布局 -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <!-- 子元素 -->
</LinearLayout>

<!-- 水平布局 -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <!-- 子元素 -->
</LinearLayout>

RelativeLayout（类似 CSS 相对定位）

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <Button
        android:id="@+id/centerButton"
        android:layout_centerInParent="true"
        android:text="居中按钮" />
        
    <TextView
        android:layout_below="@id/centerButton"
        android:layout_centerHorizontal="true"
        android:text="下方文本" />
</RelativeLayout>

ConstraintLayout 详解

ConstraintLayout 是 Android 现代布局的首选，类似于 CSS Grid 和 Flexbox 的组合。

基本约束示例

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="按钮" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/button"
        app:layout_constraintTop_toTopOf="@id/button"
        android:text="文本" />
</androidx.constraintlayout.widget.ConstraintLayout>

常用约束属性

• layout_constraintStart_toStartOf - 开始边对齐
• layout_constraintEnd_toEndOf - 结束边对齐
• layout_constraintTop_toTopOf - 顶部对齐
• layout_constraintBottom_toBottomOf - 底部对齐
• layout_constraintCenterHorizontally - 水平居中
• layout_constraintCenterVertically - 垂直居中

ConstraintLayout 的强大之处在于它可以创建复杂的响应式布局，同时保持扁平的视图层级，提高性能。这就是为什么它被推荐用作主要布局容器的原因。

在下一章中，我们将深入探讨如何在 Android 中处理样式和主题，这与 Web 开发中的 CSS 有许多相似之处。