Skip to content

Commit c07d659

Browse files
levinzonrlevinzonr
committed
feat: Update demo for the Slider
1 parent 0d870bb commit c07d659

File tree

3 files changed

+145
-79
lines changed

3 files changed

+145
-79
lines changed

‎demo/src/main/java/io/monstarlab/mosaic/features/SliderDemo.kt

Lines changed: 138 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,40 @@
11
package io.monstarlab.mosaic.features
22

3+
import androidx.compose.animation.animateColor
4+
import androidx.compose.animation.core.LinearEasing
5+
import androidx.compose.animation.core.RepeatMode
6+
import androidx.compose.animation.core.animateFloat
7+
import androidx.compose.animation.core.infiniteRepeatable
8+
import androidx.compose.animation.core.rememberInfiniteTransition
9+
import androidx.compose.animation.core.tween
310
import androidx.compose.foundation.background
411
import androidx.compose.foundation.layout.Arrangement
512
import androidx.compose.foundation.layout.Box
613
import androidx.compose.foundation.layout.Column
714
import androidx.compose.foundation.layout.Row
15+
import androidx.compose.foundation.layout.Spacer
16+
import androidx.compose.foundation.layout.fillMaxWidth
17+
import androidx.compose.foundation.layout.height
818
import androidx.compose.foundation.layout.padding
919
import androidx.compose.foundation.layout.size
1020
import androidx.compose.foundation.shape.CircleShape
21+
import androidx.compose.foundation.shape.RoundedCornerShape
22+
import androidx.compose.material3.MaterialTheme
1123
import androidx.compose.material3.Scaffold
24+
import androidx.compose.material3.Switch
1225
import androidx.compose.material3.Text
1326
import androidx.compose.runtime.Composable
1427
import androidx.compose.runtime.getValue
1528
import androidx.compose.runtime.mutableFloatStateOf
29+
import androidx.compose.runtime.mutableStateOf
1630
import androidx.compose.runtime.remember
1731
import androidx.compose.runtime.setValue
32+
import androidx.compose.ui.Alignment
1833
import androidx.compose.ui.Modifier
34+
import androidx.compose.ui.draw.clip
35+
import androidx.compose.ui.draw.rotate
1936
import androidx.compose.ui.graphics.Color
37+
import androidx.compose.ui.text.style.TextAlign
2038
import androidx.compose.ui.tooling.preview.Preview
2139
import androidx.compose.ui.unit.dp
2240
import io.monstarlab.mosaic.slider.Slider
@@ -41,99 +59,147 @@ fun SliderDemo() = Scaffold(modifier = Modifier) {
4159
onValueChange = { materialSliderValue = it },
4260
valueRange = 0f..100f,
4361
)
44-
Text(text = materialSliderValue.toString())
4562

