添加标签组件并更新导航栏Add按钮样式
- 新增可复用的`TabItem`和`TabSpacer`组件，用于实现标签页切换效果。
- 在消息列表和AI Agent页面中，使用新的`TabItem`和`TabSpacer`组件替换原有的标签页实现，简化代码并统一风格。
- 更新底部导航栏Add按钮的图标和交互行为：
- 使用新的`ic_nav_add.xml`图标。
- Add按钮只显示图标，不显示文字标签。
- Add按钮图标放大。
- 在`Colors.kt`中为`AppThemeData`添加新的颜色属性，以支持新标签组件的自定义主题。
This commit is contained in:
@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.requiredWidth
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.pager.HorizontalPager
|
||||
import androidx.compose.foundation.pager.rememberPagerState
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
@@ -38,6 +39,7 @@ import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.runtime.LaunchedEffect
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.rememberCoroutineScope
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
@@ -280,6 +282,7 @@ fun IndexScreen() {
|
||||
}
|
||||
model.tabIndex = idx
|
||||
},
|
||||
interactionSource = remember { MutableInteractionSource() },
|
||||
colors = NavigationBarItemColors(
|
||||
selectedTextColor = Color.Red,
|
||||
selectedIndicatorColor = Color.Transparent,
|
||||
@@ -290,31 +293,44 @@ fun IndexScreen() {
|
||||
unselectedIconColor = iconTint,
|
||||
),
|
||||
icon = {
|
||||
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
|
||||
) {
|
||||
// 特殊处理中间的Add按钮，只显示图标并放大
|
||||
if (it.route == NavigationItem.Add.route) {
|
||||
Icon(
|
||||
modifier = Modifier.size(24.dp),
|
||||
modifier = Modifier.size(32.dp),
|
||||
imageVector = if (isSelected) it.selectedIcon() else it.icon(),
|
||||
contentDescription = null,
|
||||
tint = iconTint
|
||||
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
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
label = {
|
||||
Text(
|
||||
modifier = Modifier.padding(0.dp),
|
||||
text = it.label(),
|
||||
fontSize = 9.sp,
|
||||
color = if (isSelected) AppColors.brandColorsColor else AppColors.text,
|
||||
)
|
||||
// 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,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
@@ -28,8 +28,8 @@ sealed class NavigationItem(
|
||||
)
|
||||
|
||||
data object Add : NavigationItem("Add",
|
||||
icon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_post_hl) },
|
||||
selectedIcon = { ImageVector.vectorResource(R.drawable.rider_pro_nav_post_hl) },
|
||||
icon = { ImageVector.vectorResource(R.drawable.ic_nav_add) },
|
||||
selectedIcon = { ImageVector.vectorResource(R.drawable.ic_nav_add) },
|
||||
label = { "" }
|
||||
)
|
||||
|
||||
|
||||
@@ -39,6 +39,8 @@ import com.aiosman.ravenow.ui.NavigationRoute
|
||||
import com.aiosman.ravenow.ui.index.tabs.ai.tabs.mine.MineAgent
|
||||
import com.aiosman.ravenow.ui.index.tabs.ai.tabs.hot.HotAgent
|
||||
import com.aiosman.ravenow.ui.modifiers.noRippleClickable
|
||||
import com.aiosman.ravenow.ui.composables.TabItem
|
||||
import com.aiosman.ravenow.ui.composables.TabSpacer
|
||||
import kotlinx.coroutines.launch
|
||||
|
||||
@OptIn( ExperimentalFoundationApi::class)
|
||||
@@ -121,103 +123,45 @@ fun Agent() {
|
||||
horizontalArrangement = Arrangement.Start,
|
||||
verticalAlignment = Alignment.Bottom
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.noRippleClickable {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(0)
|
||||
}
|
||||
},
|
||||
verticalArrangement = Arrangement.Center,
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
|
||||
) {
|
||||
Text(
|
||||
text = stringResource(R.string.agent_mine),
|
||||
fontSize = 14.sp,
|
||||
color = if (pagerState.currentPage == 0) AppColors.mainText else AppColors.checkedBackground,
|
||||
modifier = Modifier
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.background(if (pagerState.currentPage == 0) AppColors.checkedBackground else AppColors.unCheckedBackground)
|
||||
.padding(horizontal = 11.dp, vertical = 4.dp)
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.noRippleClickable {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(1)
|
||||
}
|
||||
},
|
||||
verticalArrangement = Arrangement.Center,
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
|
||||
) {
|
||||
Text(
|
||||
text = stringResource(R.string.agent_hot),
|
||||
fontSize = 14.sp,
|
||||
color = if (pagerState.currentPage == 1) AppColors.mainText else AppColors.checkedBackground,
|
||||
modifier = Modifier
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.background(if (pagerState.currentPage == 1) AppColors.checkedBackground else AppColors.unCheckedBackground)
|
||||
.padding(horizontal = 11.dp, vertical = 4.dp)
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.noRippleClickable {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(2)
|
||||
}
|
||||
},
|
||||
verticalArrangement = Arrangement.Center,
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
|
||||
) {
|
||||
Text(
|
||||
text = stringResource(R.string.agent_recommend),
|
||||
fontSize = 14.sp,
|
||||
color = if (pagerState.currentPage == 2) AppColors.mainText else AppColors.checkedBackground,
|
||||
modifier = Modifier
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.background(if (pagerState.currentPage == 2) AppColors.checkedBackground else AppColors.unCheckedBackground)
|
||||
.padding(horizontal = 11.dp, vertical = 4.dp)
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.noRippleClickable {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(3)
|
||||
}
|
||||
},
|
||||
verticalArrangement = Arrangement.Center,
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
|
||||
) {
|
||||
Text(
|
||||
text = stringResource(R.string.agent_other),
|
||||
fontSize = 14.sp,
|
||||
color = if (pagerState.currentPage == 3) AppColors.mainText else AppColors.checkedBackground,
|
||||
modifier = Modifier
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.background(if (pagerState.currentPage == 3) AppColors.checkedBackground else AppColors.unCheckedBackground)
|
||||
.padding(horizontal = 11.dp, vertical = 4.dp)
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
TabItem(
|
||||
text = stringResource(R.string.agent_mine),
|
||||
isSelected = pagerState.currentPage == 0,
|
||||
onClick = {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(0)
|
||||
}
|
||||
}
|
||||
)
|
||||
TabSpacer()
|
||||
TabItem(
|
||||
text = stringResource(R.string.agent_hot),
|
||||
isSelected = pagerState.currentPage == 1,
|
||||
onClick = {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(1)
|
||||
}
|
||||
}
|
||||
)
|
||||
TabSpacer()
|
||||
TabItem(
|
||||
text = stringResource(R.string.agent_recommend),
|
||||
isSelected = pagerState.currentPage == 2,
|
||||
onClick = {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(2)
|
||||
}
|
||||
}
|
||||
)
|
||||
TabSpacer()
|
||||
TabItem(
|
||||
text = stringResource(R.string.agent_other),
|
||||
isSelected = pagerState.currentPage == 3,
|
||||
onClick = {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(3)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
HorizontalPager(
|
||||
|
||||
@@ -55,6 +55,8 @@ import com.aiosman.ravenow.R
|
||||
import com.aiosman.ravenow.ui.NavigationRoute
|
||||
import com.aiosman.ravenow.ui.composables.CustomAsyncImage
|
||||
import com.aiosman.ravenow.ui.composables.StatusBarSpacer
|
||||
import com.aiosman.ravenow.ui.composables.TabItem
|
||||
import com.aiosman.ravenow.ui.composables.TabSpacer
|
||||
import com.aiosman.ravenow.ui.follower.FollowerNoticeViewModel
|
||||
import com.aiosman.ravenow.ui.like.LikeNoticeViewModel
|
||||
import com.aiosman.ravenow.ui.modifiers.noRippleClickable
|
||||
@@ -184,76 +186,35 @@ fun NotificationsScreen() {
|
||||
horizontalArrangement = Arrangement.Start,
|
||||
verticalAlignment = Alignment.Bottom
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.noRippleClickable {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(0)
|
||||
}
|
||||
},
|
||||
verticalArrangement = Arrangement.Center,
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
|
||||
) {
|
||||
Text(
|
||||
text = stringResource(R.string.chat_ai),
|
||||
fontSize = 14.sp,
|
||||
color = if (pagerState.currentPage == 0) AppColors.checkedText else AppColors.text,
|
||||
modifier = Modifier
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.background(if (pagerState.currentPage == 0) AppColors.checkedBackground else AppColors.unCheckedBackground)
|
||||
.padding(horizontal = 11.dp, vertical = 4.dp)
|
||||
)
|
||||
}
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.noRippleClickable {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(1)
|
||||
}
|
||||
},
|
||||
verticalArrangement = Arrangement.Center,
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
|
||||
) {
|
||||
androidx.compose.material.Text(
|
||||
text = stringResource(R.string.chat_group),
|
||||
fontSize = 14.sp,
|
||||
color = if (pagerState.currentPage == 1) AppColors.checkedText else AppColors.text,
|
||||
modifier = Modifier
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.background(if (pagerState.currentPage == 1) AppColors.checkedBackground else AppColors.unCheckedBackground)
|
||||
.padding(horizontal = 11.dp, vertical = 4.dp)
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.noRippleClickable {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(2)
|
||||
}
|
||||
},
|
||||
verticalArrangement = Arrangement.Center,
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
|
||||
) {
|
||||
androidx.compose.material.Text(
|
||||
text = stringResource(R.string.chat_friend),
|
||||
fontSize = 14.sp,
|
||||
color = if (pagerState.currentPage == 2) AppColors.checkedText else AppColors.text,
|
||||
modifier = Modifier
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.background(if (pagerState.currentPage == 2) AppColors.checkedBackground else AppColors.unCheckedBackground)
|
||||
.padding(horizontal = 11.dp, vertical = 4.dp)
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
||||
TabItem(
|
||||
text = stringResource(R.string.chat_ai),
|
||||
isSelected = pagerState.currentPage == 0,
|
||||
onClick = {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(0)
|
||||
}
|
||||
}
|
||||
)
|
||||
TabSpacer()
|
||||
TabItem(
|
||||
text = stringResource(R.string.chat_group),
|
||||
isSelected = pagerState.currentPage == 1,
|
||||
onClick = {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(1)
|
||||
}
|
||||
}
|
||||
)
|
||||
TabSpacer()
|
||||
TabItem(
|
||||
text = stringResource(R.string.chat_friend),
|
||||
isSelected = pagerState.currentPage == 2,
|
||||
onClick = {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(2)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
HorizontalPager(
|
||||
state = pagerState,
|
||||
|
||||
Reference in New Issue
Block a user