Skip to content

Commit 8848717

Browse files
SmartToolFactorySmartToolFactory
committed
update slider docs, and SliderWithCircleDisplay
1 parent 6b52be8 commit 8848717

File tree

3 files changed

+148
-135
lines changed

3 files changed

+148
-135
lines changed

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

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ fun ColorfulSliderDemo() {
6161
RGBASliderDisplayPanelExample(modifier, sliderModifier, boxModifier)
6262

6363
// Sliders with Circle Color display on left
64-
SliderCircleColorDisplayHSLExamples(modifier, sliderModifier, boxModifier)
65-
SliderCircleColorDisplayHSVExamples(modifier, sliderModifier, boxModifier)
64+
SliderCircleColorDisplayHSLExamples(modifier, sliderModifier)
65+
SliderCircleColorDisplayHSVExamples(modifier, sliderModifier)
6666

6767
}
6868
}
@@ -600,24 +600,18 @@ private fun RGBASliderDisplayPanelExample(
600600
@Composable
601601
private fun SliderCircleColorDisplayHSVExamples(
602602
modifier: Modifier,
603-
sliderModifier: Modifier,
604-
boxModifier: Modifier
603+
sliderModifier: Modifier
605604
) {
606605
val hue by remember { mutableStateOf(0f) }
607606
var saturation by remember { mutableStateOf(.5f) }
608607
var value by remember { mutableStateOf(.5f) }
609608
var alpha by remember { mutableStateOf(1f) }
610609

611-
val colorHSV = Color.hsv(hue = hue, saturation = saturation, value = value, alpha = alpha)
612-
613610
Title(text = "HSV SliderCircleColorDisplays")
614611
Column(
615612
modifier = modifier,
616613
horizontalAlignment = Alignment.CenterHorizontally
617614
) {
618-
619-
Box(modifier = boxModifier.background(colorHSV))
620-
621615
Title(text = "SliderCircleColorDisplay Saturation-Alpha")
622616
SliderCircleColorDisplaySaturationHSV(
623617
modifier = sliderModifier,
@@ -645,24 +639,18 @@ private fun SliderCircleColorDisplayHSVExamples(
645639
@Composable
646640
private fun SliderCircleColorDisplayHSLExamples(
647641
modifier: Modifier,
648-
sliderModifier: Modifier,
649-
boxModifier: Modifier
642+
sliderModifier: Modifier
650643
) {
651644
val hue by remember { mutableStateOf(0f) }
652645
var saturation by remember { mutableStateOf(.5f) }
653646
var lightness by remember { mutableStateOf(.5f) }
654647
var alpha by remember { mutableStateOf(1f) }
655648

656-
val colorHSL =
657-
Color.hsl(hue = hue, saturation = saturation, lightness = lightness, alpha = alpha)
658-
659649
Title(text = "HSL SliderCircleColorDisplays")
660650
Column(
661651
modifier = modifier,
662652
horizontalAlignment = Alignment.CenterHorizontally
663653
) {
664-
Box(modifier = boxModifier.background(colorHSL))
665-
666654
Title(text = "SliderCircleColorDisplay Saturation-Alpha")
667655
SliderCircleColorDisplaySaturationHSL(
668656
modifier = sliderModifier,

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/Slider.kt‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -204,11 +204,6 @@ fun SliderLightnessHSL(
204204
lightness: Float,
205205
onValueChange: (Float) -> Unit
206206
) {
207-
208-
// val sliderLightnessGradient = if (gradientStops!=2)
209-
// sliderLightnessGradient3Stops(hue)
210-
// else sliderLightnessGradient(hue)
211-
212207
val sliderLightnessGradient = sliderLightnessGradient(hue, saturation)
213208

214209
CheckeredColorfulSlider(

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/SliderWithCircleDisplay.kt‎

Lines changed: 144 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,20 @@ import androidx.compose.ui.Modifier
99
import androidx.compose.ui.draw.clip
1010
import androidx.compose.ui.graphics.Color
1111
import androidx.compose.ui.unit.dp
12-
13-
12+
import com.smarttoolfactory.slider.ColorfulSlider
13+
14+
/**
15+
* Slider with Circle on left and 2 sliders on right side that display [saturation] and [alpha]
16+
* for HSV color model. This composable requires minimum
17+
* 100.dp height, giving a height lower than this might break its layout.
18+
*
19+
* @param hue in [0..1f]
20+
* @param saturation in [0..1f]
21+
* @param value in [0..1f]
22+
* @param alpha in [0..1f]
23+
* @param onSaturationChange callback that returns change in [saturation] when Slider is dragged
24+
* @param onAlphaChange callback that returns change in [alpha] when Slider is dragged
25+
*/
1426
@Composable
1527
fun SliderCircleColorDisplaySaturationHSV(
1628
modifier: Modifier = Modifier,
@@ -21,43 +33,36 @@ fun SliderCircleColorDisplaySaturationHSV(
2133
onSaturationChange: (Float) -> Unit,
2234
onAlphaChange: (Float) -> Unit,
2335
) {
24-
25-
Row(
26-
modifier = modifier
27-
.requiredHeightIn(min = 100.dp, max = 120.dp)
28-
.padding(horizontal = 8.dp, vertical = 0.dp)
29-
.padding(horizontal = 8.dp, vertical = 0.dp),
30-
verticalAlignment = Alignment.CenterVertically
36+
SliderWithCircleDisplay(
37+
modifier = modifier,
38+
color = Color.hsv(hue, saturation, value, alpha)
3139
) {
32-
33-
Box(
34-
modifier = Modifier
35-
.padding(10.dp)
36-
.clip(CircleShape)
37-
.fillMaxHeight()
38-
.aspectRatio(1f)
39-
.drawChecker(CircleShape)
40-
.background(Color.hsv(hue, saturation, value, alpha))
40+
SliderSaturationHSV(
41+
hue = hue,
42+
saturation = saturation,
43+
value = 1f,
44+
onValueChange = onSaturationChange
45+
)
46+
SliderAlphaHSV(
47+
hue = hue,
48+
alpha = alpha,
49+
onValueChange = onAlphaChange
4150
)
42-
43-
Column(
44-
verticalArrangement = Arrangement.SpaceAround
45-
) {
46-
SliderSaturationHSV(
47-
hue = hue,
48-
saturation = saturation,
49-
value = 1f,
50-
onValueChange = onSaturationChange
51-
)
52-
SliderAlphaHSV(
53-
hue = hue,
54-
alpha = alpha,
55-
onValueChange = onAlphaChange
56-
)
57-
}
5851
}
5952
}
6053

54+
/**
55+
* Slider with Circle on left and 2 sliders on right side that display [value] and [alpha]
56+
* for HSV color model. This composable requires minimum
57+
* 100.dp height, giving a height lower than this might break its layout.
58+
*
59+
* @param hue in [0..1f]
60+
* @param saturation in [0..1f]
61+
* @param value in [0..1f]
62+
* @param alpha in [0..1f]
63+
* @param onValueChange callback that returns change in [value] when Slider is dragged
64+
* @param onAlphaChange callback that returns change in [alpha] when Slider is dragged
65+
*/
6166
@Composable
6267
fun SliderCircleColorDisplayValueHSV(
6368
modifier: Modifier = Modifier,
@@ -68,40 +73,36 @@ fun SliderCircleColorDisplayValueHSV(
6873
onValueChange: (Float) -> Unit,
6974
onAlphaChange: (Float) -> Unit,
7075
) {
71-
Row(
72-
modifier = modifier
73-
.requiredHeightIn(min = 100.dp, max = 120.dp)
74-
.padding(horizontal = 8.dp, vertical = 0.dp),
75-
verticalAlignment = Alignment.CenterVertically
76-
) {
7776

78-
Box(
79-
modifier = Modifier
80-
.padding(10.dp)
81-
.clip(CircleShape)
82-
.fillMaxHeight()
83-
.aspectRatio(1f)
84-
.drawChecker(CircleShape)
85-
.background(Color.hsv(hue, saturation, value, alpha))
77+
SliderWithCircleDisplay(
78+
modifier = modifier,
79+
color = Color.hsv(hue, saturation, value, alpha)
80+
) {
81+
SliderValueHSV(
82+
hue = hue,
83+
value = value,
84+
onValueChange = onValueChange
85+
)
86+
SliderAlphaHSV(
87+
hue = hue,
88+
alpha = alpha,
89+
onValueChange = onAlphaChange
8690
)
87-
88-
Column(
89-
verticalArrangement = Arrangement.SpaceAround
90-
) {
91-
SliderValueHSV(
92-
hue = hue,
93-
value = value,
94-
onValueChange = onValueChange
95-
)
96-
SliderAlphaHSV(
97-
hue = hue,
98-
alpha = alpha,
99-
onValueChange = onAlphaChange
100-
)
101-
}
10291
}
10392
}
10493

94+
/**
95+
* Slider with Circle on left and 2 sliders on right side that display [saturation] and [alpha]
96+
* for HSL color model. This composable requires minimum
97+
* 100.dp height, giving a height lower than this might break its layout.
98+
*
99+
* @param hue in [0..1f]
100+
* @param saturation in [0..1f]
101+
* @param lightness in [0..1f]
102+
* @param alpha in [0..1f]
103+
* @param onSaturationChange callback that returns change in [saturation] when Slider is dragged
104+
* @param onAlphaChange callback that returns change in [alpha] when Slider is dragged
105+
*/
105106
@Composable
106107
fun SliderCircleColorDisplaySaturationHSL(
107108
modifier: Modifier = Modifier,
@@ -112,40 +113,32 @@ fun SliderCircleColorDisplaySaturationHSL(
112113
onSaturationChange: (Float) -> Unit,
113114
onAlphaChange: (Float) -> Unit,
114115
) {
115-
Row(modifier = modifier) {
116-
117-
Row(
118-
modifier = modifier
119-
.requiredHeightIn(min = 100.dp, max = 120.dp)
120-
.padding(horizontal = 8.dp, vertical = 0.dp),
121-
verticalAlignment = Alignment.CenterVertically
122-
) {
123-
124-
Box(
125-
modifier = Modifier
126-
.padding(10.dp)
127-
.clip(CircleShape)
128-
.fillMaxHeight()
129-
.aspectRatio(1f)
130-
.drawChecker(CircleShape)
131-
.background(Color.hsl(hue, saturation, lightness, alpha))
132-
)
133-
134-
Column(
135-
verticalArrangement = Arrangement.SpaceAround
136-
) {
137-
SliderSaturationHSL(
138-
hue = hue,
139-
saturation = saturation,
140-
lightness = lightness,
141-
onValueChange = onSaturationChange
142-
)
143-
SliderAlphaHSL(hue = hue, alpha = alpha, onValueChange = onAlphaChange)
144-
}
145-
}
116+
SliderWithCircleDisplay(
117+
modifier = modifier,
118+
color = Color.hsl(hue, saturation, lightness, alpha)
119+
) {
120+
SliderSaturationHSL(
121+
hue = hue,
122+
saturation = saturation,
123+
lightness = lightness,
124+
onValueChange = onSaturationChange
125+
)
126+
SliderAlphaHSL(hue = hue, alpha = alpha, onValueChange = onAlphaChange)
146127
}
147128
}
148129

130+
/**
131+
* Slider with Circle on left and 2 sliders on right side that display [lightness] and [alpha]
132+
* for HSL color model. This composable requires minimum
133+
* 100.dp height, giving a height lower than this might break its layout.
134+
*
135+
* @param hue in [0..1f]
136+
* @param saturation in [0..1f]
137+
* @param lightness in [0..1f]
138+
* @param alpha in [0..1f]
139+
* @param onLightnessChange callback that returns change in [lightness] when Slider is dragged
140+
* @param onAlphaChange callback that returns change in [alpha] when Slider is dragged
141+
*/
149142
@Composable
150143
fun SliderCircleColorDisplayLightnessHSL(
151144
modifier: Modifier = Modifier,
@@ -155,35 +148,72 @@ fun SliderCircleColorDisplayLightnessHSL(
155148
alpha: Float,
156149
onLightnessChange: (Float) -> Unit,
157150
onAlphaChange: (Float) -> Unit,
151+
) {
152+
SliderWithCircleDisplay(
153+
modifier = modifier,
154+
color = Color.hsl(hue, saturation, lightness, alpha)
155+
) {
156+
SliderLightnessHSL(
157+
hue = hue,
158+
saturation = saturation,
159+
lightness = lightness,
160+
onValueChange = onLightnessChange
161+
)
162+
SliderAlphaHSL(hue = hue, alpha = alpha, onValueChange = onAlphaChange)
163+
}
164+
}
165+
166+
/**
167+
* Slider with Circle on left and 2 sliders on right side. This composable requires minimum
168+
* 100.dp height, giving a height lower than this might break its layout.
169+
*
170+
* * [ColorfulSlider] requires min height of 48.dp and with 2 sliders min height should be 96.dp
171+
* * [CircleDisplay] has min height and width of 80 dp.
172+
*
173+
* @param circleModifier modifier for [CircleDisplay]
174+
* @param color color of [CircleDisplay]
175+
* @param content 2 sliders that either show Saturation or lightness for HSV and alpha, or
176+
* Saturation or Value and alpha for HSV.
177+
*/
178+
@Composable
179+
fun SliderWithCircleDisplay(
180+
modifier: Modifier = Modifier,
181+
circleModifier: Modifier = Modifier,
182+
color: Color,
183+
content: @Composable () -> Unit
158184
) {
159185
Row(
160-
modifier = modifier
161-
.requiredHeightIn(min = 100.dp, max = 120.dp)
162-
.padding(horizontal = 8.dp, vertical = 0.dp),
186+
modifier = modifier.requiredHeightIn(min = 100.dp),
163187
verticalAlignment = Alignment.CenterVertically
164188
) {
165-
166-
Box(
167-
modifier = Modifier
168-
.padding(10.dp)
169-
.clip(CircleShape)
170-
.fillMaxHeight()
171-
.aspectRatio(1f)
172-
.drawChecker(CircleShape)
173-
.background(Color.hsl(hue, saturation, lightness, alpha))
189+
CircleDisplay(
190+
modifier = circleModifier
191+
.widthIn(min = 80.dp)
192+
.heightIn(min = 80.dp),
193+
color = color
174194
)
175-
195+
Spacer(modifier = Modifier.width(10.dp))
176196
Column(
177197
verticalArrangement = Arrangement.SpaceAround
178198
) {
179-
SliderLightnessHSL(
180-
hue = hue,
181-
saturation = saturation,
182-
lightness = lightness,
183-
onValueChange = onLightnessChange
184-
)
185-
SliderAlphaHSL(hue = hue, alpha = alpha, onValueChange = onAlphaChange)
199+
content()
186200
}
187201
}
202+
}
188203

204+
/**
205+
* [Box] with [CircleShape] displays [color] as background, and when alpha is lower than 1f
206+
* checker pattern is displayed behind colored background.
207+
*/
208+
@Composable
209+
fun CircleDisplay(
210+
modifier: Modifier = Modifier,
211+
color: Color
212+
) {
213+
Box(
214+
modifier = modifier
215+
.clip(CircleShape)
216+
.drawChecker(CircleShape)
217+
.background(color)
218+
)
189219
}

0 commit comments

Comments
 (0)