279 lines
12 KiB
Kotlin
279 lines
12 KiB
Kotlin
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)
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
} |