自定义NavigationItem,新增群组创建页面

This commit is contained in:
weber
2025-08-12 19:06:56 +08:00
parent 697af504b7
commit 2d518cbd68
18 changed files with 941 additions and 104 deletions

View File

@@ -52,6 +52,7 @@ import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@@ -259,7 +260,7 @@ fun IndexScreen() {
Scaffold(
bottomBar = {
NavigationBar(
modifier = Modifier.height(56.dp + navigationBarHeight),
modifier = Modifier.height(72.dp + navigationBarHeight),
containerColor = AppColors.background
) {
item.forEachIndexed { idx, it ->
@@ -268,6 +269,7 @@ fun IndexScreen() {
targetValue = if (isSelected) AppColors.brandColorsColor else AppColors.text,
animationSpec = tween(durationMillis = 250), label = ""
)
NavigationBarItem(
modifier = Modifier.padding(top = 6.dp),
selected = isSelected,
@@ -282,58 +284,65 @@ fun IndexScreen() {
}
model.tabIndex = idx
},
interactionSource = remember { MutableInteractionSource() },
colors = NavigationBarItemColors(
selectedTextColor = Color.Red,
selectedIconColor = Color.Transparent,
selectedTextColor = Color.Transparent,
selectedIndicatorColor = Color.Transparent,
unselectedTextColor = Color.Red,
disabledIconColor = Color.Red,
disabledTextColor = Color.Red,
selectedIconColor = iconTint,
unselectedIconColor = iconTint,
unselectedIconColor = Color.Transparent,
unselectedTextColor = Color.Transparent,
disabledIconColor = Color.Transparent,
disabledTextColor = Color.Transparent
),
icon = {
// 特殊处理中间的Add按钮只显示图标并放大
if (it.route == NavigationItem.Add.route) {
Icon(
modifier = Modifier.size(32.dp),
imageVector = if (isSelected) it.selectedIcon() else it.icon(),
contentDescription = null,
tint = AppColors.text
)
} else {
Box(
modifier = Modifier
.width(46.dp)
.height(30.dp)
.background(
color = if (isSelected) AppColors.brandColorsColor.copy(alpha = 0.1f) else Color.Transparent ,
shape = RoundedCornerShape(10.dp)
),
contentAlignment = Alignment.Center
) {
Icon(
modifier = Modifier.size(24.dp),
imageVector = if (isSelected) it.selectedIcon() else it.icon(),
contentDescription = null,
tint = iconTint
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
if (it.route == NavigationItem.Add.route) {
// Add按钮只显示大图标
Image(
painter = painterResource(if (isSelected) it.selectedIcon() else it.icon()),
contentDescription = it.label(),
modifier = Modifier.size(32.dp),
colorFilter = if (!isSelected) ColorFilter.tint(AppColors.text) else null
)
} else {
// 其他按钮:图标+文字
Box(
modifier = Modifier
.width(48.dp)
.height(32.dp)
.background(
color = if (isSelected) AppColors.brandColorsColor.copy(alpha = 0.15f) else Color.Transparent,
shape = RoundedCornerShape(12.dp)
),
contentAlignment = Alignment.Center
) {
Image(
painter = painterResource(if (isSelected) it.selectedIcon() else it.icon()),
contentDescription = it.label(),
modifier = Modifier.size(24.dp),
colorFilter = if (!isSelected) ColorFilter.tint(AppColors.text) else null
)
}
// 文字标签,可控制间距
Spacer(modifier = Modifier.height(4.dp))
Text(
text = it.label(),
fontSize = 10.sp,
color = if (isSelected) AppColors.brandColorsColor else AppColors.text,
fontWeight = if (isSelected) FontWeight.W600 else FontWeight.Normal
)
}
}
},
label = {
// Add按钮不显示文字标签
if (it.route != NavigationItem.Add.route) {
Text(
modifier = Modifier.padding(0.dp),
text = it.label(),
fontSize = 9.sp,
color = if (isSelected) AppColors.brandColorsColor else AppColors.text,
)
}
// 不显示默认标签
}
)
}
}
}
@@ -344,7 +353,7 @@ fun IndexScreen() {
modifier = Modifier
.background(AppColors.background)
.padding(0.dp),
beyondBoundsPageCount = 5,
beyondBoundsPageCount = 4,
userScrollEnabled = false
) { page ->
when (page) {

View File

@@ -3,57 +3,46 @@ package com.aiosman.ravenow.ui.index
import android.graphics.Color
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.res.vectorResource
import com.aiosman.ravenow.R
sealed class NavigationItem(
val route: String,
val icon: @Composable () -> ImageVector,
val selectedIcon: @Composable () -> ImageVector = icon,
val icon: @Composable () -> Int,
val selectedIcon: @Composable () -> Int = icon,
val label: @Composable () -> String
) {
data object Home : NavigationItem("Home",
icon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_home) },
selectedIcon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_home_hl) },
icon = { R.drawable.rider_pro_nav_home },
selectedIcon = { R.mipmap.rider_pro_nav_home_hl },
label = { stringResource(R.string.main_home) }
)
data object Street : NavigationItem("Street",
icon = { ImageVector.vectorResource(R.drawable.rider_pro_location) },
selectedIcon = { ImageVector.vectorResource(R.drawable.rider_pro_location_filed) },
data object Ai : NavigationItem("Ai",
icon = { R.drawable.rider_pro_nav_ai },
selectedIcon = { R.mipmap.rider_pro_nav_ai_hl },
label = { stringResource(R.string.main_home) }
)
data object Add : NavigationItem("Add",
icon = { ImageVector.vectorResource(R.drawable.ic_nav_add) },
selectedIcon = { ImageVector.vectorResource(R.drawable.ic_nav_add) },
label = { "" }
)
data object Message : NavigationItem("Message",
icon = { ImageVector.vectorResource(R.drawable.rider_pro_video_outline) },
selectedIcon = { ImageVector.vectorResource(R.drawable.rider_pro_video) },
icon = { R.drawable.ic_nav_add },
selectedIcon = { R.drawable.ic_nav_add },
label = { stringResource(R.string.main_home) }
)
data object Notification : NavigationItem("Notification",
icon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_notification)},
selectedIcon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_notification) },
icon = { R.drawable.rider_pro_nav_notification },
selectedIcon = { R.mipmap.rider_pro_nav_message_hl },
label = { stringResource(R.string.main_message) }
)
data object Profile : NavigationItem("Profile",
icon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_profile) },
selectedIcon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_profile_hl) },
icon = { R.drawable.rider_pro_nav_profile },
selectedIcon = { R.mipmap.rider_pro_nav_profile_hl },
label = { stringResource(R.string.main_profile) }
)
data object Ai : NavigationItem("Ai",
icon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_search) },
selectedIcon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_search_hl) },
label = { stringResource(R.string.main_ai) }
)
}