46-
MosaicSliderDemo(
47-
label = "Linear division strategy",
48-
range = 0f..1000f,
49-
valuesDistribution = SliderValueDistribution.Linear,
50-
disabledRange = 0f..500f,
63+
MosaicSliderDemo()
64+
}
65+
}
66+
67+
@Composable
68+
fun MosaicSliderDemo() {
69+
Column {
70+
val colors = SliderColors(
71+
activeTrackColor = Color.Black,
72+
disabledRangeTrackColor = Color.Red,
73+
thumbColor = Color.Yellow,
5174
)
52-
MosaicSliderDemo(
53-
label = "Parabolic",
54-
range = 0f..1000f,
55-
disabledRange = 800f..1000f,
56-
valuesDistribution = SliderValueDistribution.parabolic(
75+
var enabled by remember { mutableStateOf(true) }
76+
var isCustom by remember { mutableStateOf(false) }
77+
var linearDistribution by remember { mutableStateOf(false) }
78+
79+
val modifier = if (isCustom) {
80+
Modifier
81+
.clip(RoundedCornerShape(16.dp))
82+
.height(15.dp)
83+
} else {
84+
Modifier
85+
}
86+
87+
val parabolic: SliderValueDistribution = remember {
88+
SliderValueDistribution.parabolic(
5789
a = (1000 - 100 * 0.1f) / (1000 * 1000),
5890
b = 0.1f,
5991
c = 1f,
60-
),
92+
)
93+
}
94+
95+
val state = rememberSliderState(
96+
value = 500f,
97+
valueDistribution = if (linearDistribution) {
98+
SliderValueDistribution.Linear
99+
} else {
100+
parabolic
101+
},
102+
range = 0f..1000f,
61103
)
62104

63105
Slider(
64-
state = rememberSliderState(value = 0.5f),
65-
colors = SliderColors(Color.Magenta, Color.Red),
106+
modifier = modifier,
107+
enabled = enabled,
108+
state = state,
109+
colors = colors,
110+
thumb = {
111+
if (isCustom) {
112+
val transition = rememberInfiniteTransition(label = "")
113+
val color = transition.animateColor(
114+
initialValue = Color.Red,
115+
targetValue = Color.Green,
116+
animationSpec = infiniteRepeatable(
117+
animation = tween(1000, easing = LinearEasing),
118+
repeatMode = RepeatMode.Reverse,
119+
),
120+
label = "",
121+
)
122+
123+
val rotation = transition.animateFloat(
124+
initialValue = 0f,
125+
targetValue = 360f,
126+
animationSpec = infiniteRepeatable(
127+
tween(5000, easing = LinearEasing),
128+
repeatMode = RepeatMode.Restart,
129+
),
130+
label = "",
131+
)
132+
133+
Box(
134+
modifier = Modifier
135+
.rotate(rotation.value)
136+
.size(48.dp)
137+
.background(color.value),
138+
)
139+
} else {
140+
Box(
141+
modifier = Modifier
142+
.size(16.dp)
143+
.background(colors.thumbColor(enabled), CircleShape),
144+
)
145+
}
146+
},
147+
148+
)
149+
150+
Text(
151+
text = "Current value: ${state.value.roundToInt()}",
152+
modifier = Modifier.align(Alignment.CenterHorizontally),
153+
textAlign = TextAlign.Center,
154+
style = MaterialTheme.typography.bodyLarge,
155+
)
156+
157+
Row(
158+
horizontalArrangement = Arrangement.SpaceBetween,
159+
modifier = Modifier
160+
.fillMaxWidth()
161+
.padding(top = 32.dp),
66162
) {
67-
Box(
68-
modifier = Modifier
69-
.size(32.dp)
70-
.background(Color.Black),
163+
LabeledSwitch(
164+
label = "Slider enabled",
165+
checked = enabled,
166+
onValueChange = { enabled = it },
71167
)
72-
}
73168

74-
Slider(
75-
state = rememberSliderState(value = 0.5f),
76-
colors = SliderColors(Color.Black),
77-
enabled = true,
78-
) {
79-
Box(modifier = Modifier.background(Color.Red, shape = CircleShape).size(32.dp))
169+
LabeledSwitch(
170+
label = "Customise",
171+
checked = isCustom,
172+
onValueChange = { isCustom = it },
173+
)
80174
}
81175

82-
var v by remember { mutableFloatStateOf(0.5f) }
83-
Slider(
84-
value = v,
85-
onValueChange = { v = it },
86-
colors = SliderColors(Color.Black),
87-
enabled = false,
88-
) {
89-
Box(modifier = Modifier.background(Color.Red, shape = CircleShape).size(32.dp))
90-
}
176+
LabeledSwitch(
177+
label = "Use linear distribution or parabolic",
178+
checked = linearDistribution,
179+
onValueChange = { linearDistribution = it },
180+
modifier = Modifier.align(Alignment.CenterHorizontally),
181+
)
91182
}
92183
}
93184

94185
@Composable
95-
fun MosaicSliderDemo(
186+
private fun LabeledSwitch(
96187
label: String,
97-
range: ClosedFloatingPointRange<Float>,
98-
valuesDistribution: SliderValueDistribution,
188+
checked: Boolean,
189+
onValueChange: (Boolean) -> Unit,
99190
modifier: Modifier = Modifier,
100-
disabledRange: ClosedFloatingPointRange<Float> = 0f..0f,
101191
) {
102-
Column(modifier) {
103-
Text(text = label)
192+
Column(
193+
modifier = modifier,
194+
horizontalAlignment = Alignment.CenterHorizontally,
104195

105-
var value by remember { mutableFloatStateOf(50f) }
106-
Row(
107-
horizontalArrangement = Arrangement.Start,
108-
modifier = Modifier,
109-
) {
110-
Text(
111-
text = range.start.toString(),
112-
modifier = Modifier.weight(0.2f),
113-
)
114-
Slider(
115-
modifier = Modifier.weight(0.8f),
116-
value = value,
117-
onValueChange = { value = it },
118-
colors = SliderColors(Color.Black, disabledRangeTrackColor = Color.Red),
119-
range = range,
120-
valueDistribution = valuesDistribution,
121-
disabledRange = disabledRange,
122-
thumb = {
123-
Box(
124-
modifier = Modifier
125-
.size(32.dp)
126-
.background(Color.Yellow),
127-
) {
128-
Text(text = value.roundToInt().toString())
129-
}
130-
},
131-
)
132-
Text(
133-
text = range.endInclusive.toString(),
134-
modifier = Modifier.weight(0.2f),
135-
)
136-
}
196+
) {
197+
Text(text = label, textAlign = TextAlign.Center)
198+
Spacer(modifier = Modifier.height(3.dp))
199+
Switch(
200+
checked = checked,
201+
onCheckedChange = onValueChange,
202+
)
137203
}
138204
}
139205

‎slider/src/main/java/io/monstarlab/mosaic/slider/Slider.kt

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@ public fun Slider(
7575
* A composable function that creates a slider UI component.
7676
* @param state of the Slider where the latest slider value is stored
7777
* @param colors the colors used to customize the appearance of the slider
78-
* @param modifier the modifier to be applied to the slider,
78+
* @param modifier the modifier to be applied to the slider overall. Use to manipulate the behaviour in other layouts,
79+
* @param trackModifier - Modifier to be applied to the Track, U
7980
* @param enabled - determines whether the user can interact with the slide or not
8081
* @param interactionSource the interaction source used to handle user input interactions
8182
* @param thumb the composable function used to render the slider thumb
@@ -90,22 +91,21 @@ public fun Slider(
9091
thumb: @Composable (SliderState) -> Unit,
9192
) {
9293
val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
93-
val tap = Modifier.sliderTapModifier(state, enabled, interactionSource)
94-
val drag = Modifier.sliderDragModifier(state, enabled, interactionSource, isRtl)
9594

9695
SliderLayout(
97-
modifier = modifier
96+
modifier = Modifier
9897
.sliderSemantics(state, enabled)
9998
.focusable(enabled, interactionSource)
100-
.then(tap)
101-
.then(drag),
99+
.sliderTapModifier(state, enabled, interactionSource)
100+
.sliderDragModifier(state, enabled, interactionSource, isRtl),
102101
thumb = thumb,
103102
track = {
104103
SliderTrack(
105104
progress = state.valueAsFraction,
106105
colors = colors,
107106
disabledRange = state.disabledRangeAsFractions,
108107
enabled = enabled,
108+
modifier = modifier,
109109
)
110110
},
111111
state = state,

‎slider/src/main/java/io/monstarlab/mosaic/slider/SliderColors.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ public class SliderColors(
3939
* Color of the thumb when the Slider is disabled
4040
* Only applied when the default thumb is used
4141
*/
42-
public val disabledThumbColor: Color = disabledRangeTrackColor,
42+
public val disabledThumbColor: Color = inactiveTrackColor,
4343
) {
4444
@Stable
4545
public fun activeTrackColor(enabled: Boolean): Color {

0 commit comments

Comments
 (0)