Android开发实战班 - 现代 UI 开发之自定义 Compose 组件

Jetpack Compose 不仅提供了丰富的内置组件，还允许开发者根据项目需求创建自定义组件。自定义 Compose 组件可以提高代码复用性、简化 UI 逻辑，并使应用界面更加一致和模块化。本章节将介绍如何创建自定义 Compose 组件，包括组件的创建、样式定制、状态管理以及在项目中的应用。

为什么需要自定义 Compose 组件

代码复用:
- 通过创建自定义组件，可以将常用的 UI 逻辑封装起来，避免重复代码，提高代码复用性。
简化 UI 逻辑:
- 将复杂的 UI 逻辑封装到自定义组件中，可以简化调用代码，使代码更简洁易懂。
一致性:
- 自定义组件可以保证应用界面的一致性，例如统一的按钮样式、输入框样式等。
模块化:
- 自定义组件可以将 UI 拆分成更小的模块，便于维护和测试。

创建自定义 Compose 组件

创建自定义 Compose 组件非常简单，只需定义一个带有 @Composable 注解的函数即可。以下是一个简单的自定义按钮组件示例：

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp@Composable
fun MyButton(text: String,onClick: () -> Unit,modifier: Modifier = Modifier,backgroundColor: Color = MaterialTheme.colorScheme.primary,contentColor: Color = MaterialTheme.colorScheme.onPrimary
) {Text(text = text,modifier = modifier.clip(RoundedCornerShape(8.dp)).background(backgroundColor).clickable { onClick() }.padding(vertical = 12.dp, horizontal = 16.dp),color = contentColor,style = MaterialTheme.typography.labelLarge)
}

参数说明:
- text: 按钮显示的文本。
- onClick: 按钮点击事件回调。
- modifier: 修饰符，用于自定义按钮的布局和样式。
- backgroundColor: 按钮背景颜色，默认为主题主色。
- contentColor: 按钮文本颜色，默认为主题主色文本颜色。

使用自定义按钮:

MyButton(text = "Click Me",onClick = { /* 处理点击事件 */ },modifier = Modifier.align(Alignment.Center)
)

样式定制

自定义 Compose 组件可以通过参数传递样式，例如颜色、字体、形状等，从而实现样式的定制。

颜色定制:

可以通过参数传递不同的颜色值来定制组件的颜色。

MyButton(text = "Red Button",onClick = { /* 处理点击事件 */ },backgroundColor = Color.Red,contentColor = Color.White
)

字体和排版:

可以通过 MaterialTheme.typography 来定制组件的字体和排版。

MyButton(text = "Large Button",onClick = { /* 处理点击事件 */ },modifier = Modifier.padding(16.dp),style = MaterialTheme.typography.headlineMedium
)

形状定制:

可以通过 clip() 和 RoundedCornerShape 等函数来定制组件的形状。

MyButton(text = "Rounded Button",onClick = { /* 处理点击事件 */ },modifier = Modifier.clip(RoundedCornerShape(16.dp))
)

状态管理

自定义 Compose 组件可以管理自己的状态，例如按钮的选中状态、输入框的内容等。

按钮选中状态:

@Composable
fun ToggleButton(text: String,isSelected: Boolean,onToggle: (Boolean) -> Unit,modifier: Modifier = Modifier
) {val backgroundColor = if (isSelected) MaterialTheme.colorScheme.primary else Color.Grayval contentColor = if (isSelected) MaterialTheme.colorScheme.onPrimary else Color.WhiteText(text = text,modifier = modifier.clip(RoundedCornerShape(8.dp)).background(backgroundColor).clickable { onToggle(!isSelected) }.padding(vertical = 12.dp, horizontal = 16.dp),color = contentColor,style = MaterialTheme.typography.labelLarge)
}// 使用 ToggleButton
var isButtonSelected by remember { mutableStateOf(false) }ToggleButton(text = "Toggle Me",isSelected = isButtonSelected,onToggle = { isButtonSelected = it }
)

输入框内容状态:

@Composable
fun MyTextField(value: String,onValueChange: (String) -> Unit,modifier: Modifier = Modifier,label: String = ""
) {TextField(value = value,onValueChange = onValueChange,label = { Text(text = label) },modifier = modifier,colors = TextFieldDefaults.textFieldColors(containerColor = MaterialTheme.colorScheme.secondaryContainer,textColor = MaterialTheme.colorScheme.onSecondaryContainer,placeholderColor = MaterialTheme.colorScheme.onSecondaryContainer.copy(alpha = 0.5f)))
}// 使用 MyTextField
var text by remember { mutableStateOf("") }MyTextField(value = text,onValueChange = { text = it },label = "Enter text"
)

实战案例

案例一：自定义导航栏组件

创建一个自定义导航栏组件，包含多个导航项。
使用 Row 和 Button 组件实现导航栏布局。
通过参数传递导航项列表和点击事件回调。

@Composable
fun MyNavigationBar(items: List<String>,onItemClick: (String) -> Unit,modifier: Modifier = Modifier
) {Row(modifier = modifier) {items.forEach { item ->MyButton(text = item,onClick = { onItemClick(item) },modifier = Modifier.weight(1f))}}
}// 使用 MyNavigationBar
val navigationItems = listOf("Home", "Settings", "Profile")
var selectedItem by remember { mutableStateOf("Home") }MyNavigationBar(items = navigationItems,onItemClick = { selectedItem = it }
)

自定义卡片组件

创建一个自定义卡片组件，包含标题、内容和按钮。
使用 Card, Column, Text, Button 等组件实现卡片布局。
通过参数传递标题、内容和按钮文本。

@Composable
fun MyCard(title: String,content: String,buttonText: String,onButtonClick: () -> Unit,modifier: Modifier = Modifier
) {Card(modifier = modifier,elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),shape = RoundedCornerShape(8.dp)) {Column(modifier = Modifier.padding(16.dp)) {Text(text = title,style = MaterialTheme.typography.titleMedium,modifier = Modifier.padding(bottom = 8.dp))Text(text = content,style = MaterialTheme.typography.bodyMedium,modifier = Modifier.padding(bottom = 12.dp))MyButton(text = buttonText,onClick = onButtonClick)}}
}// 使用 MyCard
MyCard(title = "Welcome",content = "Thank you for using our app!",buttonText = "OK",onButtonClick = { /* 处理按钮点击事件 */ }
)

课后作业

任务一：创建一个自定义按钮组件
- 定义一个自定义按钮组件 MyButton，包含文本、点击事件、颜色、字体等参数。
- 使用 Modifier 和 Compose 布局组件实现按钮布局。
- 在应用中调用 MyButton 组件，并传递不同的参数。
任务二：创建一个自定义卡片组件
- 定义一个自定义卡片组件 MyCard，包含标题、内容、按钮文本和点击事件等参数。
- 使用 Card, Column, Text, Button 等组件实现卡片布局。
- 在应用中调用 MyCard 组件，并传递不同的参数。
任务三：实现一个自定义导航栏组件
- 定义一个自定义导航栏组件 MyNavigationBar，包含导航项列表和点击事件回调。
- 使用 Row 和 MyButton 组件实现导航栏布局。
- 在应用中调用 MyNavigationBar 组件，并传递导航项列表和点击事件回调。