View File

@@ -80,7 +80,7 @@ fun NotificationsScreen() {
val navController = LocalNavController.current
val systemUiController = rememberSystemUiController()
val context = LocalContext.current
var pagerState = rememberPagerState (pageCount = { 4 })
var pagerState = rememberPagerState (pageCount = { 3 })
var scope = rememberCoroutineScope()
val state = rememberPullRefreshState(MessageListViewModel.isLoading, onRefresh = {
MessageListViewModel.viewModelScope.launch {
@@ -143,7 +143,7 @@ fun NotificationsScreen() {
modifier = Modifier
.size(24.dp)
.noRippleClickable {
navController.navigate(NavigationRoute.CreateGroupChat.route)
},
colorFilter = ColorFilter.tint(AppColors.text)
)

View File

@@ -1,6 +1,7 @@
package com.aiosman.ravenow.ui.index.tabs.moment
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
@@ -31,6 +32,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.font.FontWeight
@@ -95,13 +97,16 @@ fun MomentsList() {
fontWeight = FontWeight.W600)
Spacer(modifier = Modifier.height(4.dp))
Box(
modifier = Modifier
.width(34.dp)
.height(4.dp)
.clip(RoundedCornerShape(16.dp))
.background(if (pagerState.currentPage == 0) AppColors.brandColorsColor else AppColors.background)
)
Image(
painter = painterResource(
if (pagerState.currentPage == 0) R.mipmap.tab_indicator_selected
else R.drawable.tab_indicator_unselected
),
contentDescription = "tab indicator",
modifier = Modifier
.width(34.dp)
.height(4.dp)
)
}
Spacer(modifier = Modifier.width(16.dp))
@@ -122,13 +127,16 @@ fun MomentsList() {
fontWeight = FontWeight.W600)
Spacer(modifier = Modifier.height(4.dp))
Box(
modifier = Modifier
.width(34.dp)
.height(4.dp)
.clip(RoundedCornerShape(16.dp))
.background(if (pagerState.currentPage == 1) AppColors.brandColorsColor else AppColors.background)
)
Image(
painter = painterResource(
if (pagerState.currentPage == 1) R.mipmap.tab_indicator_selected
else R.drawable.tab_indicator_unselected
),
contentDescription = "tab indicator",
modifier = Modifier
.width(34.dp)
.height(4.dp)
)
}
//热门tab
@@ -150,12 +158,15 @@ fun MomentsList() {
fontWeight = FontWeight.W600)
Spacer(modifier = Modifier.height(4.dp))
Box(
Image(
painter = painterResource(
if (pagerState.currentPage == 2) R.mipmap.tab_indicator_selected
else R.drawable.tab_indicator_unselected
),
contentDescription = "tab indicator",
modifier = Modifier
.width(34.dp)
.height(4.dp)
.clip(RoundedCornerShape(16.dp))
.background(if (pagerState.currentPage == 2) AppColors.brandColorsColor else AppColors.background)
)
}