Skip to content

Commit 7b6c468

Browse files
SmartToolFactorySmartToolFactory
committed
add HexDisplay and HexText for displaying colors as HEX
1 parent 4576723 commit 7b6c468

File tree

3 files changed

+202
-1
lines changed

3 files changed

+202
-1
lines changed

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/model/ColorModel.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ package com.smarttoolfactory.colorpicker.model
44
* Color Model HSV(Hue-Saturation-Value), HSL(Hue-Saturation-Lightness), RGB(Red-Green-Blue)
55
*/
66
enum class ColorModel {
7-
HSV, HSL, RGB
7+
RGB, HSV, HSL
88
}

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

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
package com.smarttoolfactory.colorpicker.widget
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.*
5+
import androidx.compose.material.*
6+
import androidx.compose.runtime.*
7+
import androidx.compose.ui.Alignment
8+
import androidx.compose.ui.Modifier
9+
import androidx.compose.ui.graphics.Color
10+
import androidx.compose.ui.text.TextStyle
11+
import androidx.compose.ui.text.font.FontWeight
12+
import androidx.compose.ui.unit.dp
13+
import androidx.compose.ui.unit.sp
14+
import com.smarttoolfactory.colorpicker.model.ColorModel
15+
import com.smarttoolfactory.colorpicker.model.CompositeColor
16+
import com.smarttoolfactory.colorpicker.util.*
17+
18+
@Composable
19+
fun HexDisplay(compositeColor: CompositeColor, colorModel: ColorModel) {
20+
21+
22+
val options = listOf("HEX", "HSV", "HSL")
23+
var index by remember { mutableStateOf(0) }
24+
Row(
25+
verticalAlignment = Alignment.CenterVertically,
26+
modifier = Modifier
27+
.fillMaxWidth()
28+
.padding(2.dp)
29+
) {
30+
ExposedSelectionMenu(
31+
index = index,
32+
options = options,
33+
onSelected = {
34+
index = it
35+
}
36+
)
37+
}
38+
39+
}
40+
41+
42+
@Composable
43+
fun HexDisplay(color: Color, colorModel: ColorModel, onColorModelChange: (ColorModel) -> Unit) {
44+
45+
val options = listOf("HEX", "HSV", "HSL")
46+
var index by remember { mutableStateOf(0) }
47+
Row(
48+
verticalAlignment = Alignment.CenterVertically,
49+
modifier = Modifier
50+
.fillMaxWidth()
51+
.padding(2.dp)
52+
) {
53+
ExposedSelectionMenu(
54+
index = index,
55+
options = options,
56+
onSelected = {
57+
index = it
58+
onColorModelChange(ColorModel.values()[index])
59+
}
60+
)
61+
62+
Row(
63+
modifier = Modifier
64+
.weight(1f)
65+
.background(Color.White),
66+
horizontalArrangement = Arrangement.Start
67+
) {
68+
69+
when (colorModel) {
70+
ColorModel.RGB -> {
71+
ColorText(title = "R", value = color.red.fractionToRGBString())
72+
Spacer(modifier = Modifier.width(20.dp))
73+
ColorText(title = "G", value = color.green.fractionToRGBString())
74+
Spacer(modifier = Modifier.width(20.dp))
75+
ColorText(title = "B", value = color.blue.fractionToRGBString())
76+
Spacer(modifier = Modifier.width(20.dp))
77+
ColorText(title = "A", value = "${color.alpha.fractionToPercent()}%")
78+
}
79+
ColorModel.HSV -> {
80+
val hsvArray = colorToHSV(color)
81+
ColorText(title = "H", value = "${hsvArray[0].round()}")
82+
Spacer(modifier = Modifier.width(20.dp))
83+
ColorText(title = "S", "${hsvArray[1].fractionToPercent()}")
84+
Spacer(modifier = Modifier.width(20.dp))
85+
ColorText(title = "V", "${hsvArray[2].fractionToPercent()}")
86+
Spacer(modifier = Modifier.width(20.dp))
87+
ColorText(title = "A", value = "${color.alpha.fractionToPercent()}%")
88+
}
89+
90+
ColorModel.HSL -> {
91+
val hslArray = colorToHSL(color)
92+
ColorText(title = "H", value = "${hslArray[0].round()}")
93+
Spacer(modifier = Modifier.width(20.dp))
94+
ColorText(title = "S", "${hslArray[1].fractionToPercent()}")
95+
Spacer(modifier = Modifier.width(20.dp))
96+
ColorText(title = "L", "${hslArray[2].fractionToPercent()}")
97+
Spacer(modifier = Modifier.width(20.dp))
98+
ColorText(title = "A", value = "${color.alpha.fractionToPercent()}%")
99+
}
100+
}
101+
}
102+
}
103+
}
104+
105+
@Composable
106+
private fun ColorText(title: String, value: String) {
107+
Column(horizontalAlignment = Alignment.CenterHorizontally) {
108+
Text(
109+
text = title.substring(0, 1),
110+
fontWeight = FontWeight.Bold,
111+
fontSize = 18.sp
112+
113+
)
114+
Spacer(modifier = Modifier.height(4.dp))
115+
Text(text = value, fontSize = 16.sp)
116+
}
117+
}
118+
119+
@OptIn(ExperimentalMaterialApi::class)
120+
@Composable
121+
private fun ExposedSelectionMenu(
122+
modifier: Modifier = Modifier,
123+
index: Int,
124+
options: List<String>,
125+
onSelected: (Int) -> Unit
126+
) {
127+
128+
var expanded by remember { mutableStateOf(false) }
129+
var selectedOptionText by remember { mutableStateOf(options[index]) }
130+
131+
ExposedDropdownMenuBox(
132+
modifier = Modifier.width(120.dp),
133+
expanded = expanded,
134+
onExpandedChange = {
135+
expanded = !expanded
136+
}
137+
) {
138+
TextField(
139+
modifier = Modifier.wrapContentWidth(),
140+
readOnly = true,
141+
value = selectedOptionText,
142+
onValueChange = { },
143+
trailingIcon = {
144+
ExposedDropdownMenuDefaults.TrailingIcon(
145+
expanded = expanded
146+
)
147+
},
148+
colors = ExposedDropdownMenuDefaults.textFieldColors(
149+
backgroundColor = Color.White,
150+
focusedIndicatorColor = Color.Transparent,
151+
unfocusedIndicatorColor = Color.Transparent,
152+
disabledIndicatorColor = Color.Transparent,
153+
),
154+
textStyle = TextStyle(
155+
fontWeight = FontWeight.W600,
156+
fontSize = 18.sp
157+
)
158+
)
159+
ExposedDropdownMenu(
160+
expanded = expanded,
161+
onDismissRequest = {
162+
expanded = false
163+
164+
}
165+
) {
166+
options.forEachIndexed { index: Int, selectionOption: String ->
167+
DropdownMenuItem(
168+
onClick = {
169+
selectedOptionText = selectionOption
170+
expanded = false
171+
onSelected(index)
172+
}
173+
) {
174+
Text(text = selectionOption)
175+
}
176+
}
177+
}
178+
}
179+
}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
package com.smarttoolfactory.colorpicker.widget
2+
3+
import androidx.compose.foundation.text.BasicTextField
4+
import androidx.compose.runtime.Composable
5+
import androidx.compose.ui.graphics.Color
6+
import com.smarttoolfactory.colorpicker.util.argbToHex
7+
8+
@Composable
9+
fun HexText(color: Color, onTextChange: (Color) -> Unit) {
10+
val hexString = argbToHex(
11+
color.alpha,
12+
color.red,
13+
color.green,
14+
color.blue
15+
)
16+
BasicTextField(
17+
value = hexString,
18+
onValueChange = {
19+
20+
}
21+
)
22+
}

0 commit comments

Comments
 (0)