forked from google/accompanist
/
Placeholder.kt
262 lines (243 loc) · 9.99 KB
/
Placeholder.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
/*
* Copyright 2021 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.google.accompanist.placeholder
import androidx.compose.animation.core.FiniteAnimationSpec
import androidx.compose.animation.core.InfiniteRepeatableSpec
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.Transition
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.core.updateTransition
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.geometry.toRect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.drawOutline
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.node.Ref
import androidx.compose.ui.platform.debugInspectorInfo
import androidx.compose.ui.unit.LayoutDirection
/**
* Contains default values used by [Modifier.placeholder] and [PlaceholderHighlight].
*/
object PlaceholderDefaults {
/**
* The default [InfiniteRepeatableSpec] to use for [fade].
*/
val fadeAnimationSpec: InfiniteRepeatableSpec<Float> by lazy {
infiniteRepeatable(
animation = tween(delayMillis = 200, durationMillis = 600),
repeatMode = RepeatMode.Reverse,
)
}
/**
* The default [InfiniteRepeatableSpec] to use for [shimmer].
*/
val shimmerAnimationSpec: InfiniteRepeatableSpec<Float> by lazy {
infiniteRepeatable(
animation = tween(durationMillis = 1700, delayMillis = 200),
repeatMode = RepeatMode.Restart
)
}
}
/**
* Draws some skeleton UI which is typically used whilst content is 'loading'.
*
* A version of this modifier which uses appropriate values for Material themed apps is available
* in the 'Placeholder Material' library.
*
* You can provide a [PlaceholderHighlight] which runs an highlight animation on the placeholder.
* The [shimmer] and [fade] implementations are provided for easy usage.
*
* A cross-fade transition will be applied to the content and placeholder UI when the [visible]
* value changes. The transition can be customized via the [contentFadeTransitionSpec] and
* [placeholderFadeTransitionSpec] parameters.
*
* You can find more information on the pattern at the Material Theming
* [Placeholder UI](https://material.io/design/communication/launch-screen.html#placeholder-ui)
* guidelines.
*
* @sample com.google.accompanist.sample.placeholder.DocSample_Foundation_Placeholder
*
* @param visible whether the placeholder should be visible or not.
* @param color the color used to draw the placeholder UI.
* @param shape desired shape of the placeholder. Defaults to [RectangleShape].
* @param highlight optional highlight animation.
* @param placeholderFadeTransitionSpec The transition spec to use when fading the placeholder
* on/off screen. The boolean parameter defined for the transition is [visible].
* @param contentFadeTransitionSpec The transition spec to use when fading the content
* on/off screen. The boolean parameter defined for the transition is [visible].
*/
fun Modifier.placeholder(
visible: Boolean,
color: Color,
shape: Shape = RectangleShape,
highlight: PlaceholderHighlight? = null,
placeholderFadeTransitionSpec: @Composable Transition.Segment<Boolean>.() -> FiniteAnimationSpec<Float> = { spring() },
contentFadeTransitionSpec: @Composable Transition.Segment<Boolean>.() -> FiniteAnimationSpec<Float> = { spring() },
): Modifier = composed(
inspectorInfo = debugInspectorInfo {
name = "placeholder"
value = visible
properties["visible"] = visible
properties["color"] = color
properties["highlight"] = highlight
properties["shape"] = shape
}
) {
// Values used for caching purposes
val lastSize = remember { Ref<Size>() }
val lastLayoutDirection = remember { Ref<LayoutDirection>() }
val lastOutline = remember { Ref<Outline>() }
// The current highlight animation progress
var highlightProgress: Float by remember { mutableStateOf(0f) }
// This is our crossfade transition
val transitionState = remember { MutableTransitionState(visible) }.apply {
targetState = visible
}
val transition = updateTransition(transitionState, "placeholder_crossfade")
val placeholderAlpha by transition.animateFloat(
transitionSpec = placeholderFadeTransitionSpec,
label = "placeholder_fade",
targetValueByState = { placeholderVisible -> if (placeholderVisible) 1f else 0f }
)
val contentAlpha by transition.animateFloat(
transitionSpec = contentFadeTransitionSpec,
label = "content_fade",
targetValueByState = { placeholderVisible -> if (placeholderVisible) 0f else 1f }
)
// Run the optional animation spec and update the progress if the placeholder is visible
val animationSpec = highlight?.animationSpec
if (animationSpec != null && (visible || placeholderAlpha >= 0.01f)) {
val infiniteTransition = rememberInfiniteTransition()
highlightProgress = infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 1f,
animationSpec = animationSpec,
).value
}
val paint = remember { Paint() }
remember(color, shape, highlight) {
drawWithContent {
// Draw the composable content first
if (contentAlpha in 0.01f..0.99f) {
// If the content alpha is between 1% and 99%, draw it in a layer with
// the alpha applied
paint.alpha = contentAlpha
withLayer(paint) {
with(this@drawWithContent) {
drawContent()
}
}
} else if (contentAlpha >= 0.99f) {
// If the content alpha is > 99%, draw it with no alpha
drawContent()
}
if (placeholderAlpha in 0.01f..0.99f) {
// If the placeholder alpha is between 1% and 99%, draw it in a layer with
// the alpha applied
paint.alpha = placeholderAlpha
withLayer(paint) {
lastOutline.value = drawPlaceholder(
shape = shape,
color = color,
highlight = highlight,
progress = highlightProgress,
lastOutline = lastOutline.value,
lastLayoutDirection = lastLayoutDirection.value,
lastSize = lastSize.value,
)
}
} else if (placeholderAlpha >= 0.99f) {
// If the placeholder alpha is > 99%, draw it with no alpha
lastOutline.value = drawPlaceholder(
shape = shape,
color = color,
highlight = highlight,
progress = highlightProgress,
lastOutline = lastOutline.value,
lastLayoutDirection = lastLayoutDirection.value,
lastSize = lastSize.value,
)
}
// Keep track of the last size & layout direction
lastSize.value = size
lastLayoutDirection.value = layoutDirection
}
}
}
private fun DrawScope.drawPlaceholder(
shape: Shape,
color: Color,
highlight: PlaceholderHighlight?,
progress: Float,
lastOutline: Outline?,
lastLayoutDirection: LayoutDirection?,
lastSize: Size?,
): Outline? {
// shortcut to avoid Outline calculation and allocation
if (shape === RectangleShape) {
// Draw the initial background color
drawRect(color = color)
if (highlight != null) {
drawRect(
brush = highlight.brush(progress, size),
alpha = highlight.alpha(progress),
)
}
// We didn't create an outline so return null
return null
}
// Otherwise we need to create an outline from the shape
val outline = lastOutline.takeIf {
size == lastSize && layoutDirection == lastLayoutDirection
} ?: shape.createOutline(size, layoutDirection, this)
// Draw the placeholder color
drawOutline(outline = outline, color = color)
if (highlight != null) {
drawOutline(
outline = outline,
brush = highlight.brush(progress, size),
alpha = highlight.alpha(progress),
)
}
// Return the outline we used
return outline
}
private inline fun DrawScope.withLayer(
paint: Paint,
drawBlock: DrawScope.() -> Unit,
) = drawIntoCanvas { canvas ->
canvas.saveLayer(size.toRect(), paint)
drawBlock()
canvas.restore()
}