前言

近日谷歌官方明确表态：Android 17 将停止对 XML 布局的新增功能支持，2026 年正式进入 XML 布局 “终结年”，Jetpack Compose 从 “可选 UI 方案” 升级为 “强制标准”。对于安卓开发者而言，掌握 Compose 并完成从 XML 到 Compose 的迁移，已不再是 “加分项”，而是必备技能。

本文将从实际开发场景出发，详细讲解 XML 布局迁移到 Jetpack Compose 的完整流程、核心技巧，并通过代码对比、实战案例帮你快速上手，同时分享 Compose 开发的最佳实践，助力你顺利完成技术转型。

一、XML 与 Compose 核心差异对比

在开始迁移前，我们先明确两者的核心差异，这是理解迁移逻辑的关键：

特性	XML 布局	Jetpack Compose
开发模式	声明式（静态），需手动绑定控件	声明式（动态），数据驱动 UI
代码结构	布局与逻辑分离（XML+Kotlin/Java）	布局与逻辑统一（纯 Kotlin）
预览方式	静态预览，需手动刷新	实时预览，支持参数化预览
性能表现	布局解析耗时，存在视图层级冗余	重组机制高效，减少层级冗余
扩展能力	自定义 View 成本高	自定义 Composable 组件简单灵活

可视化对比（图文示例）

1. XML 布局实现（简单登录项）

布局文件：activity_login.xml

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="用户登录"
        android:textSize="24sp"
        android:textColor="#333333"
        android:layout_marginBottom="30dp"/>

    <EditText
        android:id="@+id/et_username"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:hint="请输入用户名"
        android:paddingHorizontal="15dp"
        android:background="@drawable/bg_edittext"
        android:layout_marginBottom="20dp"/>

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:hint="请输入密码"
        android:inputType="textPassword"
        android:paddingHorizontal="15dp"
        android:background="@drawable/bg_edittext"
        android:layout_marginBottom="30dp"/>

    <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="登录"
        android:textColor="#FFFFFF"
        android:background="@drawable/bg_button"
        android:textSize="18sp"/>

</LinearLayout>

2. Compose 实现（相同登录项）

Composable 函数：LoginScreen

kotlin

@Composable
fun LoginScreen() {
    // 垂直布局（对应XML的LinearLayout垂直方向）
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(20.dp),
        verticalArrangement = Arrangement.Top
    ) {
        // 标题文本（对应XML的TextView）
        Text(
            text = "用户登录",
            fontSize = 24.sp,
            color = Color(0xFF333333),
            modifier = Modifier.padding(bottom = 30.dp)
        )

        // 用户名输入框（对应XML的EditText）
        OutlinedTextField(
            value = "", // 后续绑定状态
            onValueChange = {}, // 后续绑定状态回调
            label = { Text("请输入用户名") },
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp)
                .padding(bottom = 20.dp),
            shape = RoundedCornerShape(8.dp),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = Color(0xFF6200EE),
                unfocusedBorderColor = Color(0xFFEEEEEE)
            )
        )

        // 密码输入框（对应XML的EditText）
        OutlinedTextField(
            value = "", // 后续绑定状态
            onValueChange = {}, // 后续绑定状态回调
            label = { Text("请输入密码") },
            visualTransformation = PasswordVisualTransformation(), // 密码隐藏
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp)
                .padding(bottom = 30.dp),
            shape = RoundedCornerShape(8.dp),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = Color(0xFF6200EE),
                unfocusedBorderColor = Color(0xFFEEEEEE)
            )
        )

        // 登录按钮（对应XML的Button）
        Button(
            onClick = {}, // 后续绑定点击事件
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp),
            colors = ButtonDefaults.buttonColors(
                containerColor = Color(0xFF6200EE)
            ),
            shape = RoundedCornerShape(8.dp)
        ) {
            Text(
                text = "登录",
                color = Color.White,
                fontSize = 18.sp
            )
        }
    }
}

// 预览函数（实时预览UI效果）
@Preview(showBackground = true, device = "id/pixel_7")
@Composable
fun LoginScreenPreview() {
    LoginScreen()
}

二、从 XML 迁移到 Compose 的核心步骤

步骤 1：环境准备（配置 Compose 依赖）

首先在项目中启用 Compose，修改 build.gradle 配置：

1. 项目根目录 build.gradle（无需修改，默认支持）

gradle

buildscript {
    ext {
        compose_version = "1.6.0" // 推荐使用稳定版
    }
}

2. 模块目录 build.gradle（app 模块）

gradle

