Skip to content

Commit abf57ee

Browse files
abbasiehsan1991abbasiehsan1991
authored
Add circular behavior in the carousel component also make code more readable (#114)
* seperate code and make it more readable * Send carousel at end of items to the first one, Also some minor changes in naming applied
1 parent 8868086 commit abf57ee

File tree

12 files changed

+349
-242
lines changed

12 files changed

+349
-242
lines changed

‎.idea/kotlinScripting.xml‎

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

‎app/src/main/java/com/guru/composecookbook/ui/home/advancelists/AdvanceListsActivity.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ fun AdvanceListContent() {
8484
}
8585
Pager(state = pagerState, modifier = Modifier.weight(1f)) {
8686
selectedIndex = pagerState.currentPage
87-
when (page) {
87+
when (commingPage) {
8888
0 -> ShimmerList()
8989
1 -> AnimatedLists()
9090
2 -> SwipeableLists()

‎components/carousel/src/main/java/com/guru/composecookbook/carousel/CarouselDot.kt‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
package com.guru.composecookbook.carousel
2+
3+
import androidx.compose.foundation.layout.padding
4+
import androidx.compose.foundation.layout.size
5+
import androidx.compose.material.Icon
6+
import androidx.compose.material.MaterialTheme
7+
import androidx.compose.material.icons.Icons
8+
import androidx.compose.material.icons.filled.Album
9+
import androidx.compose.material.icons.filled.Favorite
10+
import androidx.compose.material.icons.filled.Lens
11+
import androidx.compose.runtime.Composable
12+
import androidx.compose.ui.Modifier
13+
import androidx.compose.ui.graphics.Color
14+
import androidx.compose.ui.graphics.vector.ImageVector
15+
import androidx.compose.ui.tooling.preview.Preview
16+
import androidx.compose.ui.unit.dp
17+
18+
@Composable
19+
fun CarouselDot(selected: Boolean, color: Color, icon: ImageVector) {
20+
Icon(
21+
imageVector = icon,
22+
modifier = Modifier
23+
.padding(4.dp)
24+
.size(12.dp),
25+
contentDescription = null,
26+
tint = if (selected) color else Color.Gray
27+
)
28+
}
29+
30+
@Preview
31+
@Composable
32+
fun PreviewPaginationPionters() {
33+
CarouselDot(
34+
true,
35+
MaterialTheme.colors.onPrimary,
36+
Icons.Filled.Lens
37+
)
38+
CarouselDot(
39+
true,
40+
MaterialTheme.colors.onPrimary,
41+
Icons.Filled.Album
42+
)
43+
CarouselDot(
44+
true,
45+
MaterialTheme.colors.error,
46+
Icons.Filled.Favorite
47+
)
48+
}

‎components/carousel/src/main/java/com/guru/composecookbook/carousel/CarouselLayout.kt‎

Lines changed: 77 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import androidx.compose.foundation.shape.CircleShape
88
import androidx.compose.foundation.shape.RoundedCornerShape
99
import androidx.compose.foundation.verticalScroll
1010
import androidx.compose.material.Card
11-
import androidx.compose.material.Icon
1211
import androidx.compose.material.MaterialTheme
1312
import androidx.compose.material.Text
1413
import androidx.compose.material.icons.Icons
@@ -23,7 +22,6 @@ import androidx.compose.ui.Alignment
2322
import androidx.compose.ui.Modifier
2423
import androidx.compose.ui.draw.clip
2524
import androidx.compose.ui.graphics.Color
26-
import androidx.compose.ui.graphics.vector.ImageVector
2725
import androidx.compose.ui.layout.ContentScale
2826
import androidx.compose.ui.res.painterResource
2927
import androidx.compose.ui.tooling.preview.Preview
@@ -36,73 +34,18 @@ import com.guru.composecookbook.theme.typography
3634
@Composable
3735
fun CarouselLayout() {
3836
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
39-
val items = remember { DemoDataProvider.itemList.take(10) }
37+
val items = remember { DemoDataProvider.itemList.take(5) }
4038
val pagerState: PagerState = run {
41-
remember { PagerState(2, 0, items.size - 1) }
39+
remember { PagerState(1, 0, items.size - 1) }
4240
}
4341
val selectedPage = remember { mutableStateOf(2) }
4442

45-
Pager(state = pagerState, modifier = Modifier.height(200.dp)) {
46-
val item = items[page]
47-
selectedPage.value = pagerState.currentPage
48-
CarouselItem(item)
49-
}
50-
Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
51-
items.forEachIndexed { index, _ ->
52-
CarouselDot(
53-
selected = index == selectedPage.value,
54-
MaterialTheme.colors.primary,
55-
Icons.Filled.Lens
56-
)
57-
}
58-
}
59-
Spacer(modifier = Modifier.height(24.dp))
60-
//Pager 2
61-
Pager(state = pagerState, modifier = Modifier.height(200.dp)) {
62-
val item = items[page]
63-
selectedPage.value = pagerState.currentPage
64-
CarouselItemCircle(item)
65-
}
66-
Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
67-
items.forEachIndexed { index, _ ->
68-
CarouselDot(
69-
selected = index == selectedPage.value,
70-
MaterialTheme.colors.error,
71-
Icons.Filled.Favorite
72-
)
73-
}
74-
}
75-
Spacer(modifier = Modifier.height(24.dp))
76-
//Pager 3
77-
Pager(state = pagerState, modifier = Modifier.height(350.dp)) {
78-
val item = items[page]
79-
selectedPage.value = pagerState.currentPage
80-
CarouselItemCard(item, pagerState, selectedPage)
81-
}
82-
Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
83-
items.forEachIndexed { index, _ ->
84-
CarouselDot(
85-
selected = index == selectedPage.value,
86-
MaterialTheme.colors.secondary,
87-
Icons.Filled.Album
88-
)
89-
}
90-
}
43+
PrepareFirstPager(pagerState, items, selectedPage)
44+
PrepareSecondPager(pagerState, items, selectedPage)
45+
PrepareThirdPager(pagerState, items, selectedPage)
9146
}
9247
}
9348

