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,

5
app/src/main/res/drawable/ic_nav_add.xml Normal file
View File

@@ -0,0 +1,5 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.77" android:height="32dp" android:viewportHeight="32" android:viewportWidth="32" android:width="32dp">
<path android:fillColor="#FFFFFF" android:fillType="evenOdd" android:pathData="M16.522,0C25.07,-0 32,6.93 32,15.478L32,16.522C32,25.07 25.07,32 16.522,32L15.478,32C6.93,32 0,25.07 0,16.522L0,15.478C-0,6.93 6.93,0 15.478,0L16.522,0ZM16.043,9.333L15.957,9.333C15.244,9.333 14.667,9.911 14.667,10.623L14.666,14.666L10.623,14.667C9.911,14.667 9.333,15.244 9.333,15.957L9.333,16.043C9.333,16.756 9.911,17.333 10.623,17.333L14.666,17.332L14.667,21.377C14.667,22.089 15.244,22.667 15.957,22.667L16.043,22.667C16.756,22.667 17.333,22.089 17.333,21.377L17.333,17.332L21.377,17.333C22.089,17.333 22.667,16.756 22.667,16.043L22.667,15.957C22.667,15.244 22.089,14.667 21.377,14.667L17.333,14.666L17.333,10.623C17.333,9.911 16.756,9.333 16.043,9.333Z" android:strokeColor="#00000000" android:strokeWidth="1"/>
</vector>