android {
    compileSdk 35 // 适配Android 16+

    defaultConfig {
        applicationId "com.example.composemigration"
        minSdk 24 // Compose最低支持minSdk 21
        targetSdk 35
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildFeatures {
        compose true // 启用Compose功能
    }

    composeOptions {
        kotlinCompilerExtensionVersion compose_version // 与Compose版本对应
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }
}

dependencies {
    // Compose 核心依赖
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

    // Compose 活动依赖（用于承载Compose UI）
    implementation 'androidx.activity:activity-compose:1.8.0'
}

步骤 2：页面迁移（从 Activity/Fragment 到 Compose）

场景 1：XML Activity 迁移为 Compose Activity

原 XML Activity：LoginActivity.kt

kotlin

class LoginActivity : AppCompatActivity() {
    private lateinit var etUsername: EditText
    private lateinit var etPassword: EditText
    private lateinit var btnLogin: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)

        // 绑定控件
        etUsername = findViewById(R.id.et_username)
        etPassword = findViewById(R.id.et_password)
        btnLogin = findViewById(R.id.btn_login)

        // 设置点击事件
        btnLogin.setOnClickListener {
            val username = etUsername.text.toString()
            val password = etPassword.text.toString()
            // 登录逻辑处理
            Toast.makeText(this, "用户名：$username，密码：$password", Toast.LENGTH_SHORT).show()
        }
    }
}

迁移后 Compose Activity：ComposeLoginActivity.kt

kotlin

class ComposeLoginActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 设置Compose内容
        setContent {
            // 应用主题（可自定义）
            ComposeMigrationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    // 加载Compose登录界面
                    LoginScreenWithLogic()
                }
            }
        }
    }
}

// 带业务逻辑的登录界面
@Composable
fun LoginScreenWithLogic() {
    // 状态管理：用户名（对应XML的EditText文本）
    var username by remember { mutableStateOf("") }
    // 状态管理：密码
    var password by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(20.dp),
        verticalArrangement = Arrangement.Top
    ) {
        Text(
            text = "用户登录",
            fontSize = 24.sp,
            color = Color(0xFF333333),
            modifier = Modifier.padding(bottom = 30.dp)
        )

        OutlinedTextField(
            value = username,
            onValueChange = { username = it }, // 文本变化回调，更新状态
            label = { Text("请输入用户名") },
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp)
                .padding(bottom = 20.dp),
            shape = RoundedCornerShape(8.dp),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = Color(0xFF6200EE),
                unfocusedBorderColor = Color(0xFFEEEEEE)
            )
        )

        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("请输入密码") },
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp)
                .padding(bottom = 30.dp),
            shape = RoundedCornerShape(8.dp),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = Color(0xFF6200EE),
                unfocusedBorderColor = Color(0xFFEEEEEE)
            )
        )

        Button(
            onClick = {
                // 登录逻辑处理
                Toast.makeText(
                    LocalContext.current,
                    "用户名：$username，密码：$password",
                    Toast.LENGTH_SHORT
                ).show()
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp),
            colors = ButtonDefaults.buttonColors(
                containerColor = Color(0xFF6200EE)
            ),
            shape = RoundedCornerShape(8.dp)
        ) {
            Text(
                text = "登录",
                color = Color.White,
                fontSize = 18.sp
            )
        }
    }
}

// 自定义主题（默认生成，可修改）
private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40
)

@Composable
fun ComposeMigrationTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

// 字体样式配置
private val Typography = Typography(
    bodyLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp
    )
)

场景 2：复杂布局迁移（RecyclerView → LazyColumn）

XML 中常用 RecyclerView 实现列表，Compose 中对应 LazyColumn（垂直列表）/LazyRow（水平列表），迁移更简洁：

1. XML 列表实现（RecyclerView）

• 布局文件：item_user.xml（列表项）
• 适配器：UserAdapter.kt
• 主布局：activity_user_list.xml（包含 RecyclerView）

2. Compose 列表实现（LazyColumn）

kotlin

// 数据实体类
data class User(val id: Int, val name: String, val age: Int)

@Composable
fun UserListScreen() {
    // 模拟列表数据
    val userList = remember {
        mutableStateListOf(
            User(1, "张三", 25),
            User(2, "李四", 28),
            User(3, "王五", 30),
            User(4, "赵六", 22),
            User(5, "孙七", 35)
        )
    }

    // 垂直滚动列表（对应RecyclerView）
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .padding(10.dp),
        verticalArrangement = Arrangement.spacedBy(10.dp) // 列表项间距
    ) {
        // 遍历数据生成列表项
        items(userList) { user ->
            // 列表项布局（对应item_user.xml）
            UserItem(user = user)
        }
    }
}

