Skip to content

Commit 2320940

Browse files
stslexstslex
committed
Init compose Pager
1 parent cba5474 commit 2320940

File tree

6 files changed

+86
-26
lines changed

6 files changed

+86
-26
lines changed

‎.idea/misc.xml‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/build.gradle‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ android {
5050
}
5151

5252
dependencies {
53+
54+
implementation "com.google.accompanist:accompanist-pager:0.19.0"
55+
implementation "com.google.accompanist:accompanist-appcompat-theme:0.16.0"
56+
5357
/*Navigation*/
5458
implementation "androidx.navigation:navigation-compose:2.4.0-alpha10"
5559

@@ -67,9 +71,8 @@ dependencies {
6771

6872
// Lifecycle components
6973
def lifecycleVersion = '2.4.0-rc01'
70-
implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycleVersion"
7174
implementation "androidx.lifecycle:lifecycle-runtime-ktx:$lifecycleVersion"
72-
implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycleVersion"
75+
implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycleVersion"
7376

7477
//Coroutines
7578
api 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.5.1'

‎app/src/main/java/st/slex/csplashscreen/MainActivity.kt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import androidx.navigation.NavHostController
1111
import androidx.navigation.compose.NavHost
1212
import androidx.navigation.compose.composable
1313
import androidx.navigation.compose.rememberNavController
14+
import com.google.accompanist.pager.ExperimentalPagerApi
1415
import dagger.Lazy
1516
import kotlinx.coroutines.ExperimentalCoroutinesApi
1617
import st.slex.csplashscreen.ui.detail.ImageDetailScreen
@@ -27,6 +28,7 @@ class MainActivity : ComponentActivity() {
2728

2829
private val photosViewModel: PhotosViewModel by viewModels { viewModelFactory.get() }
2930

31+
@ExperimentalPagerApi
3032
override fun onCreate(savedInstanceState: Bundle?) {
3133
appComponent.inject(this)
3234
super.onCreate(savedInstanceState)
@@ -44,6 +46,7 @@ class MainActivity : ComponentActivity() {
4446
}
4547
}
4648

49+
@ExperimentalPagerApi
4750
@ExperimentalCoroutinesApi
4851
@Composable
4952
fun NavigationComponent(navController: NavHostController, photosViewModel: PhotosViewModel) {

‎app/src/main/java/st/slex/csplashscreen/data/photos/PhotosPagingSource.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,6 @@ class PhotosPagingSource @AssistedInject constructor(
6565
}
6666

6767
companion object {
68-
const val INITIAL_PAGE_NUMBER = 1
68+
const val INITIAL_PAGE_NUMBER = 0
6969
}
7070
}

‎app/src/main/java/st/slex/csplashscreen/ui/detail/ImageDetailScreen.kt‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ package st.slex.csplashscreen.ui.detail
22

33
import androidx.compose.foundation.Image
44
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.foundation.layout.wrapContentHeight
57
import androidx.compose.material.Text
68
import androidx.compose.runtime.Composable
9+
import androidx.compose.ui.Modifier
710
import androidx.compose.ui.res.painterResource
811
import androidx.compose.ui.tooling.preview.Preview
912
import st.slex.csplashscreen.R
@@ -12,6 +15,9 @@ import st.slex.csplashscreen.R
1215
fun ImageDetailScreen() {
1316
Column {
1417
Image(
18+
modifier = Modifier
19+
.fillMaxWidth()
20+
.wrapContentHeight(),
1521
painter = painterResource(id = R.drawable.ic_launcher_foreground),
1622
contentDescription = "TestImage"
1723
)

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

Lines changed: 70 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,35 @@ package st.slex.csplashscreen.ui.main
22

33
import android.annotation.SuppressLint
44
import androidx.compose.foundation.Image
5-
import androidx.compose.foundation.clickable
6-
import androidx.compose.foundation.layout.fillMaxWidth
7-
import androidx.compose.foundation.layout.height
8-
import androidx.compose.foundation.layout.padding
5+
import androidx.compose.foundation.layout.*
96
import androidx.compose.foundation.lazy.LazyColumn
7+
import androidx.compose.material.Card
8+
import androidx.compose.material.ExperimentalMaterialApi
109
import androidx.compose.runtime.Composable
1110
import androidx.compose.runtime.rememberCoroutineScope
1211
import androidx.compose.ui.Modifier
1312
import androidx.compose.ui.draw.clipToBounds
13+
import androidx.compose.ui.draw.shadow
14+
import androidx.compose.ui.graphics.graphicsLayer
1415
import androidx.compose.ui.unit.dp
1516
import androidx.navigation.NavController
17+
import androidx.paging.compose.LazyPagingItems
1618
import androidx.paging.compose.collectAsLazyPagingItems
1719
import androidx.paging.compose.items
1820
import coil.annotation.ExperimentalCoilApi
1921
import coil.compose.rememberImagePainter
2022
import coil.transform.RoundedCornersTransformation
23+
import com.google.accompanist.pager.ExperimentalPagerApi
24+
import com.google.accompanist.pager.HorizontalPager
25+
import com.google.accompanist.pager.calculateCurrentOffsetForPage
26+
import com.google.android.material.animation.AnimationUtils.lerp
2127
import kotlinx.coroutines.ExperimentalCoroutinesApi
2228
import kotlinx.coroutines.launch
29+
import st.slex.csplashscreen.data.model.ui.image.ImageModel
2330
import st.slex.csplashscreen.utiles.GET_PHOTOS
2431

32+
@ExperimentalMaterialApi
33+
@ExperimentalPagerApi
2534
@ExperimentalCoilApi
2635
@SuppressLint("CoroutineCreationDuringComposition")
2736
@ExperimentalCoroutinesApi
@@ -34,25 +43,63 @@ fun MainScreen(navController: NavController, viewModel: PhotosViewModel) {
3443
}
3544

3645
val lazyPagingItems = viewModel.photos.collectAsLazyPagingItems()
37-
LazyColumn {
38-
items(lazyPagingItems) {
39-
Image(
40-
painter = rememberImagePainter(
41-
data = it?.urls?.regular.toString(),
42-
builder = {
43-
transformations(RoundedCornersTransformation(32F))
44-
}
45-
),
46-
contentDescription = null,
47-
modifier = Modifier
48-
.fillMaxWidth()
49-
.height(300.dp)
50-
.clipToBounds()
51-
.padding(8.dp)
52-
.clickable {
53-
navController.navigate("detail")
54-
}
55-
)
46+
Pager(lazyPagingItems, navController)
47+
}
48+
49+
@SuppressLint("RestrictedApi")
50+
@ExperimentalMaterialApi
51+
@ExperimentalPagerApi
52+
@ExperimentalCoilApi
53+
@Composable
54+
fun Pager(lazyPagingItems: LazyPagingItems<ImageModel>, navController: NavController) {
55+
HorizontalPager(
56+
count = 4,
57+
contentPadding = PaddingValues(),
58+
) { page ->
59+
LazyColumn {
60+
items(lazyPagingItems) {
61+
Card(
62+
modifier = Modifier
63+
.padding(16.dp)
64+
.graphicsLayer {
65+
val pageOffset = calculateCurrentOffsetForPage(page)
66+
lerp(
67+
0.85f,
68+
1f,
69+
1f - pageOffset.coerceIn(0f, 1f)
70+
).also { scale ->
71+
scaleX = scale
72+
scaleY = scale
73+
}
74+
// We animate the alpha, between 50% and 100%
75+
alpha = lerp(
76+
0.5f,
77+
1f,
78+
1f - pageOffset.coerceIn(0f, 1f)
79+
)
80+
}
81+
.aspectRatio(1f)
82+
.shadow(elevation = 8.dp, clip = true),
83+
onClick = { navController.navigate("detail") }
84+
) {
85+
Image(
86+
painter = rememberImagePainter(
87+
data = it?.urls?.regular.toString(),
88+
builder = {
89+
transformations(RoundedCornersTransformation())
90+
allowHardware(false)
91+
crossfade(500)
92+
}
93+
),
94+
contentDescription = null,
95+
modifier = Modifier
96+
.fillMaxWidth()
97+
.height(300.dp)
98+
.clipToBounds()
99+
)
100+
}
101+
102+
}
56103
}
57104
}
58105
}

0 commit comments

Comments
 (0)