Skip to content

Commit f65262d

Browse files
stslexstslex
committed
Refactor:
# User Screen - add animations - refactor typography - content padding - fix author visibility (user == author : invisible) # Fix response for User Collections # Topic screen - add animations - refactor parent layout from pager to lazy row # refactor image and collection card padding
1 parent 87e5e76 commit f65262d

File tree

10 files changed

+449
-88
lines changed

10 files changed

+449
-88
lines changed

‎app/src/main/java/st/slex/csplashscreen/data/collections/CollectionService.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ interface CollectionService {
2020
@Query(QUERY_API_KEY) api_key: String
2121
): Response<List<RemoteCollectionModel>>
2222

23-
@GET("$GET_USERS/{query}/{$GET_COLLECTIONS}")
23+
@GET("$GET_USERS/{query}/$GET_COLLECTIONS")
2424
suspend fun getCollections(
2525
@Path("query") query: String,
2626
@Query(QUERY_PAGE) page: Int,

‎app/src/main/java/st/slex/csplashscreen/data/collections/CollectionsPagingSource.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
package st.slex.csplashscreen.data.collections
22

3+
import android.util.Log
34
import androidx.paging.PagingSource
45
import androidx.paging.PagingState
56
import dagger.assisted.Assisted
67
import dagger.assisted.AssistedFactory
78
import dagger.assisted.AssistedInject
89
import retrofit2.HttpException
10+
import st.slex.csplashscreen.core.toCollectionModel
911
import st.slex.csplashscreen.data.core.Constants.API_KEY
1012
import st.slex.csplashscreen.data.core.QueryCollections
11-
import st.slex.csplashscreen.core.toCollectionModel
1213
import st.slex.csplashscreen.data.model.ui.collection.CollectionModel
1314

1415
class CollectionsPagingSource @AssistedInject constructor(

‎app/src/main/java/st/slex/csplashscreen/ui/components/Animation.kt‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package st.slex.csplashscreen.ui.components
22

33
import android.annotation.SuppressLint
4+
import androidx.compose.foundation.lazy.LazyListLayoutInfo
45
import androidx.compose.ui.Modifier
56
import androidx.compose.ui.graphics.graphicsLayer
67
import com.google.accompanist.pager.ExperimentalPagerApi
@@ -29,4 +30,13 @@ fun Modifier.animationUtilPager(scope: PagerScope, page: Int): Modifier = this
2930
1f,
3031
1f - pageOffset.coerceIn(0f, 1f)
3132
)
32-
}
33+
}
34+
35+
fun LazyListLayoutInfo.normalizedItemPosition(key: Any): Float =
36+
visibleItemsInfo
37+
.firstOrNull { it.key == key }
38+
?.let {
39+
val center = (viewportEndOffset + viewportStartOffset - it.size) / 2F
40+
(it.offset.toFloat() - center) / center
41+
}
42+
?: 0F

