Skip to content

Commit 3c87dd0

Browse files
SmartToolFactorySmartToolFactory
committed
add demo sliders
1 parent 8a9f86c commit 3c87dd0

File tree

3 files changed

+842
-0
lines changed

3 files changed

+842
-0
lines changed

‎app/src/main/java/com/smarttoolfactory/composematerialslider/demo/ColorfulSliderDemo.kt‎

Lines changed: 320 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,320 @@
1+
package com.smarttoolfactory.composematerialslider.demo
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.fillMaxSize
6+
import androidx.compose.foundation.layout.offset
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.rememberScrollState
9+
import androidx.compose.foundation.shape.RoundedCornerShape
10+
import androidx.compose.foundation.verticalScroll
11+
import androidx.compose.material.Text
12+
import androidx.compose.runtime.*
13+
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.draw.shadow
15+
import androidx.compose.ui.geometry.Offset
16+
import androidx.compose.ui.graphics.Color
17+
import androidx.compose.ui.layout.onSizeChanged
18+
import androidx.compose.ui.text.font.FontWeight
19+
import androidx.compose.ui.unit.IntOffset
20+
import androidx.compose.ui.unit.dp
21+
import androidx.compose.ui.unit.sp
22+
import com.smarttoolfactory.composematerialslider.ui.theme.Blue400
23+
import com.smarttoolfactory.composematerialslider.ui.theme.Green400
24+
import com.smarttoolfactory.composematerialslider.ui.theme.Red400
25+
import com.smarttoolfactory.composematerialslider.ui.theme.Yellow400
26+
import com.smarttoolfactory.composematerialslider.ui.theme.brush.*
27+
import com.smarttoolfactory.slider.ColorfulSlider
28+
import com.smarttoolfactory.slider.MaterialSliderDefaults
29+
import com.smarttoolfactory.slider.SliderBrushColor
30+
import kotlin.math.roundToInt
31+
32+
@Composable
33+
fun ColorfulSliderDemo() {
34+
35+
Column(
36+
modifier = Modifier
37+
.verticalScroll(rememberScrollState())
38+
.fillMaxSize()
39+
.padding(20.dp)
40+
) {
41+
42+
var progress1 by remember { mutableStateOf(0f) }
43+
44+
TitleText("Thumb radius and track height")
45+
46+
Text("Progress: $progress1")
47+
ColorfulSlider(
48+
value = progress1,
49+
onValueChange = { value ->
50+
progress1 = value
51+
},
52+
colors = MaterialSliderDefaults.defaultColors()
53+
)
54+
55+
ColorfulSlider(
56+
value = progress1,
57+
thumbRadius = 10.dp,
58+
trackHeight = 12.dp,
59+
onValueChange = { value ->
60+
progress1 = value
61+
},
62+
colors = MaterialSliderDefaults.defaultColors()
63+
)
64+
65+
ColorfulSlider(
66+
value = progress1,
67+
thumbRadius = 16.dp,
68+
trackHeight = 12.dp,
69+
onValueChange = { value ->
70+
progress1 = value
71+
},
72+
colors = MaterialSliderDefaults.defaultColors()
73+
)
74+
75+
ColorfulSlider(
76+
value = progress1,
77+
thumbRadius = 5.dp,
78+
trackHeight = 12.dp,
79+
onValueChange = { value ->
80+
progress1 = value
81+
},
82+
colors = MaterialSliderDefaults.defaultColors()
83+
)
84+
85+
86+
TitleText("Draw Inactive Color Selection")
87+
var progress2 by remember { mutableStateOf(0f) }
88+
89+
ColorfulSlider(
90+
value = progress2,
91+
thumbRadius = 10.dp,
92+
trackHeight = 10.dp,
93+
onValueChange = { it ->
94+
progress2 = it
95+
},
96+
colors = MaterialSliderDefaults.materialColors()
97+
)
98+
99+
ColorfulSlider(
100+
value = progress2,
101+
thumbRadius = 10.dp,
102+
trackHeight = 10.dp,
103+
onValueChange = { it ->
104+
progress2 = it
105+
},
106+
colors = MaterialSliderDefaults.materialColors(),
107+
drawInactiveTrack = false
108+
)
109+
110+
TitleText("Thumb and/or track color/brush")
111+
var progress3 by remember { mutableStateOf(0f) }
112+
113+
ColorfulSlider(
114+
value = progress3,
115+
thumbRadius = 10.dp,
116+
trackHeight = 10.dp,
117+
onValueChange = { it ->
118+
progress3 = it
119+
},
120+
colors = MaterialSliderDefaults.materialColors()
121+
)
122+
ColorfulSlider(
123+
value = progress3,
124+
thumbRadius = 10.dp,
125+
trackHeight = 10.dp,
126+
onValueChange = { it ->
127+
progress3 = it
128+
},
129+
colors = MaterialSliderDefaults.materialColors(
130+
activeTrackColor = SliderBrushColor(
131+
brush = sliderHueHSVGradient(),
132+
),
133+
),
134+
drawInactiveTrack = false
135+
)
136+
137+
ColorfulSlider(
138+
value = progress3,
139+
thumbRadius = 10.dp,
140+
trackHeight = 10.dp,
141+
onValueChange = { it ->
142+
progress3 = it
143+
},
144+
colors = MaterialSliderDefaults.materialColors(
145+
thumbColor = SliderBrushColor(
146+
brush = silverGradient()
147+
),
148+
activeTrackColor = SliderBrushColor(
149+
brush = silverGradient(),
150+
),
151+
),
152+
drawInactiveTrack = false
153+
)
154+
155+
ColorfulSlider(
156+
value = progress3,
157+
thumbRadius = 10.dp,
158+
trackHeight = 10.dp,
159+
onValueChange = { it ->
160+
progress3 = it
161+
},
162+
colors = MaterialSliderDefaults.materialColors(
163+
thumbColor = SliderBrushColor(
164+
color = Yellow400
165+
),
166+
activeTrackColor = SliderBrushColor(
167+
brush = goldGradient(),
168+
),
169+
),
170+
drawInactiveTrack = false
171+
)
172+
173+
ColorfulSlider(
174+
value = progress3,
175+
thumbRadius = 10.dp,
176+
trackHeight = 10.dp,
177+
onValueChange = { it ->
178+
progress3 = it
179+
},
180+
colors = MaterialSliderDefaults.materialColors(
181+
activeTrackColor = SliderBrushColor(
182+
brush = sugarGradient(),
183+
),
184+
)
185+
)
186+
187+
ColorfulSlider(
188+
value = progress3,
189+
thumbRadius = 10.dp,
190+
trackHeight = 10.dp,
191+
onValueChange = { it ->
192+
progress3 = it
193+
},
194+
colors = MaterialSliderDefaults.materialColors(
195+
activeTrackColor = SliderBrushColor(
196+
brush = sunsetGradient(),
197+
),
198+
)
199+
)
200+
TitleText("Sliders that return value and offset")
201+
Column(modifier = Modifier.padding(horizontal = 24.dp)) {
202+
var labelProgress by remember { mutableStateOf(0f) }
203+
var labelOffset by remember { mutableStateOf(Offset.Zero) }
204+
205+
var labelWidth = 0
206+
Text(text = "Label",
207+
modifier = Modifier
208+
.offset {
209+
IntOffset(labelOffset.x.toInt() - labelWidth / 2, labelOffset.y.toInt())
210+
}
211+
.onSizeChanged {
212+
labelWidth = it.width
213+
}
214+
.shadow(1.dp, shape = RoundedCornerShape(10.dp))
215+
.background(Red400, shape = RoundedCornerShape(10.dp))
216+
.padding(5.dp),
217+
color = Color.White
218+
)
219+
220+
ColorfulSlider(
221+
value = labelProgress,
222+
onValueChange = { value, offset ->
223+
labelProgress = value
224+
labelOffset = offset
225+
},
226+
thumbRadius = 10.dp,
227+
trackHeight = 10.dp,
228+
colors = MaterialSliderDefaults.materialColors()
229+
)
230+
}
231+
232+
Column(modifier = Modifier.padding(horizontal = 24.dp)) {
233+
var labelProgress by remember { mutableStateOf(0f) }
234+
var labelOffset by remember { mutableStateOf(Offset.Zero) }
235+
var labelText by remember { mutableStateOf("Price $0") }
236+
237+
var labelWidth by remember { mutableStateOf(0) }
238+
Text(text = labelText,
239+
modifier = Modifier
240+
.offset {
241+
IntOffset(labelOffset.x.toInt() - labelWidth / 2, labelOffset.y.toInt())
242+
}
243+
.onSizeChanged {
244+
labelWidth = it.width
245+
}
246+
.shadow(1.dp, shape = RoundedCornerShape(10.dp))
247+
.background(Green400, shape = RoundedCornerShape(10.dp))
248+
.padding(5.dp),
249+
color = Color.White
250+
)
251+
252+
ColorfulSlider(
253+
value = labelProgress,
254+
onValueChange = { value, offset ->
255+
labelProgress = value
256+
labelOffset = offset
257+
labelText = "Price $${value.roundToInt()}"
258+
},
259+
thumbRadius = 10.dp,
260+
trackHeight = 10.dp,
261+
valueRange = 0f..100f,
262+
colors = MaterialSliderDefaults.materialColors()
263+
)
264+
265+
}
266+
267+
TitleText("coerceThumbInTrack Option")
268+
var progress4 by remember { mutableStateOf(0f) }
269+
270+
ColorfulSlider(
271+
value = progress4,
272+
thumbRadius = 10.dp,
273+
trackHeight = 30.dp,
274+
onValueChange = { it ->
275+
progress4 = it
276+
},
277+
colors = MaterialSliderDefaults.materialColors(),
278+
coerceThumbInTrack = false
279+
280+
)
281+
282+
ColorfulSlider(
283+
value = progress4,
284+
thumbRadius = 10.dp,
285+
trackHeight = 30.dp,
286+
onValueChange = { it ->
287+
progress4 = it
288+
},
289+
colors = MaterialSliderDefaults.materialColors(),
290+
coerceThumbInTrack = true
291+
)
292+
293+
294+
295+
// ColorfulIconSlider(
296+
// modifier = Modifier.width(240.dp),
297+
// value = red,
298+
// onValueChange = { value, offset ->
299+
// red = value
300+
// },
301+
// trackHeight = 12.dp
302+
// ) {
303+
// Box(contentAlignment = Alignment.Center, modifier = Modifier.padding(2.dp)) {
304+
// Text(text = "😱", fontSize = 40.sp)
305+
// }
306+
// }
307+
308+
}
309+
}
310+
311+
@Composable
312+
private fun TitleText(text: String) {
313+
Text(
314+
text = text,
315+
color = Blue400,
316+
fontSize = 14.sp,
317+
fontWeight = FontWeight.Bold,
318+
modifier = Modifier.padding(2.dp)
319+
)
320+
}

0 commit comments

Comments
 (0)