// 列表项Composable
@Composable
fun UserItem(user: User) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .height(80.dp),
        elevation = CardDefaults.cardElevation(4.dp),
        shape = RoundedCornerShape(8.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxSize()
                .padding(15.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Column {
                Text(
                    text = user.name,
                    fontSize = 18.sp,
                    color = Color(0xFF333333)
                )
                Text(
                    text = "年龄：${user.age}岁",
                    fontSize = 14.sp,
                    color = Color(0xFF999999),
                    modifier = Modifier.padding(top = 5.dp)
                )
            }
            Text(
                text = "ID：${user.id}",
                fontSize = 16.sp,
                color = Color(0xFF6200EE)
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun UserListScreenPreview() {
    ComposeMigrationTheme {
        UserListScreen()
    }
}

步骤 3：资源与样式迁移

1. 布局属性迁移对应表

XML 布局属性	Compose 对应 API
match_parent	Modifier.fillMaxWidth()/fillMaxHeight()/fillMaxSize()
wrap_content	Modifier.wrapContentWidth()/wrapContentHeight()
padding	Modifier.padding()
margin	Modifier.padding()（Compose 无 margin，用 padding 替代）
background	Modifier.background()
orientation="vertical"	Column()
orientation="horizontal"	Row()
gravity	Column/Row 的 horizontalAlignment/verticalAlignment

2. 样式迁移（自定义主题 / 控件样式）

XML 中通过 style.xml 定义样式，Compose 中通过 MaterialTheme 或自定义样式函数实现：

kotlin

// 自定义按钮样式
@Composable
fun CustomButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Button(
        onClick = onClick,
        modifier = modifier
            .height(50.dp)
            .fillMaxWidth(),
        colors = ButtonDefaults.buttonColors(
            containerColor = Color(0xFF6200EE),
            contentColor = Color.White,
            disabledContainerColor = Color(0xFFCCCCCC),
            disabledContentColor = Color(0xFF999999)
        ),
        shape = RoundedCornerShape(12.dp),
        elevation = ButtonDefaults.buttonElevation(
            defaultElevation = 6.dp,
            pressedElevation = 2.dp
        )
    ) {
        Text(
            text = text,
            fontSize = 18.sp,
            fontWeight = FontWeight.Medium
        )
    }
}

// 使用自定义按钮
@Composable
fun UseCustomButton() {
    Column(modifier = Modifier.padding(20.dp)) {
        CustomButton(text = "自定义按钮1", onClick = {})
        CustomButton(text = "自定义按钮2", onClick = {}, modifier = Modifier.padding(top = 10.dp))
    }
}

三、Compose 开发最佳实践（避坑指南）

1. 状态管理最佳实践

• 优先使用 remember 保存临时状态，mutableStateOf 实现可观察状态
• 复杂状态使用 ViewModel + StateFlow 管理，避免状态丢失
• 避免在 Composable 函数中创建可变对象（如 ArrayList），应使用 remember { mutableStateListOf() }

kotlin

// 错误示例：每次重组都会创建新的List
@Composable
fun BadStateExample() {
    val userList = ArrayList<User>() // 错误：重组时会重新初始化
    // ...
}

// 正确示例：使用remember保存状态
@Composable
fun GoodStateExample() {
    val userList = remember { mutableStateListOf<User>() } // 正确：跨重组保存状态
    // ...
}

2. 重组优化技巧

• 减少重组范围：使用 remember 缓存计算结果，derivedStateOf 优化依赖状态
• 避免在 Composable 函数参数中传递匿名函数、Lambda 表达式（每次重组都会创建新实例）
• 使用 Modifier 链式调用，避免重复创建 Modifier 实例

kotlin

// 重组优化示例：derivedStateOf 优化列表过滤
@Composable
fun OptimizeRecomposition() {
    val userList = remember {
        mutableStateListOf(
            User(1, "张三", 25),
            User(2, "李四", 28),
            User(3, "王五", 30)
        )
    }
    val minAge = remember { mutableStateOf(26) }

    // 仅当minAge或userList变化时，才重新计算过滤结果
    val filteredUserList by remember {
        derivedStateOf {
            userList.filter { it.age >= minAge.value }
        }
    }

    LazyColumn {
        items(filteredUserList) { user ->
            UserItem(user = user)
        }
    }
}

3. 性能优化要点

• 图片加载：使用 Coil 或 Glide 的 Compose 扩展库（coil-compose），避免手动处理图片加载
• 避免过度绘制：减少不必要的 background 嵌套，使用 Modifier.clip() 替代手动裁剪
• 大屏适配：结合 WindowSizeClass 实现多设备自适应布局

kotlin

// Coil 加载图片示例
@Composable
fun LoadImageWithCoil() {
    AsyncImage(
        model = "https://img-blog.csdnimg.cn/logo.png",
        contentDescription = "CSDN Logo",
        modifier = Modifier
            .size(100.dp)
            .clip(RoundedCornerShape(8.dp)),
        contentScale = ContentScale.Crop,
        placeholder = painterResource(R.drawable.placeholder),
        error = painterResource(R.drawable.error)
    )
}

四、总结

随着 Android 17 停止 XML 新增功能支持、2026 年 XML 正式 “退场”，Jetpack Compose 已成为安卓开发的未来趋势。本文通过 XML 与 Compose 的对比、完整迁移步骤、实战代码示例，详细讲解了从 XML 布局迁移到 Compose 的核心技巧，同时分享了 Compose 状态管理、重组优化等最佳实践。

相较于 XML 布局，Compose 具有 “代码更简洁、开发效率更高、性能更优秀” 的优势，掌握 Compose 不仅能应对未来的开发要求，更能大幅提升你的开发效率。建议大家从简单页面入手，逐步迁移复杂布局，最终完成全面转型。