94-
@Composable
95-
fun CarouselDot(selected: Boolean, color: Color, icon: ImageVector) {
96-
Icon(
97-
imageVector = icon,
98-
modifier = Modifier
99-
.padding(4.dp)
100-
.size(12.dp),
101-
contentDescription = null,
102-
tint = if (selected) color else Color.Gray
103-
)
104-
}
105-
10649
@Composable
10750
fun CarouselItem(item: Item) {
10851
Box {
@@ -177,6 +120,78 @@ fun CarouselItemCard(item: Item, pagerState: PagerState, selectedPage: MutableSt
177120

178121
}
179122

123+
@Composable
124+
private fun ColumnScope.PrepareFirstPager(
125+
pagerState: PagerState,
126+
items: List<Item>,
127+
selectedPage: MutableState<Int>
128+
) {
129+
Pager(
130+
state = pagerState,
131+
modifier = Modifier.height(200.dp)
132+
) {
133+
val item = items[commingPage]
134+
selectedPage.value = pagerState.currentPage
135+
CarouselItem(item)
136+
}
137+
138+
Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
139+
items.forEachIndexed { index, _ ->
140+
CarouselDot(
141+
selected = index == selectedPage.value,
142+
MaterialTheme.colors.primary,
143+
Icons.Filled.Lens
144+
)
145+
}
146+
}
147+
148+
Spacer(modifier = Modifier.height(24.dp))
149+
}
150+
151+
@Composable
152+
private fun ColumnScope.PrepareSecondPager(
153+
pagerState: PagerState,
154+
items: List<Item>,
155+
selectedPage: MutableState<Int>
156+
) {
157+
Pager(state = pagerState, modifier = Modifier.height(200.dp)) {
158+
val item = items[commingPage]
159+
selectedPage.value = pagerState.currentPage
160+
CarouselItemCircle(item)
161+
}
162+
Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
163+
items.forEachIndexed { index, _ ->
164+
CarouselDot(
165+
selected = index == selectedPage.value,
166+
MaterialTheme.colors.error,
167+
Icons.Filled.Favorite
168+
)
169+
}
170+
}
171+
Spacer(modifier = Modifier.height(24.dp))
172+
}
173+
174+
@Composable
175+
private fun ColumnScope.PrepareThirdPager(
176+
pagerState: PagerState,
177+
items: List<Item>,
178+
selectedPage: MutableState<Int>
179+
) {
180+
Pager(state = pagerState, modifier = Modifier.height(350.dp)) {
181+
val item = items[commingPage]
182+
selectedPage.value = pagerState.currentPage
183+
CarouselItemCard(item, pagerState, selectedPage)
184+
}
185+
Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
186+
items.forEachIndexed { index, _ ->
187+
CarouselDot(
188+
selected = index == selectedPage.value,
189+
MaterialTheme.colors.secondary,
190+
Icons.Filled.Album
191+
)
192+
}
193+
}
194+
}
180195

181196
@Preview
182197
@Composable

‎components/carousel/src/main/java/com/guru/composecookbook/carousel/PageData.kt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
package com.guru.composecookbook.carousel
2+
3+
import androidx.compose.runtime.Immutable
4+
import androidx.compose.ui.layout.ParentDataModifier
5+
import androidx.compose.ui.unit.Density
6+
7+
@Immutable
8+
internal data class PageData(val page: Int) : ParentDataModifier {
9+
override fun Density.modifyParentData(parentData: Any?): Any = this@PageData
10+
}

0 commit comments

Comments
 (0)