Merge pull request #6 from Just-Android-Compose-Study/feature/#5

Feature/#5

Chapter03/README.md

@@ -0,0 +1,3 @@
+## UI 요소 내보내기 & Modifier
+[UI 요소 내보내기](https://gabby-mail-29f.notion.site/Compose-UI-dbfa88d05fb643bbb3ff533ec8c3c3e6)
+[Modifier](https://gabby-mail-29f.notion.site/a769c17d6c11442bb01573a593af4245)

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

@@ -1,43 +1,170 @@
 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.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Slider
 import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
+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.draw.DrawModifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.ContentDrawScope
+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
-                ) {
-                    Greeting("Android")
-                }
-            }
+
+            //OrderDemo()
+
+            Text(
+                text = "Hello Compose",
+                modifier = Modifier
+                    .fillMaxSize()
+                    .drawYellowCross(),
+                textAlign = TextAlign.Center,
+                style = MaterialTheme.typography.h1
+            )
+
+//            BoxWithConstraints(
+//                contentAlignment = Alignment.Center,
+//                modifier = Modifier.fillMaxSize()
+//            ) {
+//                Column(
+//                    modifier = Modifier.width(min(400.dp, maxWidth)),
+//                    horizontalAlignment = Alignment.CenterHorizontally
+//                ) {
+//                    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() // 텍스트 컬러는 보색으로 나타남
+//                            )
+//                        )
+//                    )
+//                }
+//            }
         }
     }
 }
 
+/**
+ * ColorPicker 예제
+ */
+@Composable
+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) })
+    }
+}
+
+// Color의 확장함수 - 전달받은 색상의 보색을 연산
+fun Color.complementary() = Color(
+    red = 1F - red,
+    green = 1F - green,
+    blue = 1F - blue
+)
+
+/**
+ * ModifierDemo 예제
+ */
+
+// 체이닝에서 변경자의 위치는 변경자가 언제 실행되는지를 결정한다
 @Composable
-fun Greeting(name: String) {
-    Text(text = "Hello $name!")
+fun OrderDemo() {
+    var color by remember { mutableStateOf(Color.Blue) }
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+//            .clickable { // padding 앞으로 이동시키면 간격을 클릭해도 동작한다
+//                color = if (color == Color.Blue)
+//                    Color.Red
+//                else
+//                    Color.Blue
+//            }
+            .padding(32.dp)
+            .border(BorderStroke(width = 2.dp, color = color))
+            .background(Color.LightGray)
+            .clickable {
+                color = if (color == Color.Blue)
+                    Color.Red
+                else
+                    Color.Blue
+            }
+
+
+    )
 }
 
-@Preview(showBackground = true)
 @Composable
-fun DefaultPreview() {
-    Chapter03Theme {
-        Greeting("Android")
+fun TextWithYellowBackground(
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    Text(
+        text = text,
+        modifier = modifier.background(Color.Yellow)
+    )
+}
+
+// 커스텀 변경자
+fun Modifier.drawYellowCross() = then( // 두 변경자를 서로 연결
+    object : DrawModifier {
+        override fun ContentDrawScope.draw() {
+            drawLine(
+                color = Color.Yellow,
+                start = Offset(0F, 0F),
+                end = Offset(size.width - 1, size.height - 1),
+                strokeWidth = 10F
+            )
+            drawLine(
+                color = Color.Yellow,
+                start = Offset(0F, size.height - 1),
+                end = Offset(size.width - 1, 0F),
+                strokeWidth = 10F
+            )
+            drawContent()
+        }
     }
-}
+)

Chapter07/.gradle/buildOutputCleanup/cache.properties

@@ -0,0 +1,2 @@
+#Tue Mar 14 09:00:20 KST 2023
+gradle.version=7.4