From 204c6333c46cb4de49f57414556337bfc2e78263 Mon Sep 17 00:00:00 2001 From: AllenTom Date: Mon, 15 Jul 2024 10:30:56 +0800 Subject: [PATCH] update:new post --- .../main/java/com/aiosman/riderpro/AddPage.kt | 12 +- .../java/com/aiosman/riderpro/MainActivity.kt | 143 ++++++++++-------- .../main/java/com/aiosman/riderpro/NewPost.kt | 25 ++- .../aiosman/riderpro/SelectLocationModal.kt | 139 +++++++++++++++++ .../drawable/rider_pro_search_location.xml | 7 + 5 files changed, 256 insertions(+), 70 deletions(-) create mode 100644 app/src/main/java/com/aiosman/riderpro/SelectLocationModal.kt create mode 100644 app/src/main/res/drawable/rider_pro_search_location.xml diff --git a/app/src/main/java/com/aiosman/riderpro/AddPage.kt b/app/src/main/java/com/aiosman/riderpro/AddPage.kt index f0315d1..b0ead93 100644 --- a/app/src/main/java/com/aiosman/riderpro/AddPage.kt +++ b/app/src/main/java/com/aiosman/riderpro/AddPage.kt @@ -4,6 +4,7 @@ import androidx.annotation.DrawableRes import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.border +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize @@ -26,18 +27,23 @@ import androidx.compose.ui.unit.sp @Composable fun AddPage(){ + val navController = LocalNavController.current Column(modifier = Modifier .fillMaxSize() .background(Color.Black)) { - AddBtn(icon = R.drawable.rider_pro_icon_rider_share, text = "Rider Share") + AddBtn(icon = R.drawable.rider_pro_icon_rider_share, text = "Rider Share") { + navController.navigate("NewPost") + } AddBtn(icon = R.drawable.rider_pro_location_create, text = "Location Create") } } @Composable -fun AddBtn(@DrawableRes icon: Int, text: String){ +fun AddBtn(@DrawableRes icon: Int, text: String,onClick: (() -> Unit)? = {}){ Row (modifier = Modifier - .fillMaxWidth().padding(24.dp), + .fillMaxWidth().padding(24.dp).clickable { + onClick?.invoke() + }, verticalAlignment = Alignment.CenterVertically){ Image( modifier = Modifier.size(40.dp), diff --git a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt index 7358918..f796fbe 100644 --- a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt +++ b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt @@ -77,11 +77,13 @@ fun NavigationController(navController: NavHostController) { fadeOut(animationSpec = tween(0)) }) { // 带底部导航栏的路由： - listOf(NavigationItem.Home, - NavigationItem.Street, - NavigationItem.Add, - NavigationItem.Message, - NavigationItem.Profile).forEach { item -> + listOf( + NavigationItem.Home, + NavigationItem.Street, + NavigationItem.Add, + NavigationItem.Message, + NavigationItem.Profile + ).forEach { item -> composable(route = item.route) { ScaffoldWithNavigationBar(navController) { when (item) { @@ -98,65 +100,72 @@ fun NavigationController(navController: NavHostController) { composable(route = "ProfileTimeline") { GalleryPage() } - composable(route="LocationDetail") { + composable(route = "LocationDetail") { Box( modifier = Modifier.padding(bottom = navigationBarHeight) ) { LocationDetail() } } - composable(route="OfficialPhoto") { + composable(route = "OfficialPhoto") { Box( modifier = Modifier.padding(bottom = navigationBarHeight) ) { OfficialGalleryPage() } } - composable(route="OfficialPhotographer") { + composable(route = "OfficialPhotographer") { OfficialPhotographer() } - composable(route="Post") { + composable(route = "Post") { Box( modifier = Modifier.padding(bottom = navigationBarHeight) ) { PostPage() } } - composable(route="ModificationList") { + composable(route = "ModificationList") { Box( modifier = Modifier.padding(bottom = navigationBarHeight) ) { ModificationListScreen() } } - composable(route="MyMessage") { + composable(route = "MyMessage") { Box( modifier = Modifier.padding(bottom = navigationBarHeight) ) { NotificationsScreen() } } - composable(route="Comments") { + composable(route = "Comments") { Box( modifier = Modifier.padding(navigationBarHeight) ) { CommentsScreen() } } - composable(route="Likes") { + composable(route = "Likes") { Box( modifier = Modifier.padding(navigationBarHeight) ) { LikePage() } } - composable(route="Followers") { + composable(route = "Followers") { Box( modifier = Modifier.padding(navigationBarHeight) ) { FollowerPage() } } + composable(route = "NewPost") { + Box( + modifier = Modifier.padding(navigationBarHeight, top = 64.dp) + ) { + NewPostScreen() + } + } } } @@ -188,61 +197,63 @@ fun ScaffoldWithNavigationBar( ) Scaffold( modifier = Modifier.statusBarsPadding(), - bottomBar = { NavigationBar( - modifier = Modifier.height(56.dp + navigationBarHeight), - containerColor = Color.Black - ) { - val navBackStackEntry by navController.currentBackStackEntryAsState() - val currentRoute = navBackStackEntry?.destination?.route - val systemUiController = rememberSystemUiController() - item.forEach { it -> - NavigationBarItem( - selected = currentRoute == it.route, - onClick = { - if (currentRoute != it.route) { - navController.navigate(it.route) + bottomBar = { + NavigationBar( + modifier = Modifier.height(56.dp + navigationBarHeight), + containerColor = Color.Black + ) { + val navBackStackEntry by navController.currentBackStackEntryAsState() + val currentRoute = navBackStackEntry?.destination?.route + val systemUiController = rememberSystemUiController() + item.forEach { it -> + NavigationBarItem( + selected = currentRoute == it.route, + onClick = { + if (currentRoute != it.route) { + navController.navigate(it.route) + } + when (it.route) { + NavigationItem.Add.route -> { + systemUiController.setSystemBarsColor( + color = Color.Black + ) + } + + NavigationItem.Message.route -> { + systemUiController.setSystemBarsColor( + color = Color.Black + ) + } + + else -> { + systemUiController.setSystemBarsColor( + color = Color.Transparent + ) + } + } + }, + colors = NavigationBarItemColors( + selectedIconColor = Color.Red, + selectedTextColor = Color.Red, + selectedIndicatorColor = Color.Black, + unselectedIconColor = Color.Red, + unselectedTextColor = Color.Red, + disabledIconColor = Color.Red, + disabledTextColor = Color.Red, + + ), + icon = { + Icon( + modifier = Modifier.size(24.dp), + imageVector = it.icon(), contentDescription = null, + tint = if (currentRoute == it.route) Color.Red else Color.White + ) } - when (it.route) { - NavigationItem.Add.route -> { - systemUiController.setSystemBarsColor( - color = Color.Black - ) - } + ) + } - NavigationItem.Message.route -> { - systemUiController.setSystemBarsColor( - color = Color.Black - ) - } - - else -> { - systemUiController.setSystemBarsColor( - color = Color.Transparent - ) - } - } - }, - colors = NavigationBarItemColors( - selectedIconColor = Color.Red, - selectedTextColor = Color.Red, - selectedIndicatorColor = Color.Black, - unselectedIconColor = Color.Red, - unselectedTextColor = Color.Red, - disabledIconColor = Color.Red, - disabledTextColor = Color.Red, - - ), - icon = { - Icon( - modifier = Modifier.size(24.dp), - imageVector = it.icon(), contentDescription = null, - tint = if (currentRoute == it.route) Color.Red else Color.White - ) - } - ) } - - } } + } ) { innerPadding -> Box( modifier = Modifier.padding(innerPadding) diff --git a/app/src/main/java/com/aiosman/riderpro/NewPost.kt b/app/src/main/java/com/aiosman/riderpro/NewPost.kt index 8b3841f..5f07bab 100644 --- a/app/src/main/java/com/aiosman/riderpro/NewPost.kt +++ b/app/src/main/java/com/aiosman/riderpro/NewPost.kt @@ -2,6 +2,7 @@ package com.aiosman.riderpro import androidx.compose.foundation.Image import androidx.compose.foundation.background +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -16,6 +17,8 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.BasicTextField +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.ModalBottomSheet import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -39,7 +42,7 @@ fun NewPostScreen() { Column( modifier = Modifier .fillMaxSize() - .background(Color.White) + ) { NewPostTopBar() @@ -147,8 +150,25 @@ fun AddImageGrid() { } +@OptIn(ExperimentalMaterial3Api::class) @Composable fun AdditionalPostItem() { + var isShowLocationModal by remember { mutableStateOf(false) } + fun onSelectLocationClick() { + isShowLocationModal = true + } + if (isShowLocationModal) { + ModalBottomSheet( + onDismissRequest = { + isShowLocationModal = false + }, + containerColor = Color.White + + ) { + // Sheet content + SelectLocationModal() + } + } Column( modifier = Modifier.fillMaxWidth() ) { @@ -156,6 +176,9 @@ fun AdditionalPostItem() { modifier = Modifier .fillMaxWidth() .padding(vertical = 16.dp, horizontal = 24.dp) + .clickable { + onSelectLocationClick() + } ) { Row( verticalAlignment = Alignment.CenterVertically diff --git a/app/src/main/java/com/aiosman/riderpro/SelectLocationModal.kt b/app/src/main/java/com/aiosman/riderpro/SelectLocationModal.kt new file mode 100644 index 0000000..4c7d906 --- /dev/null +++ b/app/src/main/java/com/aiosman/riderpro/SelectLocationModal.kt @@ -0,0 +1,139 @@ +package com.aiosman.riderpro + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +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.layout.width +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp + +@Preview +@Composable +fun SelectLocationModal() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(horizontal = 24.dp) + ) { + Box( + modifier = Modifier + .fillMaxWidth() + .padding(vertical = 10.dp) + ) { + Text( + "Check In", + fontWeight = FontWeight.Bold, + modifier = Modifier.align(Alignment.Center), + fontSize = 16.sp + ) + Text( + "Cancel", + modifier = Modifier.align(Alignment.CenterEnd), + fontSize = 16.sp + ) + } + LocationSearchTextInput() + LazyColumn( + modifier = Modifier.weight(1f).padding(top = 28.dp) + ) { + item{ + repeat(20){ + LocationItem() + } + } + } + + } +} + +@Composable +fun LocationSearchTextInput() { + var text by remember { mutableStateOf("") } + Box( + modifier = Modifier + .fillMaxWidth() + .padding(top = 16.dp) + .clip(shape = RoundedCornerShape(16.dp)) + .background(Color(0xffF5F5F5)) + ) { + Row( + modifier = Modifier + .fillMaxWidth().padding(horizontal = 12.dp), + + verticalAlignment = Alignment.CenterVertically + ) { + Image( + painter = painterResource(id = R.drawable.rider_pro_search_location), + contentDescription = "Search", + modifier = Modifier.size(24.dp) + ) + Spacer(modifier = Modifier.width(8.dp)) + if (text.isEmpty()) { + Text( + "search", + modifier = Modifier.padding(vertical = 16.dp), + color = Color(0xffA0A0A0) + ) + } + BasicTextField( + value = "", + onValueChange = {}, + modifier = Modifier + .fillMaxWidth() + .padding(vertical = 16.dp) + + ) + } + + } + +} + +@Composable +fun LocationItem(){ + Box( + modifier = Modifier + .fillMaxWidth() + .padding(vertical = 16.dp) + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + Column( + modifier = Modifier.weight(1f).padding(end = 16.dp) + ) { + Text("Location Name") + Text("Address", color = Color(0xFF9a9a9a)) + } + Image( + painter = painterResource(id = R.drawable.rider_pro_nav_next), + contentDescription = "Next", + modifier = Modifier.size(24.dp) + ) + + } + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/rider_pro_search_location.xml b/app/src/main/res/drawable/rider_pro_search_location.xml new file mode 100644 index 0000000..8f17209 --- /dev/null +++ b/app/src/main/res/drawable/rider_pro_search_location.xml @@ -0,0 +1,7 @@ + + + + + + +