Для реализации подсистемы с нижним меню в соответствии, нам необходимо создать главный экран, который отслеживает состояние выбранной вкладки и динамически меняет текст в «синей карточке».
Ниже представлен пошаговый план реализации на Jetpack Compose.
1. Определение структуры данных
Создадим запечатанный класс (sealed class) для описания пунктов меню. Это позволит нам удобно хранить названия, иконки и формировать приветственный текст.
sealed class BottomNavItem(val title: String, val icon: ImageVector) {
object Home : BottomNavItem("Home", Icons.Default.Home)
object Wallet : BottomNavItem("Wallet", Icons.Default.AccountBalanceWallet)
object Track : BottomNavItem("Track", Icons.Default.LocalShipping)
object Profile : BottomNavItem("Profile", Icons.Default.Person)
}
2. Логика изменения текста
Мы будем использовать переменную состояния selectedItem, чтобы Compose автоматически перерисовывал нужную часть экрана при смене вкладки.
3. Реализация главного экрана
Основной компонент Scaffold идеально подходит для создания интерфейса с bottomBar.
@Composable
fun MainScreen() {
// Состояние текущей выбранной вкладки
var selectedItem by remember { mutableStateOf<BottomNavItem>(BottomNavItem.Home) }
Scaffold(
bottomBar = {
NavigationBar(containerColor = Color.White) {
val items = listOf(
BottomNavItem.Home,
BottomNavItem.Wallet,
BottomNavItem.Track,
BottomNavItem.Profile
)
items.forEach { item ->
NavigationBarItem(
icon = { Icon(item.icon, contentDescription = item.title) },
label = { Text(item.title) },
selected = selectedItem == item,
onClick = { selectedItem = item },
colors = NavigationBarItemDefaults.colors(
selectedIconColor = Color(0xFF0056D2), // Синий цвет из макета
selectedTextColor = Color(0xFF0056D2),
indicatorColor = Color.Transparent // Убираем стандартный фон выделения
)
)
}
}
}
) { paddingValues ->
Column(
modifier = Modifier
.fillMaxSize()
.padding(paddingValues)
.padding(16.dp)
) {
// Синяя карточка приветствия из макета
HeaderCard(currentTabName = selectedItem.title)
}
}
}
```
4. Создание компонента «HeaderCard»
Этот компонент отвечает за визуализацию верхней части приложения, включая аватар, имя пользователя и динамический текст приветствия.
@Composable
fun HeaderCard(currentTabName: String) {
Card(
modifier = Modifier
.fillMaxWidth()
.height(110.dp),
shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors(containerColor = Color(0xFF0066FF)) // Ярко-синий цвет
) {
Row(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
// Аватар пользователя
Image(
painter = painterResource(id = R.drawable.avatar_ken), // Замените на ваш ресурс
contentDescription = "Avatar",
modifier = Modifier
.size(56.dp)
.clip(CircleShape)
)
Spacer(modifier = Modifier.width(12.dp))
// Текстовый блок
Column(modifier = Modifier.weight(1f)) {
Text(
text = "Hello Ken!",
color = Color.White,
style = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.Bold
)
Text(
text = "Welcome to the $currentTabName", // Динамическая часть текста
color = Color.White.copy(alpha = 0.8f),
style = MaterialTheme.typography.bodyMedium
)
}
// Иконка уведомлений (колокольчик)
Icon(
imageVector = Icons.Default.Notifications,
contentDescription = "Notifications",
tint = Color.White,
modifier = Modifier.size(24.dp)
)
}
}
}