Skip to content

Commit

Permalink
change Tips style
Browse files Browse the repository at this point in the history
  • Loading branch information
@lings03
lings03 committed Nov 12, 2024
1 parent ab84f26 commit be6ab9e
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 86 deletions.
127 changes: 107 additions & 20 deletions app/src/main/java/top/laoxin/modmanager/ui/view/ModManagerApp.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,14 @@ import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.HorizontalPager
Expand All @@ -28,26 +32,34 @@ import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Dashboard
import androidx.compose.material.icons.filled.ImagesearchRoller
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationRail
import androidx.compose.material3.NavigationRailItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Snackbar
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import androidx.core.graphics.drawable.toBitmap
import androidx.lifecycle.viewmodel.compose.viewModel
import top.laoxin.modmanager.App
import top.laoxin.modmanager.R
import top.laoxin.modmanager.ui.state.ModUiState
import top.laoxin.modmanager.ui.view.modview.ModPage
import top.laoxin.modmanager.ui.view.modview.ModTopBar
import top.laoxin.modmanager.ui.viewmodel.ConsoleViewModel
Expand Down Expand Up @@ -133,9 +145,14 @@ fun ModManagerApp() {
)
}
val activity = context as? Activity
val uiState = modViewModel.uiState.collectAsState().value
val pagerState = rememberPagerState(
initialPage = currentPage,
pageCount = { pageList.size }
)

// 在 ConsolePage 显示退出确认
BackHandler(enabled = currentPage == NavigationIndex.CONSOLE.ordinal) {
// 在 ConsolePage 显示退出确认
val currentTime = System.currentTimeMillis()
if (currentTime - exitTime > 2000) {
exitToast.show()
Expand All @@ -146,30 +163,12 @@ fun ModManagerApp() {
}
}

// 在其他页面显示返回键返回到 ConsolePage
BackHandler(enabled = currentPage != NavigationIndex.CONSOLE.ordinal) {
// 在其他页面显示返回键返回到 ConsolePage
currentPage = NavigationIndex.CONSOLE.ordinal
shouldScroll = true
}

// 使用 HorizontalPager 实现分页效果
val pagerState = rememberPagerState(
initialPage = currentPage,
pageCount = { pageList.size }
)

HorizontalPager(
state = pagerState,
modifier = Modifier.padding(innerPadding)
) { page ->
// 每个页面显示的内容
when (page) {
NavigationIndex.CONSOLE.ordinal -> ConsolePage(consoleViewModel)
NavigationIndex.MOD.ordinal -> ModPage(modViewModel)
NavigationIndex.SETTINGS.ordinal -> SettingPage()
}
}

// 监听 HorizontalPager 页面变化时更新 currentPage
LaunchedEffect(pagerState.currentPage) {
if (pagerState.currentPage != currentPage && !shouldScroll) {
Expand All @@ -192,6 +191,36 @@ fun ModManagerApp() {
}
}
}

// 页面内容
Box(modifier = Modifier.fillMaxSize()) {
// 显示进度
if (uiState.showTips) {
ProcessTips(
text = uiState.tipsText,
onDismiss = { modViewModel.setShowTips(false) },
uiState = uiState,
modifier = Modifier
.align(Alignment.TopCenter)
.padding(top = innerPadding.calculateTopPadding())
.zIndex(10f)
)
}

// 每个页面显示的内容
HorizontalPager(
state = pagerState,
modifier = Modifier
.padding(innerPadding)
.zIndex(0f)
) { page ->
when (page) {
NavigationIndex.CONSOLE.ordinal -> ConsolePage(consoleViewModel)
NavigationIndex.MOD.ordinal -> ModPage(modViewModel)
NavigationIndex.SETTINGS.ordinal -> SettingPage()
}
}
}
}
}
}
Expand Down Expand Up @@ -371,3 +400,61 @@ fun getGameIcon(packageName: String): ImageBitmap? {
return bitmap.asImageBitmap()
}
}

@Composable
fun ProcessTips(
text: String,
onDismiss: () -> Unit,
uiState: ModUiState,
modifier: Modifier
) {
// 构建提示文本
val tipsStart =
if (uiState.unzipProgress.isNotEmpty()) {
"$text : ${uiState.unzipProgress}"
} else {
text
}

val tipsEnd =
if (uiState.multitaskingProgress.isNotEmpty()) {
stringResource(R.string.mod_top_bar_tips, uiState.multitaskingProgress)
} else {
""
}

// 显示提示
Box(modifier.fillMaxWidth(0.7f)) {
Snackbar(
containerColor = MaterialTheme.colorScheme.secondaryContainer,
contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
modifier = Modifier.padding(16.dp),
shape = MaterialTheme.shapes.medium,
action = {
Button(
onClick = onDismiss,
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
contentColor = MaterialTheme.colorScheme.onPrimaryContainer
),
shape = MaterialTheme.shapes.small,
modifier = Modifier.padding(4.dp),
contentPadding = PaddingValues(horizontal = 2.dp, vertical = 2.dp)
) {
Text(
text = stringResource(R.string.tips_btn_close),
style = MaterialTheme.typography.labelLarge
)
}
}
) {
Text(
text = "$tipsStart $tipsEnd",
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSecondaryContainer,
textAlign = TextAlign.Center
)
}
}

}
100 changes: 36 additions & 64 deletions app/src/main/java/top/laoxin/modmanager/ui/view/modview/ModTopBar.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.SelectAll
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
Expand All @@ -29,7 +31,6 @@ import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Snackbar
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.TopAppBar
Expand All @@ -43,6 +44,8 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.stringResource
Expand All @@ -55,43 +58,6 @@ import top.laoxin.modmanager.ui.state.ModUiState
import top.laoxin.modmanager.ui.view.commen.DialogCommon
import top.laoxin.modmanager.ui.viewmodel.ModViewModel


