diff --git a/app/src/main/java/com/aiosman/riderpro/LocationDetail.kt b/app/src/main/java/com/aiosman/riderpro/LocationDetail.kt index 51965dd..f279254 100644 --- a/app/src/main/java/com/aiosman/riderpro/LocationDetail.kt +++ b/app/src/main/java/com/aiosman/riderpro/LocationDetail.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.gestures.ScrollableDefaults import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box @@ -102,7 +103,7 @@ fun LocationDetail() { val configuration = LocalConfiguration.current val officialGalleryItems = getOfficialGalleryItems() val feedItems = getFeedItems() - + val navController = LocalNavController.current // 2/3 height of the screen fun getPeekHeight(): Dp { @@ -211,7 +212,9 @@ fun LocationDetail() { Image( painter = painterResource(id = R.drawable.rider_pro_nav_next), contentDescription = "Next", - modifier = Modifier.size(24.dp) + modifier = Modifier.size(24.dp).clickable { + navController.navigate("OfficialPhoto") + } ) } diff --git a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt index ccba5bc..2250720 100644 --- a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt +++ b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt @@ -92,6 +92,9 @@ fun NavigationController(navController: NavHostController) { composable(route="LocationDetail") { LocationDetail() } + composable(route="OfficialPhoto") { + OfficialGalleryPage() + } } } diff --git a/app/src/main/java/com/aiosman/riderpro/OfficialGallery.kt b/app/src/main/java/com/aiosman/riderpro/OfficialGallery.kt new file mode 100644 index 0000000..24e4acb --- /dev/null +++ b/app/src/main/java/com/aiosman/riderpro/OfficialGallery.kt @@ -0,0 +1,187 @@ +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.grid.GridCells +import androidx.compose.foundation.lazy.grid.LazyVerticalGrid +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Button +import androidx.compose.material3.Icon +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.layout.ContentScale +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 OfficialGalleryPage() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(16.dp) + ) { + OfficialGalleryPageHeader() +// CertificationSection() + Spacer(modifier = Modifier.height(16.dp)) + ImageGrid() + } +} + +@Composable +fun OfficialGalleryPageHeader() { + Row( + modifier = Modifier + .fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically + ) { + Icon( + painter = painterResource(id = R.drawable.rider_pro_nav_back), // Replace with your logo resource + contentDescription = "Logo", + modifier = Modifier.size(24.dp) + ) + Spacer(modifier = Modifier.width(8.dp)) + Text(text = "官方摄影师作品", fontWeight = FontWeight.Bold, fontSize = 16.sp) + } +} + +@Composable +fun CertificationSection() { + Row( + modifier = Modifier + .fillMaxWidth() + .background(Color(0xFFFFF3CD), RoundedCornerShape(8.dp)) + .padding(16.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Icon( + painter = painterResource(id = R.drawable.ic_launcher_foreground), // Replace with your certification icon resource + contentDescription = "Certification Icon", + modifier = Modifier.size(24.dp) + ) + Spacer(modifier = Modifier.width(8.dp)) + Text(text = "成为认证摄影师", fontWeight = FontWeight.Bold, fontSize = 16.sp) + Spacer(modifier = Modifier.weight(1f)) + Button( + onClick = { /*TODO*/ }, + + ) { + Text(text = "去认证", color = Color.White) + } + } +} + +@Composable +fun ImageGrid() { + val photographers = listOf( + Pair( + "Diego Morata", + R.drawable.rider_pro_moment_demo_1 + ), // Replace with your image resources + Pair("Usha Oliver", R.drawable.rider_pro_moment_demo_2), + Pair("Mohsen Salehi", R.drawable.rider_pro_moment_demo_3), + Pair("Thanawan Chadee", R.drawable.rider_pro_moment_demo_1), + Pair("Photographer 5", R.drawable.rider_pro_moment_demo_2), + Pair("Photographer 6", R.drawable.rider_pro_moment_demo_3), + Pair( + "Diego Morata", + R.drawable.rider_pro_moment_demo_1 + ), // Replace with your image resources + Pair("Usha Oliver", R.drawable.rider_pro_moment_demo_2), + Pair("Mohsen Salehi", R.drawable.rider_pro_moment_demo_3), + Pair("Thanawan Chadee", R.drawable.rider_pro_moment_demo_1), + Pair("Photographer 5", R.drawable.rider_pro_moment_demo_2), + Pair("Photographer 6", R.drawable.rider_pro_moment_demo_3), + Pair( + "Diego Morata", + R.drawable.rider_pro_moment_demo_1 + ), // Replace with your image resources + Pair("Usha Oliver", R.drawable.rider_pro_moment_demo_2), + Pair("Mohsen Salehi", R.drawable.rider_pro_moment_demo_3), + Pair("Thanawan Chadee", R.drawable.rider_pro_moment_demo_1), + Pair("Photographer 5", R.drawable.rider_pro_moment_demo_2), + Pair("Photographer 6", R.drawable.rider_pro_moment_demo_3), + Pair( + "Diego Morata", + R.drawable.rider_pro_moment_demo_1 + ), // Replace with your image resources + Pair("Usha Oliver", R.drawable.rider_pro_moment_demo_2), + Pair("Mohsen Salehi", R.drawable.rider_pro_moment_demo_3), + Pair("Thanawan Chadee", R.drawable.rider_pro_moment_demo_1), + Pair("Photographer 5", R.drawable.rider_pro_moment_demo_2), + Pair("Photographer 6", R.drawable.rider_pro_moment_demo_3) + ) + + + LazyVerticalGrid( + columns = GridCells.Fixed(2), + horizontalArrangement = Arrangement.spacedBy(8.dp), + verticalArrangement = Arrangement.spacedBy(8.dp), + ) { + items(photographers.size) { index -> + PhotographerCard(photographers[index].first, photographers[index].second) + } + } +} + +@Composable +fun PhotographerCard(name: String, imageRes: Int) { + Box( + modifier = Modifier + .fillMaxSize() + .clip(RoundedCornerShape(8.dp)) + .background(Color.LightGray) + ) { + Image( + painter = painterResource(id = imageRes), + contentDescription = name, + contentScale = ContentScale.Crop, + modifier = Modifier + .fillMaxWidth() + .height(270.dp) + ) + Box( + modifier = Modifier + .fillMaxSize() + .background(Color(0x55000000)) + .align(Alignment.BottomStart) + ) { + Row( + modifier = Modifier + .fillMaxWidth() + .padding(8.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Image( + painter = painterResource(id = R.drawable.default_avatar), // Replace with your profile picture resource + contentDescription = "Profile Picture", + modifier = Modifier + .size(24.dp) + .clip(CircleShape) + ) + Spacer(modifier = Modifier.width(8.dp)) + Text(text = name, color = Color.White) + } + } + + } +} \ No newline at end of file