Back to Details

ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Design Skill

UI设计技能

Quick Start

快速入门

ConstraintLayout

ConstraintLayout

xml
<androidx.constraintlayout.widget.ConstraintLayout>
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
xml
<androidx.constraintlayout.widget.ConstraintLayout>
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Jetpack Compose

Jetpack Compose

kotlin
Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
    Text("Hello Compose", fontSize = 20.sp)
    Button(onClick = { }) { Text("Click Me") }
}
kotlin
Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
    Text("Hello Compose", fontSize = 20.sp)
    Button(onClick = { }) { Text("Click Me") }
}

Material Design 3

Material Design 3

kotlin
Scaffold(
    topBar = { TopAppBar(title = { Text("MyApp") }) }
) { padding ->
    // Content
}
kotlin
Scaffold(
    topBar = { TopAppBar(title = { Text("MyApp") }) }
) { padding ->
    // Content
}

Key Concepts

核心概念

Constraint Types

约束类型

  • Start/End, Top/Bottom
  • Chains (spread, packed)
  • Guidelines
  • Barriers
  • Bias
  • Start/End、Top/Bottom
  • Chains（spread、packed）
  • Guidelines
  • Barriers
  • Bias

Compose State

Compose状态

kotlin
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) { Text("Count: $count") }
kotlin
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) { Text("Count: $count") }

Material Components

Material组件

  • Buttons (filled, outlined, text)
  • Cards, FABs, Dialogs
  • Navigation patterns
  • Theme system
  • 按钮（filled、outlined、text）
  • 卡片、FAB、对话框
  • 导航模式
  • 主题系统

Best Practices

最佳实践

✅ Use ConstraintLayout for efficiency ✅ Implement Material Design ✅ Test on multiple screen sizes ✅ Optimize rendering performance ✅ Support accessibility
✅ 使用ConstraintLayout提升效率 ✅ 遵循Material Design规范 ✅ 在多种屏幕尺寸上测试 ✅ 优化渲染性能 ✅ 支持无障碍访问

Resources

资源