add:add official photographer
This commit is contained in:
@@ -95,6 +95,9 @@ fun NavigationController(navController: NavHostController) {
|
||||
composable(route="OfficialPhoto") {
|
||||
OfficialGalleryPage()
|
||||
}
|
||||
composable(route="OfficialPhotographer") {
|
||||
OfficialPhotographer()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
@@ -145,6 +146,7 @@ fun ImageGrid() {
|
||||
|
||||
@Composable
|
||||
fun PhotographerCard(name: String, imageRes: Int) {
|
||||
val navController = LocalNavController.current
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
@@ -168,7 +170,10 @@ fun PhotographerCard(name: String, imageRes: Int) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(8.dp),
|
||||
.padding(8.dp)
|
||||
.clickable {
|
||||
navController.navigate("OfficialPhotographer")
|
||||
},
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Image(
|
||||
|
||||
279
app/src/main/java/com/aiosman/riderpro/OfficialPhotographer.kt
Normal file
279
app/src/main/java/com/aiosman/riderpro/OfficialPhotographer.kt
Normal file
@@ -0,0 +1,279 @@
|
||||
package com.aiosman.riderpro
|
||||
|
||||
import android.util.Log
|
||||
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.ExperimentalLayoutApi
|
||||
import androidx.compose.foundation.layout.FlowRow
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.aspectRatio
|
||||
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.lazy.rememberLazyListState
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Favorite
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.LaunchedEffect
|
||||
import androidx.compose.runtime.derivedStateOf
|
||||
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.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.layout.ContentScale
|
||||
import androidx.compose.ui.platform.LocalConfiguration
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
|
||||
data class ArtWork(
|
||||
val id: Int,
|
||||
val resId: Int,
|
||||
)
|
||||
|
||||
fun GenerateMockArtWorks(): List<ArtWork> {
|
||||
val pickupImage = listOf(
|
||||
R.drawable.default_avatar,
|
||||
R.drawable.default_moment_img,
|
||||
R.drawable.rider_pro_moment_demo_1,
|
||||
R.drawable.rider_pro_moment_demo_2,
|
||||
R.drawable.rider_pro_moment_demo_3,
|
||||
)
|
||||
return List(30) {
|
||||
ArtWork(
|
||||
id = it,
|
||||
resId = pickupImage.random()
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@OptIn(ExperimentalLayoutApi::class)
|
||||
@Preview
|
||||
@Composable
|
||||
fun OfficialPhotographer() {
|
||||
val lazyListState = rememberLazyListState()
|
||||
var artWorks by remember { mutableStateOf<List<ArtWork>>(emptyList()) }
|
||||
LaunchedEffect(Unit) {
|
||||
artWorks = GenerateMockArtWorks()
|
||||
}
|
||||
// Observe the scroll state and calculate opacity
|
||||
val alpha by remember {
|
||||
derivedStateOf {
|
||||
// Example calculation: Adjust the range and formula as needed
|
||||
val alp = minOf(1f, lazyListState.firstVisibleItemScrollOffset / 900f)
|
||||
Log.d("alpha", "alpha: $alp")
|
||||
alp
|
||||
}
|
||||
}
|
||||
Scaffold { paddingValues ->
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.background(Color.Black)
|
||||
.padding(paddingValues)
|
||||
|
||||
) {
|
||||
LazyColumn(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
state = lazyListState
|
||||
) {
|
||||
item {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.height(400.dp)
|
||||
.fillMaxWidth()
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.default_moment_img),
|
||||
contentDescription = "Logo",
|
||||
contentScale = ContentScale.Crop,
|
||||
modifier = Modifier.fillMaxSize()
|
||||
)
|
||||
// top bar
|
||||
|
||||
// on bottom of box
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(120.dp)
|
||||
.background(
|
||||
brush = Brush.verticalGradient(
|
||||
colors = listOf(
|
||||
Color.Black.copy(alpha = 1f),
|
||||
Color.Black.copy(alpha = 1f),
|
||||
Color.Black.copy(alpha = 0f),
|
||||
),
|
||||
startY = Float.POSITIVE_INFINITY,
|
||||
endY = 0f
|
||||
)
|
||||
)
|
||||
.padding(16.dp)
|
||||
.align(alignment = androidx.compose.ui.Alignment.BottomCenter)
|
||||
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.weight(1f),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.default_avatar),
|
||||
contentDescription = "",
|
||||
modifier = Modifier
|
||||
.size(32.dp)
|
||||
.clip(CircleShape) // Clip the image to a circle
|
||||
)
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
// name
|
||||
Text("Onyama Limba", color = Color.White, fontSize = 14.sp)
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
// round box
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.background(Color.Red, CircleShape)
|
||||
.padding(horizontal = 8.dp, vertical = 4.dp)
|
||||
) {
|
||||
// certification
|
||||
Text("摄影师", color = Color.White, fontSize = 12.sp)
|
||||
}
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
IconButton(
|
||||
onClick = { /*TODO*/ },
|
||||
modifier = Modifier.size(32.dp)
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.Filled.Favorite,
|
||||
contentDescription = null,
|
||||
tint = Color.White
|
||||
)
|
||||
}
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
Text("123", color = Color.White)
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
IconButton(
|
||||
onClick = {},
|
||||
modifier = Modifier.size(32.dp)
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.rider_pro_eye),
|
||||
contentDescription = "",
|
||||
modifier = Modifier
|
||||
.size(24.dp)
|
||||
)
|
||||
}
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
Text("123", color = Color.White)
|
||||
|
||||
}
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.weight(1f)
|
||||
) {
|
||||
// description
|
||||
Text(
|
||||
"摄影师 Diego Morata 的作品",
|
||||
color = Color.White,
|
||||
modifier = Modifier.align(Alignment.Center)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// circle avatar
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
val screenWidth = LocalConfiguration.current.screenWidthDp.dp
|
||||
val imageSize =
|
||||
(screenWidth - (4.dp * 4)) / 3 // Subtracting total padding and divi
|
||||
val itemWidth = screenWidth / 3 - 4.dp * 2
|
||||
FlowRow(
|
||||
modifier = Modifier.padding(4.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(4.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(4.dp),
|
||||
maxItemsInEachRow = 3
|
||||
) {
|
||||
for (artWork in artWorks) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.width(itemWidth)
|
||||
.aspectRatio(1f)
|
||||
.background(Color.Gray)
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = artWork.resId),
|
||||
contentDescription = "",
|
||||
contentScale = ContentScale.Crop,
|
||||
modifier = Modifier
|
||||
.width(imageSize)
|
||||
.aspectRatio(1f)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(64.dp)
|
||||
.background(Color.Black.copy(alpha = alpha))
|
||||
.padding(horizontal = 16.dp)
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
verticalAlignment = androidx.compose.ui.Alignment.CenterVertically,
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.rider_pro_nav_back),
|
||||
colorFilter = androidx.compose.ui.graphics.ColorFilter.tint(Color.White),
|
||||
contentDescription = "",
|
||||
modifier = Modifier
|
||||
.size(32.dp)
|
||||
.clip(CircleShape) // Clip the image to a circle
|
||||
)
|
||||
if (alpha == 1f) {
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.default_avatar),
|
||||
contentDescription = "",
|
||||
modifier = Modifier
|
||||
.size(32.dp)
|
||||
.clip(CircleShape) // Clip the image to a circle
|
||||
|
||||
)
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Text("Onyama Limba", color = Color.White)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user