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

登录页面UI调整

Browse Source
This commit is contained in:
zhong
2025-10-21 17:19:32 +08:00
parent 18dd52e193
commit 66da741eda
8 changed files with 169 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/src/main/assets/login.lottie Normal file
View File

Binary file not shown.

BIN
app/src/main/assets/login_light.lottie Normal file
View File

Binary file not shown.

8
app/src/main/java/com/aiosman/ravenow/ui/composables/ActionButton.kt
View File

@@ -17,6 +17,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
@@ -32,6 +33,7 @@ fun ActionButton(
text: String, text: String,
color: Color? = null, color: Color? = null,
backgroundColor: Color? = null, backgroundColor: Color? = null,
backgroundBrush: Brush? = null,
leading: @Composable (() -> Unit)? = null, leading: @Composable (() -> Unit)? = null,
expandText: Boolean = false, expandText: Boolean = false,
contentPadding: PaddingValues = PaddingValues(vertical = 16.dp), contentPadding: PaddingValues = PaddingValues(vertical = 16.dp),
@@ -65,7 +67,11 @@ fun ActionButton(
Box( Box(
modifier = modifier modifier = modifier
.clip(RoundedCornerShape(roundCorner.dp)) .clip(RoundedCornerShape(roundCorner.dp))
.background(animatedBackgroundColor) .background(
brush = backgroundBrush ?: Brush.linearGradient(
colors = listOf(animatedBackgroundColor, animatedBackgroundColor)
)
)
.noRippleClickable { .noRippleClickable {
if (enabled && !isLoading) { if (enabled && !isLoading) {
click() click()

185
app/src/main/java/com/aiosman/ravenow/ui/login/login.kt
View File

@@ -9,6 +9,7 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.rememberScrollableState import androidx.compose.foundation.gestures.rememberScrollableState
import androidx.compose.foundation.gestures.scrollable import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.PaddingValues
@@ -40,12 +41,14 @@ import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
@@ -70,6 +73,11 @@ import com.google.accompanist.systemuicontroller.rememberSystemUiController
import kotlinx.coroutines.Dispatchers import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.delay import kotlinx.coroutines.delay
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
import com.airbnb.lottie.compose.LottieAnimation
import com.airbnb.lottie.compose.LottieCompositionSpec
import com.airbnb.lottie.compose.LottieConstants
import com.airbnb.lottie.compose.rememberLottieComposition
@Preview @Preview
@Composable @Composable
fun LoginPage() { fun LoginPage() {
@@ -209,14 +217,14 @@ fun LoginPage() {
saveData() saveData()
} }
// 显示成功提示 // // 显示成功提示
coroutineScope.launch(Dispatchers.Main) { // coroutineScope.launch(Dispatchers.Main) {
Toast.makeText( // Toast.makeText(
context, // context,
"游客登录成功", // "游客登录成功",
Toast.LENGTH_SHORT // Toast.LENGTH_SHORT
).show() // ).show()
} // }
// 初始化应用状态（游客模式会自动跳过推送和TRTC初始化） // 初始化应用状态（游客模式会自动跳过推送和TRTC初始化）
try { try {
@@ -260,13 +268,52 @@ fun LoginPage() {
.fillMaxSize() .fillMaxSize()
.background(AppColors.background) .background(AppColors.background)
) { ) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 24.dp)
.padding(top = 100.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = stringResource(R.string.join_party_carnival),
fontSize = 14.sp,
color = AppColors.text
)
Box( Box(
modifier = Modifier modifier = Modifier
.fillMaxSize() .size(30.dp)
.background(
color = AppColors.text.copy(alpha = 0.1f),
shape = androidx.compose.foundation.shape.CircleShape
)
.noRippleClickable {
guestLogin()
},
contentAlignment = Alignment.Center
) { ) {
val localContext = LocalContext.current // 获取 Context Image(
MovingImageWall(localContext.resources) // 将 resources 传递给 MovingImageWall painter = painterResource(id = R.drawable.rider_pro_close),
contentDescription = "Close",
modifier = Modifier.size(16.dp),
colorFilter = ColorFilter.tint(AppColors.text)
)
} }
}
Box(
modifier = Modifier.fillMaxSize()
) {
val lottieFile = if (AppState.darkMode) "login.lottie" else "login_light.lottie"
LottieAnimation(
composition = rememberLottieComposition(LottieCompositionSpec.Asset(lottieFile)).value,
iterations = LottieConstants.IterateForever,
modifier = Modifier.fillMaxSize()
.padding(30.dp)
)
}
Spacer(modifier = Modifier.height(20.dp))
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
@@ -274,78 +321,82 @@ fun LoginPage() {
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
Spacer(modifier = Modifier.weight(1f)) Spacer(modifier = Modifier.weight(1f))
Image( // Image(
painter = painterResource(id = R.mipmap.invalid_name), // painter = painterResource(id = R.mipmap.invalid_name),
contentDescription = "Rave Now", // contentDescription = "Rave Now",
modifier = Modifier // modifier = Modifier
.size(52.dp) // .size(52.dp)
.clip(RoundedCornerShape(10.dp)) // .clip(RoundedCornerShape(10.dp))
) // )
Spacer(modifier = Modifier.height(8.dp)) // Spacer(modifier = Modifier.height(8.dp))
Text( // Text(
"Rave Now", // "Rave Now",
fontSize = 28.sp, // fontSize = 28.sp,
fontWeight = FontWeight.W900, // fontWeight = FontWeight.W900,
color = AppColors.text // color = AppColors.text
) // )
Spacer(modifier = Modifier.height(16.dp)) // Spacer(modifier = Modifier.height(16.dp))
Text( // Text(
"Your Night Starts Here", // "Your Night Starts Here",
fontSize = 20.sp, // fontSize = 20.sp,
fontWeight = FontWeight.W700, // fontWeight = FontWeight.W700,
color = AppColors.text // color = AppColors.text
) // )
//注册tab
Spacer(modifier = Modifier.height(8.dp)) Spacer(modifier = Modifier.height(8.dp))
ActionButton( ActionButton(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
text = stringResource(R.string.sign_up_upper), text = stringResource(R.string.sign_up_upper),
color = AppColors.mainText, color = if (AppState.darkMode) Color.Black else Color.White,
backgroundColor = AppColors.main backgroundColor = if (AppState.darkMode) Color.White else Color.Black
) { ) {
navController.navigate( navController.navigate(
NavigationRoute.EmailSignUp.route, NavigationRoute.EmailSignUp.route,
) )
} }
if (showGoogleLogin) { // if (showGoogleLogin) {
Spacer(modifier = Modifier.height(16.dp)) // Spacer(modifier = Modifier.height(16.dp))
ActionButton( // ActionButton(
modifier = Modifier.fillMaxWidth(), // modifier = Modifier.fillMaxWidth(),
text = stringResource(R.string.sign_in_with_google), // text = stringResource(R.string.sign_in_with_google),
color = AppColors.text, // color = AppColors.text,
leading = { // leading = {
Image( // Image(
painter = painterResource(id = R.drawable.rider_pro_google), // painter = painterResource(id = R.drawable.rider_pro_google),
contentDescription = "Google", // contentDescription = "Google",
modifier = Modifier.size(36.dp) // modifier = Modifier.size(36.dp)
) // )
}, // },
expandText = true, // expandText = true,
contentPadding = PaddingValues(vertical = 8.dp, horizontal = 8.dp) // contentPadding = PaddingValues(vertical = 8.dp, horizontal = 8.dp)
) { // ) {
googleLogin() // googleLogin()
} // }
} // }
//登录tab //登录tab
Spacer(modifier = Modifier.height(24.dp)) Spacer(modifier = Modifier.height(24.dp))
ActionButton( Text(
modifier = Modifier.fillMaxWidth(),
text = stringResource(R.string.login_upper), text = stringResource(R.string.login_upper),
color = AppColors.text, color = AppColors.text.copy(alpha = 0.5f),
) { fontSize = 16.sp,
textAlign = TextAlign.Center,
modifier = Modifier
.fillMaxWidth()
.noRippleClickable {
navController.navigate( navController.navigate(
NavigationRoute.UserAuth.route, NavigationRoute.UserAuth.route,
) )
} }
)
// 游客登录按钮 // // 游客登录按钮
Spacer(modifier = Modifier.height(16.dp)) // Spacer(modifier = Modifier.height(16.dp))
ActionButton( // ActionButton(
modifier = Modifier.fillMaxWidth(), // modifier = Modifier.fillMaxWidth(),
text = "游客模式", // text = "游客模式",
color = AppColors.text.copy(alpha = 0.7f), // color = AppColors.text.copy(alpha = 0.7f),
) { // ) {
guestLogin() // guestLogin()
} // }
Spacer(modifier = Modifier.height(70.dp)) Spacer(modifier = Modifier.height(70.dp))
} }
} }

52
app/src/main/java/com/aiosman/ravenow/ui/login/userauth.kt
View File

@@ -22,6 +22,8 @@ import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
@@ -299,32 +301,38 @@ fun UserAuthScreen() {
ActionButton( ActionButton(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
text = stringResource(R.string.lets_ride_upper), text = stringResource(R.string.lets_ride_upper),
backgroundColor = AppColors.main, backgroundBrush = Brush.linearGradient(
colors = listOf(
Color(0xFF7c45ed),
Color(0x777c68ef),
Color(0x777bd8f8)
)
),
color = AppColors.mainText, color = AppColors.mainText,
) { ) {
onLogin() onLogin()
} }
if (AppState.enableGoogleLogin) { // if (AppState.enableGoogleLogin) {
Spacer(modifier = Modifier.height(16.dp)) // Spacer(modifier = Modifier.height(16.dp))
Text(stringResource(R.string.or_login_with), color = AppColors.secondaryText) // Text(stringResource(R.string.or_login_with), color = AppColors.secondaryText)
Spacer(modifier = Modifier.height(16.dp)) // Spacer(modifier = Modifier.height(16.dp))
ActionButton( // ActionButton(
modifier = Modifier.fillMaxWidth(), // modifier = Modifier.fillMaxWidth(),
text = stringResource(R.string.sign_in_with_google), // text = stringResource(R.string.sign_in_with_google),
color = AppColors.text, // color = AppColors.text,
leading = { // leading = {
Image( // Image(
painter = painterResource(id = R.drawable.rider_pro_google), // painter = painterResource(id = R.drawable.rider_pro_google),
contentDescription = "Google", // contentDescription = "Google",
modifier = Modifier.size(36.dp) // modifier = Modifier.size(36.dp)
) // )
}, // },
expandText = true, // expandText = true,
contentPadding = PaddingValues(vertical = 8.dp, horizontal = 8.dp) // contentPadding = PaddingValues(vertical = 8.dp, horizontal = 8.dp)
) { // ) {
googleLogin() // googleLogin()
} // }
} // }
} }

3
app/src/main/res/values-ja/strings.xml
View File

@@ -219,5 +219,8 @@
<string name="friend_chat_no_network_title">オフラインだ..</string> <string name="friend_chat_no_network_title">オフラインだ..</string>
<string name="friend_chat_no_network_subtitle">ネットワークを確認して、この宇宙に接続してください</string> <string name="friend_chat_no_network_subtitle">ネットワークを確認して、この宇宙に接続してください</string>
<string name="Reload">再ロード</string> <string name="Reload">再ロード</string>
<!-- Login page -->
<string name="join_party_carnival">パーティーに参加して、一緒に盛り上がろう</string>
</resources> </resources>

3
app/src/main/res/values-zh/strings.xml
View File

@@ -223,4 +223,7 @@
<string name="friend_chat_no_network_subtitle">确认一下网络，连接这个宇宙</string> <string name="friend_chat_no_network_subtitle">确认一下网络，连接这个宇宙</string>
<string name="Reload">重新加载</string> <string name="Reload">重新加载</string>
<!-- Login page -->
<string name="join_party_carnival">加入派派，一起狂欢</string>
</resources> </resources>

3
app/src/main/res/values/strings.xml
View File

@@ -218,4 +218,7 @@
<string name="friend_chat_no_network_title">Offline…</string> <string name="friend_chat_no_network_title">Offline…</string>
<string name="friend_chat_no_network_subtitle">Check your network to connect to this universe</string> <string name="friend_chat_no_network_subtitle">Check your network to connect to this universe</string>
<string name="Reload">Reload</string> <string name="Reload">Reload</string>
<!-- Login page -->
<string name="join_party_carnival">Join the party, let\'s celebrate together</string>
</resources> </resources>