안드로이드 스튜디오 색상 선택하기 Jetpack Compose

색상을 설정하기 위해 원래는 다이얼로그로 7가지 종류의 색상을 설정하고 그 색상을 선택하도록 하였는데

테스터(친구)들에게 피드백을 받은 결과 직접 색상을 생성하여 선택하는 방향으로 만들어 보도록 하였다.

자세한 사항은 코드를 보자

@Composable
fun ColorPickerDialog(
    initialColor: Color = Color.Red, //초기색상
    onDismiss: () -> Unit,
    onColorSelected: (Color) -> Unit
) {
    var hue by remember { mutableStateOf(0f) }      // 색상 (0~360°)
    var saturation by remember { mutableStateOf(1f) } // 채도 (0~1)
    var lightness by remember { mutableStateOf(0.5f) } // 밝기 (0~1)

    // 초기 색상을 HSL 값으로 변환
    LaunchedEffect(initialColor) {
        val hsl = FloatArray(3)
        Color.run { colorToHSV(initialColor.toArgb(), hsl) }
        hue = hsl[0]
        saturation = hsl[1]
        lightness = hsl[2]
    }

    val selectedColor = Color.hsl(hue, saturation, lightness)

    Dialog(onDismissRequest = onDismiss) {
        Surface(
            shape = RoundedCornerShape(12.dp),
            color = MaterialTheme.colorScheme.surface,
            modifier = Modifier.padding(16.dp)
        ) {
            Column(
                modifier = Modifier.padding(20.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "색상 선택", style = MaterialTheme.typography.titleLarge)

                // 선택된 색상 미리보기
                Box(
                    modifier = Modifier
                        .size(100.dp)
                        .background(selectedColor, RoundedCornerShape(50.dp))
                        .padding(8.dp)
                )

                Spacer(modifier = Modifier.height(16.dp))

                // 색상 선택 슬라이더 (Hue)
                Text(text = "색상 (Hue)")
                Slider(
                    value = hue,
                    onValueChange = { hue = it },
                    valueRange = 0f..360f
                )

                // 채도 선택 슬라이더 (Saturation)
                Text(text = "채도 (Saturation)")
                Slider(
                    value = saturation,
                    onValueChange = { saturation = it },
                    valueRange = 0f..1f
                )

                // 밝기 선택 슬라이더 (Lightness)
                Text(text = "밝기 (Lightness)")
                Slider(
                    value = lightness,
                    onValueChange = { lightness = it },
                    valueRange = 0f..1f
                )

                Spacer(modifier = Modifier.height(16.dp))

                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    TextButton(onClick = onDismiss) {
                        Text("취소")
                    }
                    Button(onClick = { onColorSelected(selectedColor) }) {
                        Text("확인")
                    }
                }
            }
        }
    }
}

HSL, HSB는 인간이 지각하는 색과 가깝게 색상을 정의하는 가장 기본적인 색상 모델이며 RGB 색상 모델의 대체 표현이라고 한다
출처: https://carrotdesign.tistory.com/entry/UI-color-system-RGB-HSL-HSB [Carrot's storage:티스토리]

원 형태로 설정한 색상을 미리 볼 수 있도록 하고 슬라이더를 통해 색상,채도,밝기를 설정하여 원하는 색상을 결정할 수 있도록 하였다

이러한 기능을 알게 되어 신기했고 다음에 다른 곳에서도 적용할 수 있을 것 같아 지식쌓기에 도움이 되었다

아래는 코드를 실행한 모습이다