@Composable
fun Tips(
text: String, showTips: Boolean, onDismiss: () -> Unit, uiState: ModUiState
) {
if (showTips) {
val tipsStart = if (uiState.unzipProgress.isNotEmpty()) {
"$text : ${uiState.unzipProgress}"
} else {
text
}
val tipsEnd = if (uiState.multitaskingProgress.isNotEmpty()) {
stringResource(R.string.mod_top_bar_tips, uiState.multitaskingProgress)
} else {
""
}
Snackbar(
action = {
TextButton(onClick = { onDismiss() }) {

Text(
stringResource(R.string.tips_btn_close),
color = MaterialTheme.colorScheme.onSecondary
)

}
},
containerColor = MaterialTheme.colorScheme.secondary,
modifier = Modifier.padding(8.dp)

) {
Text(text = "$tipsStart $tipsEnd", style = MaterialTheme.typography.bodyMedium)

}
}
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ModTopBar(viewModel: ModViewModel, modifier: Modifier = Modifier, configuration: Int) {
Expand Down Expand Up @@ -225,13 +191,13 @@ fun MultiSelectTopBar(
}
})

// 显示或隐藏搜索框
AnimatedVisibility(visible = uiState.searchBoxVisible) {

// 根据 MutableState 显示或隐藏搜索框
SearchBox(
text = viewModel.getSearchText(),
onValueChange = { viewModel.setSearchText(it) },
hint = stringResource(R.string.mod_page_search_hit),
visible = uiState.searchBoxVisible,
onClose = {
viewModel.setSearchBoxVisible(false)

Expand All @@ -243,7 +209,6 @@ fun MultiSelectTopBar(
viewModel.setSearchText("")
}
)

}
}
}
Expand Down Expand Up @@ -296,17 +261,16 @@ fun GeneralTopBar(
}

}, actions = {

// IconButton(onClick = {
// // 在这里处理图标按钮的点击事件
// viewModel.setUserTipsDialog(true)
// }) {
// Icon(
// imageVector = Icons.Default.Info, // 使用信息图标
// contentDescription = "Info", // 为辅助功能提供描述
// //tint = MaterialTheme.colorScheme.primaryContainer
// )
// }
// IconButton(onClick = {
// // 在这里处理图标按钮的点击事件
// viewModel.setUserTipsDialog(true)
// }) {
// Icon(
// imageVector = Icons.Default.Info, // 使用信息图标
// contentDescription = "Info", // 为辅助功能提供描述
// //tint = MaterialTheme.colorScheme.primaryContainer
// )
// }
IconButton(onClick = {
viewModel.setSearchBoxVisible(true)
when (uiState.modsView) {
Expand Down Expand Up @@ -362,16 +326,16 @@ fun GeneralTopBar(
// 添加更多的菜单项
}
}
})

}
)

// 显示或隐藏搜索框
AnimatedVisibility(visible = uiState.searchBoxVisible) {

// 根据 MutableState 显示或隐藏搜索框
SearchBox(
text = viewModel.getSearchText(),
onValueChange = { viewModel.setSearchText(it) },
hint = stringResource(R.string.mod_page_search_hit),
visible = uiState.searchBoxVisible,
onClose = {
viewModel.setSearchBoxVisible(false)
when (uiState.modsView) {
Expand All @@ -382,7 +346,6 @@ fun GeneralTopBar(
viewModel.setSearchText("")
}
)

}
}
}
Expand All @@ -394,14 +357,22 @@ fun SearchBox(
onValueChange: (String) -> Unit,
hint: String,
onClose: () -> Unit,
modifier: Modifier = Modifier
modifier: Modifier = Modifier,
visible: Boolean
) {
// 获取键盘控制器
val keyboardController = LocalSoftwareKeyboardController.current

// 每次重新显示搜索框时请求显示键盘
LaunchedEffect(keyboardController) {
keyboardController?.show()
// 创建 FocusRequester 控制焦点
val focusRequester = remember { FocusRequester() }

// 每次重新显示搜索框时，请求焦点和显示键盘
LaunchedEffect(visible) {
if (visible) {
focusRequester.requestFocus()
keyboardController?.show()
} else {
keyboardController?.hide()
}
}

// 使用 TextField 组件实现搜索框
Expand All @@ -419,7 +390,8 @@ fun SearchBox(
modifier = modifier
.fillMaxWidth()
.padding(start = 10.dp, end = 10.dp, bottom = 10.dp, top = 10.dp)
.height(50.dp),
.height(50.dp)
.focusRequester(focusRequester), // 关联 FocusRequester
textStyle = MaterialTheme.typography.bodyMedium,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
Expand Down Expand Up @@ -453,4 +425,4 @@ fun SearchBox(
unfocusedPlaceholderColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f)
)
)
}
}
Loading

0 comments on commit be6ab9e

Please sign in to comment.