改包名com.aiosman.ravenow
This commit is contained in:
278
app/src/main/java/com/aiosman/ravenow/ui/gallery/Gallery.kt
Normal file
278
app/src/main/java/com/aiosman/ravenow/ui/gallery/Gallery.kt
Normal file
@@ -0,0 +1,278 @@
|
||||
package com.aiosman.ravenow.ui.gallery
|
||||
|
||||
import androidx.compose.foundation.Canvas
|
||||
import androidx.compose.foundation.ExperimentalFoundationApi
|
||||
import androidx.compose.foundation.Image
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.BoxWithConstraints
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.aspectRatio
|
||||
import androidx.compose.foundation.layout.fillMaxHeight
|
||||
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.layout.wrapContentWidth
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.foundation.pager.HorizontalPager
|
||||
import androidx.compose.foundation.pager.rememberPagerState
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.ScrollableTabRow
|
||||
import androidx.compose.material3.Tab
|
||||
import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TopAppBar
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.LaunchedEffect
|
||||
import androidx.compose.runtime.rememberCoroutineScope
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.geometry.Offset
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Path
|
||||
import androidx.compose.ui.graphics.PathEffect
|
||||
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
|
||||
import com.aiosman.ravenow.R
|
||||
import com.google.accompanist.systemuicontroller.rememberSystemUiController
|
||||
import kotlinx.coroutines.launch
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
|
||||
@Composable
|
||||
fun ProfileTimelineScreen() {
|
||||
val pagerState = rememberPagerState(pageCount = { 2 })
|
||||
val scope = rememberCoroutineScope()
|
||||
val systemUiController = rememberSystemUiController()
|
||||
fun switchToPage(page: Int) {
|
||||
scope.launch {
|
||||
pagerState.animateScrollToPage(page)
|
||||
}
|
||||
}
|
||||
LaunchedEffect(Unit) {
|
||||
systemUiController.setNavigationBarColor(Color.Transparent)
|
||||
}
|
||||
Scaffold(
|
||||
topBar = {
|
||||
TopAppBar(
|
||||
title = {
|
||||
Text("Gallery")
|
||||
},
|
||||
navigationIcon = { },
|
||||
actions = { })
|
||||
},
|
||||
) { paddingValues: PaddingValues ->
|
||||
Box(modifier = Modifier.padding(paddingValues)) {
|
||||
Column(modifier = Modifier) {
|
||||
ScrollableTabRow(
|
||||
edgePadding = 0.dp,
|
||||
selectedTabIndex = pagerState.currentPage,
|
||||
modifier = Modifier,
|
||||
divider = { },
|
||||
indicator = { tabPositions ->
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.tabIndicatorOffset(tabPositions[pagerState.currentPage])
|
||||
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.align(Alignment.Center)
|
||||
.height(4.dp)
|
||||
.width(16.dp)
|
||||
.background(color = Color.Red)
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
) {
|
||||
Tab(
|
||||
text = { Text("Timeline", color = Color.Black) },
|
||||
selected = pagerState.currentPage == 0,
|
||||
onClick = { switchToPage(0) }
|
||||
|
||||
)
|
||||
Tab(
|
||||
text = { Text("Position", color = Color.Black) },
|
||||
selected = pagerState.currentPage == 1,
|
||||
onClick = { switchToPage(1) }
|
||||
)
|
||||
}
|
||||
HorizontalPager(
|
||||
state = pagerState,
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.fillMaxSize()
|
||||
) { page ->
|
||||
when (page) {
|
||||
0 -> GalleryTimeline()
|
||||
1 -> GalleryPosition()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@Composable
|
||||
fun GalleryTimeline() {
|
||||
val mockList = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "10")
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
) {
|
||||
LazyColumn(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
) {
|
||||
items(mockList) { item ->
|
||||
TimelineItem()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@Composable
|
||||
fun DashedVerticalLine(modifier: Modifier = Modifier) {
|
||||
BoxWithConstraints(modifier = modifier) {
|
||||
Canvas(modifier = Modifier.height(maxHeight)) {
|
||||
val path = Path().apply {
|
||||
moveTo(size.width / 2, 0f)
|
||||
lineTo(size.width / 2, size.height)
|
||||
}
|
||||
drawPath(
|
||||
path = path,
|
||||
color = Color.Gray,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@Composable
|
||||
fun DashedLine() {
|
||||
Canvas(modifier = Modifier
|
||||
.width(1.dp) // 控制线条的宽度
|
||||
.fillMaxHeight()) { // 填满父容器的高度
|
||||
|
||||
val canvasWidth = size.width
|
||||
val canvasHeight = size.height
|
||||
|
||||
// 创建一个PathEffect来定义如何绘制线段
|
||||
val pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
|
||||
|
||||
drawLine(
|
||||
color = Color.Gray, // 线条颜色
|
||||
start = Offset(x = canvasWidth / 2, y = 0f), // 起始点
|
||||
end = Offset(x = canvasWidth / 2, y = canvasHeight), // 终点
|
||||
pathEffect = pathEffect // 应用虚线效果
|
||||
)
|
||||
}
|
||||
}
|
||||
@Preview
|
||||
@Composable
|
||||
fun TimelineItem() {
|
||||
val itemsList = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9")
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.padding(16.dp)
|
||||
.fillMaxSize()
|
||||
.wrapContentWidth()
|
||||
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.padding(16.dp)
|
||||
.fillMaxWidth()
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.width(64.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
Text("12", fontSize = 22.sp, fontWeight = androidx.compose.ui.text.font.FontWeight.Bold)
|
||||
Text("7月", fontSize = 20.sp,fontWeight = androidx.compose.ui.text.font.FontWeight.Bold)
|
||||
// add vertical dash line
|
||||
// Box(
|
||||
// modifier = Modifier
|
||||
// .height(120.dp)
|
||||
// .width(3.dp)
|
||||
// .background(Color.Gray)
|
||||
// )
|
||||
DashedLine()
|
||||
}
|
||||
Column {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.padding(bottom = 16.dp)
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.default_avatar),
|
||||
contentDescription = "",
|
||||
modifier = Modifier
|
||||
.padding(end = 16.dp)
|
||||
.size(24.dp)
|
||||
.clip(CircleShape) // Clip the image to a circle
|
||||
)
|
||||
Text("Onyama Limba")
|
||||
}
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.aspectRatio(1f)
|
||||
) {
|
||||
Column {
|
||||
repeat(3) { // Create three rows
|
||||
Row(modifier = Modifier.weight(1f)) {
|
||||
repeat(3) { // Create three columns in each row
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.aspectRatio(1f) // Keep the aspect ratio 1:1 for square shape
|
||||
.padding(4.dp)
|
||||
){
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.background(Color.Gray)
|
||||
) {
|
||||
Text("1")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun GalleryPosition() {
|
||||
val mockList = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "10")
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
) {
|
||||
LazyColumn(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
) {
|
||||
items(mockList) { item ->
|
||||
TimelineItem()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
package com.aiosman.ravenow.ui.gallery
|
||||
|
||||
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
|
||||
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
|
||||
import com.aiosman.ravenow.LocalNavController
|
||||
import com.aiosman.ravenow.R
|
||||
import com.aiosman.ravenow.ui.composables.StatusBarMaskLayout
|
||||
import com.aiosman.ravenow.ui.composables.BottomNavigationPlaceholder
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
fun OfficialGalleryScreen() {
|
||||
StatusBarMaskLayout {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(start = 16.dp, end = 16.dp)
|
||||
) {
|
||||
OfficialGalleryPageHeader()
|
||||
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_back_icon), // 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)
|
||||
}
|
||||
item{
|
||||
BottomNavigationPlaceholder()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun PhotographerCard(name: String, imageRes: Int) {
|
||||
val navController = LocalNavController.current
|
||||
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)
|
||||
.clickable {
|
||||
navController.navigate("OfficialPhotographer")
|
||||
},
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,294 @@
|
||||
package com.aiosman.ravenow.ui.gallery
|
||||
|
||||
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.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.graphics.ColorFilter
|
||||
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
|
||||
import com.aiosman.ravenow.R
|
||||
import com.aiosman.ravenow.ui.composables.StatusBarMaskLayout
|
||||
import com.aiosman.ravenow.ui.composables.BottomNavigationPlaceholder
|
||||
|
||||
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 OfficialPhotographerScreen() {
|
||||
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
|
||||
}
|
||||
}
|
||||
StatusBarMaskLayout(
|
||||
maskBoxBackgroundColor = Color.Black,
|
||||
darkIcons = false
|
||||
) {
|
||||
Column {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.background(Color.Black)
|
||||
|
||||
|
||||
) {
|
||||
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()
|
||||
)
|
||||
// dark alpha overlay
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.background(Color.Black.copy(alpha = alpha))
|
||||
)
|
||||
|
||||
// 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 = 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)
|
||||
)
|
||||
}
|
||||
}
|
||||
BottomNavigationPlaceholder()
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(64.dp)
|
||||
.background(Color.Black.copy(alpha = alpha))
|
||||
.padding(horizontal = 16.dp)
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.rider_pro_back_icon),
|
||||
colorFilter = 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