/
ParallaxToolbar.kt
87 lines (81 loc) 路 3.15 KB
/
ParallaxToolbar.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
package com.piashcse.compose_museum.screens
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Checkbox
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import me.onebone.toolbar.CollapsingToolbarScaffold
import me.onebone.toolbar.ScrollStrategy
import me.onebone.toolbar.rememberCollapsingToolbarScaffoldState
import com.piashcse.compose_museum.R
@Composable
fun ParallaxEffect(navController: NavController) {
val state = rememberCollapsingToolbarScaffoldState()
var enabled by remember { mutableStateOf(true) }
Box {
CollapsingToolbarScaffold(
modifier = Modifier.fillMaxSize(),
state = state,
scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
toolbarModifier = Modifier.background(MaterialTheme.colors.primary),
enabled = enabled,
toolbar = {
// Collapsing toolbar collapses its size as small as the that of
// a smallest child. To make the toolbar collapse to 50dp, we create
// a dummy Spacer composable.
// You may replace it with TopAppBar or other preferred composable.
Spacer(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
)
Image(
painter = painterResource(id = R.drawable.ic_illustration_shopping),
modifier = Modifier
.parallax(0.5f)
.height(300.dp)
.graphicsLayer {
// change alpha of Image as the toolbar expands
alpha = state.toolbarState.progress
},
contentScale = ContentScale.Crop,
contentDescription = null
)
}
) {
LazyColumn(
modifier = Modifier
.fillMaxSize()
) {
items(
List(100) { "Hello World!! $it" }
) {
Text(
text = it,
modifier = Modifier
.fillMaxWidth()
.padding(4.dp)
)
}
}
}
Row(
verticalAlignment = Alignment.CenterVertically
) {
Checkbox(checked = enabled, onCheckedChange = { enabled = !enabled })
Text("Enable collapse/expand", fontWeight = FontWeight.Bold)
}
}
}