自定义NavigationItem,新增群组创建页面
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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) }
|
||||
)
|
||||
}
|
||||
@@ -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)
|
||||
)
|
||||
|
||||
@@ -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)
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user