admin/rider-pro-android-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加标签组件并更新导航栏Add按钮样式

Browse Source 
- 新增可复用的`TabItem`和`TabSpacer`组件，用于实现标签页切换效果。
- 在消息列表和AI Agent页面中，使用新的`TabItem`和`TabSpacer`组件替换原有的标签页实现，简化代码并统一风格。
- 更新底部导航栏Add按钮的图标和交互行为：
    - 使用新的`ic_nav_add.xml`图标。
    - Add按钮只显示图标，不显示文字标签。
    - Add按钮图标放大。
- 在`Colors.kt`中为`AppThemeData`添加新的颜色属性，以支持新标签组件的自定义主题。
This commit is contained in:
AllenTom
2025-08-08 09:57:42 +08:00
parent f6a796e2bc
commit 1bb0adeb90
7 changed files with 181 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/src/main/java/com/aiosman/ravenow/Colors.kt
View File

@@ -28,6 +28,10 @@ open class AppThemeData(
var checkedText: Color,
var chatActionColor: Color,
var brandColorsColor: Color,
var tabSelectedBackground: Color,
var tabUnselectedBackground: Color,
var tabSelectedText: Color,
var tabUnselectedText: Color,
)
class LightThemeColors : AppThemeData(
@@ -53,6 +57,10 @@ class LightThemeColors : AppThemeData(
decentBackground = Color(0xfff5f5f5),
chatActionColor = Color(0xffe0e0e0),
brandColorsColor = Color(0xffD80264),
tabSelectedBackground = Color(0xff110C13),
tabUnselectedBackground = Color(0xff7C7480),
tabSelectedText = Color(0xffffffff),
tabUnselectedText = Color(0xff000000),
)
@@ -79,4 +87,8 @@ class DarkThemeColors : AppThemeData(
decentBackground = Color(0xFF171717),
chatActionColor = Color(0xFF3D3D3D),
brandColorsColor = Color(0xffD80264),
tabSelectedBackground = Color(0xffffffff),
tabUnselectedBackground = Color(0xff7C7480),
tabSelectedText = Color(0xff000000),
tabUnselectedText = Color(0xffffffff),
)

56
app/src/main/java/com/aiosman/ravenow/ui/composables/TabItem.kt Normal file
View File

@@ -0,0 +1,56 @@
package com.aiosman.ravenow.ui.composables
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.aiosman.ravenow.LocalAppTheme
import com.aiosman.ravenow.ui.modifiers.noRippleClickable
/**
* 可复用的标签页组件
*/
@Composable
fun TabItem(
text: String,
isSelected: Boolean,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
val AppColors = LocalAppTheme.current
Column(
modifier = modifier
.noRippleClickable { onClick() },
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = text,
fontSize = 14.sp,
color = if (isSelected) AppColors.tabSelectedText else AppColors.tabUnselectedText,
modifier = Modifier
.clip(RoundedCornerShape(8.dp))
.background(if (isSelected) AppColors.tabSelectedBackground else AppColors.tabUnselectedBackground)
.padding(horizontal = 11.dp, vertical = 4.dp)
)
}
}
/**
* 标签页之间的间隔组件
*/
@Composable
fun TabSpacer() {
Spacer(modifier = Modifier.width(8.dp))
}

52
app/src/main/java/com/aiosman/ravenow/ui/index/Index.kt
View File

@@ -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,
)
}
}
)

4
app/src/main/java/com/aiosman/ravenow/ui/index/NavigationItem.kt
View File

@@ -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 = { "" }
)

138
app/src/main/java/com/aiosman/ravenow/ui/index/tabs/ai/Agent.kt
View File

@@ -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(

101
app/src/main/java/com/aiosman/ravenow/ui/index/tabs/message/MessageList.kt
View File

@@ -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,