‎app/src/main/java/st/slex/csplashscreen/ui/components/CollectionsColumn.kt‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,22 @@ import st.slex.csplashscreen.data.model.ui.collection.CollectionModel
2222
fun CollectionItem(
2323
item: CollectionModel?,
2424
modifier: Modifier,
25-
navController: NavController
25+
navController: NavController,
26+
isUserVisible: Boolean = true
2627
) {
2728

2829
Column(
29-
modifier = modifier
30-
.padding(start = 16.dp, end = 16.dp, top = 32.dp, bottom = 16.dp)
31-
.fillMaxWidth()
30+
modifier = modifier.fillMaxWidth()
3231
) {
3332

34-
UserImageHeadWithUserName(
35-
modifier = Modifier.fillMaxWidth(),
36-
url = item?.user?.profile_image?.medium.toString(),
37-
username = item?.user?.username.toString(),
38-
navController = navController
39-
)
33+
if (isUserVisible) {
34+
UserImageHeadWithUserName(
35+
modifier = Modifier.fillMaxWidth(),
36+
url = item?.user?.profile_image?.medium.toString(),
37+
username = item?.user?.username.toString(),
38+
navController = navController
39+
)
40+
}
4041

4142
Spacer(modifier = Modifier.padding(4.dp))
4243

‎app/src/main/java/st/slex/csplashscreen/ui/components/PhotosColumn.kt‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,27 +55,29 @@ fun LazyPhotosColumn(
5555
fun ImageItem(
5656
item: ImageModel?,
5757
modifier: Modifier,
58-
navController: NavController
58+
navController: NavController,
59+
isUserVisible: Boolean = true
5960
) {
6061
Column(
6162
modifier = modifier
62-
.padding(start = 16.dp, end = 16.dp, top = 32.dp, bottom = 16.dp)
6363
.fillMaxWidth()
6464
) {
6565

66-
UserImageHeadWithUserName(
67-
modifier = Modifier.fillMaxWidth(),
68-
url = item?.user?.profile_image?.medium.toString(),
69-
username = item?.user?.username.toString(),
70-
navController = navController
71-
)
66+
if (isUserVisible) {
67+
UserImageHeadWithUserName(
68+
modifier = Modifier.fillMaxWidth(),
69+
url = item?.user?.profile_image?.medium.toString(),
70+
username = item?.user?.username.toString(),
71+
navController = navController
72+
)
73+
}
7274

7375
Spacer(modifier = Modifier.padding(4.dp))
7476

7577
Surface(
7678
modifier = Modifier
7779
.clip(RoundedCornerShape(32.dp))
78-
.shadow(elevation = 16.dp, shape = Shapes.medium),
80+
.shadow(elevation = 4.dp, shape = Shapes.medium),
7981
onClick = {
8082
val url = item?.urls?.regular
8183
val id = item?.id

‎app/src/main/java/st/slex/csplashscreen/ui/components/UserComponents.kt‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Spacer
55
import androidx.compose.foundation.layout.padding
66
import androidx.compose.foundation.layout.size
77
import androidx.compose.foundation.shape.RoundedCornerShape
8+
import androidx.compose.material.Card
89
import androidx.compose.material.ExperimentalMaterialApi
910
import androidx.compose.material.Surface
1011
import androidx.compose.runtime.Composable
@@ -27,10 +28,8 @@ fun UserImageHeadWithUserName(
2728
username: String,
2829
navController: NavController
2930
) {
30-
Surface(
31-
modifier = modifier
32-
.shadow(elevation = 16.dp, Shapes.medium)
33-
.clip(RoundedCornerShape(16.dp)),
31+
Card(
32+
modifier = modifier,
3433
onClick = {
3534
navController.navigate("${NavDest.UserScreen.destination}/$username")
3635
}

‎app/src/main/java/st/slex/csplashscreen/ui/screens/main/MainScreen.kt‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import androidx.compose.runtime.*
88
import androidx.compose.ui.Modifier
99
import androidx.compose.ui.graphics.Color
1010
import androidx.compose.ui.platform.LocalContext
11+
import androidx.compose.ui.unit.dp
1112
import androidx.lifecycle.viewmodel.compose.viewModel
1213
import androidx.navigation.NavController
1314
import androidx.paging.compose.LazyPagingItems
@@ -86,22 +87,24 @@ private fun Pager(
8687
lazyPagingCollectionsItems: LazyPagingItems<CollectionModel>,
8788
navController: NavController,
8889
pagerState: PagerState,
89-
pages: List<PagerMainTab>
90+
pages: List<PagerMainTab>,
9091
) {
9192
HorizontalPager(
9293
count = pages.size,
9394
state = pagerState
9495
) { page ->
95-
LazyColumn {
96+
LazyColumn() {
9697
when (pages[page]) {
9798
is PagerMainTab.Photos -> {
9899
items(lazyPagingPhotosItems) { item ->
99100
ImageItem(
100101
item = item,
101-
modifier = Modifier.animationUtilPager(
102-
scope = this@HorizontalPager,
103-
page = page
104-
),
102+
modifier = Modifier
103+
.padding(start = 16.dp, end = 16.dp, top = 32.dp, bottom = 16.dp)
104+
.animationUtilPager(
105+
scope = this@HorizontalPager,
106+
page = page
107+
),
105108
navController = navController
106109
)
107110
}
@@ -112,10 +115,12 @@ private fun Pager(
112115
items(lazyPagingCollectionsItems) { item ->
113116
CollectionItem(
114117
item = item,
115-
modifier = Modifier.animationUtilPager(
116-
scope = this@HorizontalPager,
117-
page = page
118-
),
118+
modifier = Modifier
119+
.padding(start = 16.dp, end = 16.dp, top = 32.dp, bottom = 16.dp)
120+
.animationUtilPager(
121+
scope = this@HorizontalPager,
122+
page = page
123+
),
119124
navController = navController
120125
)
121126

‎app/src/main/java/st/slex/csplashscreen/ui/screens/topics/TopicsScreen.kt‎

Lines changed: 36 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,33 @@ import android.annotation.SuppressLint
44
import androidx.compose.animation.ExperimentalAnimationApi
55
import androidx.compose.foundation.Image
66
import androidx.compose.foundation.layout.*
7+
import androidx.compose.foundation.lazy.LazyListLayoutInfo
8+
import androidx.compose.foundation.lazy.LazyListState
9+
import androidx.compose.foundation.lazy.LazyRow
10+
import androidx.compose.foundation.lazy.rememberLazyListState
711
import androidx.compose.material.ExperimentalMaterialApi
812
import androidx.compose.material.Surface
913
import androidx.compose.material.Text
1014
import androidx.compose.runtime.Composable
1115
import androidx.compose.ui.Alignment
1216
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.graphics.graphicsLayer
1318
import androidx.compose.ui.layout.ContentScale
1419
import androidx.compose.ui.platform.LocalContext
1520
import androidx.compose.ui.unit.dp
1621
import androidx.lifecycle.viewmodel.compose.viewModel
1722
import androidx.navigation.NavController
1823
import androidx.paging.compose.collectAsLazyPagingItems
24+
import androidx.paging.compose.items
1925
import coil.annotation.ExperimentalCoilApi
2026
import coil.compose.rememberImagePainter
2127
import coil.transform.RoundedCornersTransformation
22-
import com.google.accompanist.pager.*
28+
import com.google.accompanist.pager.ExperimentalPagerApi
2329
import kotlinx.coroutines.ExperimentalCoroutinesApi
2430
import st.slex.csplashscreen.ui.MainActivity
25-
import st.slex.csplashscreen.ui.components.animationUtilPager
31+
import st.slex.csplashscreen.ui.components.normalizedItemPosition
2632
import st.slex.csplashscreen.ui.theme.Typography
33+
import kotlin.math.absoluteValue
2734

2835

2936
@ExperimentalAnimationApi
@@ -35,32 +42,36 @@ import st.slex.csplashscreen.ui.theme.Typography
3542
@Composable
3643
fun TopicsScreen(
3744
navController: NavController,
38-
pagerState: PagerState = rememberPagerState(),
3945
viewModel: TopicsViewModel = viewModel(factory = (LocalContext.current as MainActivity).viewModelFactory.get())
4046
) {
4147
val lazyPagingItems = viewModel.topics.collectAsLazyPagingItems()
42-
val paddingValues = PaddingValues(start = 32.dp, end = 32.dp, top = 128.dp, bottom = 128.dp)
43-
HorizontalPager(
44-
count = lazyPagingItems.itemCount,
45-
state = pagerState,
46-
contentPadding = paddingValues
47-
) { horizontalPage ->
48-
Column(
49-
modifier = Modifier
50-
.animationUtilPager(
51-
scope = this@HorizontalPager,
52-
page = horizontalPage
48+
val state: LazyListState = rememberLazyListState()
49+
LazyRow(state = state) {
50+
items(lazyPagingItems, key = { it.id }) { item ->
51+
Column(
52+
modifier = Modifier
53+
.graphicsLayer {
54+
val value =
55+
1 - (state.layoutInfo.normalizedItemPosition(item?.id!!).absoluteValue * 0.15F)
56+
alpha = value
57+
scaleX = value
58+
scaleY = value
59+
}
60+
.width(250.dp)
61+
.fillMaxHeight(),
62+
verticalArrangement = Arrangement.Center
63+
) {
64+
Text(
65+
text = item?.title.toString(),
66+
style = Typography.h5,
67+
maxLines = 1
5368
)
54-
) {
55-
Text(
56-
text = lazyPagingItems[horizontalPage]?.title.toString(),
57-
style = Typography.h5,
58-
maxLines = 1
59-
)
60-
ItemImage(
61-
lazyPagingItems[horizontalPage]?.cover_photo?.urls?.regular.toString(),
62-
)
69+
ItemImage(
70+
item?.cover_photo?.urls?.regular.toString(),
71+
)
72+
}
6373
}
74+
6475
}
6576
}
6677

@@ -83,3 +94,5 @@ private fun ItemImage(url: String) {
8394
)
8495
}
8596
}
97+
98+

0 commit comments

Comments
 (0)