[feat] #5 color picker 구현

Chapter03/app/src/main/java/com/syoon/compose/chapter03/MainActivity.kt

@@ -1,43 +1,88 @@
 package com.syoon.compose.chapter03
 
 import android.os.Bundle
+import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.material.Slider
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import com.syoon.compose.chapter03.ui.theme.Chapter03Theme
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.min
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            Chapter03Theme {
-                // A surface container using the 'background' color from the theme
-                Surface(
-                    modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colors.background
+            BoxWithConstraints(
+                contentAlignment = Alignment.Center,
+                modifier = Modifier.fillMaxSize()
+            ) {
+                Column(
+                    modifier = Modifier.width(min(400.dp, maxWidth)),
+                    horizontalAlignment = Alignment.CenterHorizontally
                 ) {
-                    Greeting("Android")
+                    Log.d("###", "재구성")
+                    val color = remember { mutableStateOf(Color.Magenta) }
+                    ColorPicker(color) // slider가 움직일 때마다 color 값이 변경됨
+                    Text(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .background(color.value),
+                        text = "#${color.value.toArgb().toUInt().toString(16)}",
+                        textAlign = TextAlign.Center,
+                        style = MaterialTheme.typography.h4.merge(
+                            TextStyle(
+                                color = color.value.complementary() // 텍스트 컬러는 보색으로 나타남
+                            )
+                        )
+                    )
                 }
             }
         }
     }
 }
 
 @Composable
-fun Greeting(name: String) {
-    Text(text = "Hello $name!")
+fun ColorPicker(color: MutableState<Color>) {
+    // 색 공간을 기반으로 하는 float 반환
+    val red = color.value.red
+    val green = color.value.green
+    val blue = color.value.blue
+    Column {
+        Slider(
+            value = red, // 슬라이더가 나타낼 값 (0~1F 사이)
+            onValueChange = { // 슬라이더 드래그 or 선 터치 시 호출
+                color.value = Color(
+                    it, // onValueChange로 얻는 현재 슬라이더의 새로운 색상
+                    green,
+                    blue,
+                )
+            })
+        Slider(
+            value = green,
+            onValueChange = { color.value = Color(red, it, blue) })
+        Slider(
+            value = blue,
+            onValueChange = { color.value = Color(red, green, it) })
+    }
 }
 
-@Preview(showBackground = true)
-@Composable
-fun DefaultPreview() {
-    Chapter03Theme {
-        Greeting("Android")
-    }
-}
+// Color의 확장함수 - 전달받은 색상의 보색을 연산
+fun Color.complementary() = Color(
+    red = 1F - red,
+    green = 1F - green,
+    blue = 1F - blue
+)