From ac051c83832c00b4db489cd97c38598d452b7979 Mon Sep 17 00:00:00 2001 From: AllenTom Date: Sun, 14 Jul 2024 11:17:51 +0800 Subject: [PATCH] add:comment list --- .../com/aiosman/riderpro/CommentsScreen.kt | 137 ++++++++++++++++++ .../java/com/aiosman/riderpro/MainActivity.kt | 3 + .../java/com/aiosman/riderpro/MessageList.kt | 28 +++- .../res/drawable/rider_pro_more_horizon.xml | 12 ++ 4 files changed, 175 insertions(+), 5 deletions(-) create mode 100644 app/src/main/java/com/aiosman/riderpro/CommentsScreen.kt create mode 100644 app/src/main/res/drawable/rider_pro_more_horizon.xml diff --git a/app/src/main/java/com/aiosman/riderpro/CommentsScreen.kt b/app/src/main/java/com/aiosman/riderpro/CommentsScreen.kt new file mode 100644 index 0000000..055dd64 --- /dev/null +++ b/app/src/main/java/com/aiosman/riderpro/CommentsScreen.kt @@ -0,0 +1,137 @@ +package com.aiosman.riderpro + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +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.height +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.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.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 CommentsScreen() { + Column( + modifier = Modifier + .fillMaxSize() + .background(color = Color(0xFFFFFFFF)) + .padding(16.dp) + ) { + LikesScreenHeader() + Spacer(modifier = Modifier.height(28.dp)) + LazyColumn( + modifier = Modifier.weight(1f) + ) { + item { + repeat(20) { + CommentsItem() + } + } + } + } +} + +@Composable +fun LikesScreenHeader() { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + ) { + Image( + painter = painterResource(id = R.drawable.rider_pro_nav_back), + contentDescription = "Likes", + modifier = Modifier.size(16.dp) + ) + Spacer(modifier = Modifier.size(12.dp)) + Text("Comments", fontWeight = FontWeight.Bold, fontSize = 17.sp) + Spacer(modifier = Modifier.weight(1f)) + Image( + painter = painterResource(id = R.drawable.rider_pro_more_horizon), + contentDescription = "More", + modifier = Modifier.size(24.dp) + ) + + } +} + +@Composable +fun CommentsItem() { + Box( + modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp) + ) { + Row( + modifier = Modifier.fillMaxWidth() + ) { + Image( + painter = painterResource(id = R.drawable.default_avatar), + contentDescription = "Avatar", + modifier = Modifier + .size(40.dp) + ) + Spacer(modifier = Modifier.size(12.dp)) + Column( + modifier = Modifier.weight(1f) + ) { + Text("Username", fontWeight = FontWeight.Bold, fontSize = 16.sp) + Spacer(modifier = Modifier.size(4.dp)) + Text("Content", color = Color(0x99000000), fontSize = 12.sp) + Spacer(modifier = Modifier.size(4.dp)) + Text("Date", color = Color(0x99000000), fontSize = 12.sp) + Spacer(modifier = Modifier.height(16.dp)) + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + Image( + painter = painterResource(id = R.drawable.rider_pro_like), + contentDescription = "Like", + modifier = Modifier.size(16.dp), + ) + Text( + "270", + color = Color(0x99000000), + fontSize = 12.sp, + modifier = Modifier.padding(start = 4.dp) + ) + Spacer(modifier = Modifier.width(45.dp)) + Image( + painter = painterResource(id = R.drawable.rider_pro_comments), + contentDescription = "Comments", + modifier = Modifier.size(16.dp) + ) + Text( + "270", + color = Color(0x99000000), + fontSize = 12.sp, + modifier = Modifier.padding(start = 4.dp) + ) + } + } + Box { + Image( + painter = painterResource(id = R.drawable.default_moment_img), + contentDescription = "More", + modifier = Modifier.size(64.dp) + ) + } + } + } +} \ No newline at end of file diff --git a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt index 353568f..f3f2f08 100644 --- a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt +++ b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt @@ -108,6 +108,9 @@ fun NavigationController(navController: NavHostController) { composable(route="MyMessage") { NotificationsScreen() } + composable(route="Comments") { + CommentsScreen() + } } } diff --git a/app/src/main/java/com/aiosman/riderpro/MessageList.kt b/app/src/main/java/com/aiosman/riderpro/MessageList.kt index adbd0b1..e7033ae 100644 --- a/app/src/main/java/com/aiosman/riderpro/MessageList.kt +++ b/app/src/main/java/com/aiosman/riderpro/MessageList.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 @@ -29,10 +30,10 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp - @Preview(showBackground = true) @Composable fun NotificationsScreen() { + val navController = LocalNavController.current Column( modifier = Modifier.fillMaxSize() ) { @@ -53,9 +54,16 @@ fun NotificationsScreen() { .padding(horizontal = 16.dp), horizontalArrangement = Arrangement.SpaceBetween, ) { - NotificationIndicator(10, R.drawable.rider_pro_like, "LIKE") - NotificationIndicator(10, R.drawable.rider_pro_followers, "FOLLOWERS") - NotificationIndicator(10, R.drawable.rider_pro_comments, "COMMENTS") + NotificationIndicator(10, R.drawable.rider_pro_like, "LIKE") { + + } + NotificationIndicator(10, R.drawable.rider_pro_followers, "FOLLOWERS"){ + + } + NotificationIndicator(10, R.drawable.rider_pro_comments, "COMMENTS"){ + navController.navigate("Comments") + + } } HorizontalDivider(color = Color(0xFFEbEbEb), modifier = Modifier.padding(16.dp)) NotificationCounterItem(24) @@ -85,7 +93,12 @@ fun NotificationsScreen() { } @Composable -fun NotificationIndicator(notificationCount: Int, iconRes: Int, label: String) { +fun NotificationIndicator( + notificationCount: Int, + iconRes: Int, + label: String, + onClick: () -> Unit +) { Box( modifier = Modifier ) { @@ -93,6 +106,9 @@ fun NotificationIndicator(notificationCount: Int, iconRes: Int, label: String) { modifier = Modifier .padding(16.dp) .align(Alignment.TopCenter) + .clickable { + onClick() + } ) { if (notificationCount > 0) { Box( @@ -172,12 +188,14 @@ fun NotificationCounterItem(count: Int) { } } } + data class MessageItemData( val userName: String, val message: String, val timeAgo: String, val profileImage: Int ) + @Composable fun MessageItem(messageItemData: MessageItemData) { Row( diff --git a/app/src/main/res/drawable/rider_pro_more_horizon.xml b/app/src/main/res/drawable/rider_pro_more_horizon.xml new file mode 100644 index 0000000..99038e1 --- /dev/null +++ b/app/src/main/res/drawable/rider_pro_more_horizon.xml @@ -0,0 +1,12 @@ + + +