컴포즈 시작하기

현재 안드로이드 공식 사이트에서 컴포즈를 현재 따라 쳐보면서 뜯어 보고 있다
modifer를 통해서 해당 View의 속성을 정의 하는것같다.

package com.example.composetest

import android.os.Bundle
import android.widget.Button
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role.Companion.Button
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composetest.ui.theme.ComposeTestTheme
import androidx.compose.material3.Button
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeTestTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
//                    Greeting(
//                        name = "Android",
//                        modifier = Modifier.padding(innerPadding)
//                    )
                    Greeting2(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}


/**
 * modifier를 통한 text의 속성을 정의 할 수 있다.
 */
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
// 컬럼 값 Column, row, box로 거의 모든 것을 표현가능
    Column(modifier = modifier.padding(24.dp)) {
        Text(text = "$name test1")
        Text(text = "$name test2")
    }

//  일반적인 뷰
//    Text(
//        text = "Hello $name!",
//        modifier = modifier.padding(24.dp)
//    )
}

@Composable
fun Greeting2(name: String, modifier: Modifier = Modifier) {
    Surface(color = MaterialTheme.colorScheme.primary) {
        Column(modifier = modifier.padding(24.dp)) {
            Text(text = "$name Hellow1")
            Text(text = "$name Hellow2")
        }
    }
}


@Composable
fun Greeting3(
    name: String,
    modifier: Modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
) {
    Surface(color = MaterialTheme.colorScheme.primary) {
        Column(modifier = modifier.padding(24.dp)) {
            Text(text = "Hello ")
            Text(text = name)
        }
    }
}

@Composable
fun Greeting4(name: String, modifier: Modifier = Modifier) {
    Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello ")
                Text(text = name)
            }
            ElevatedButton(

                onClick = { /* TODO */ }
            ) {
                Text("Show more")
            }
        }
    }
}

@Composable
fun Greeting5(name: String) {
    val expanded = remember { mutableStateOf(false) }
    val extraPadding = if (expanded.value) 48.dp else 0.dp

    Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(
                modifier = Modifier
                    .weight(1f)
                    .padding(bottom = extraPadding)
            ) {
                Text(text = "Hello, ")
                Text(text = name)
            }
            ElevatedButton(
                onClick = { expanded.value = !expanded.value }
            ) {
                Text(if (expanded.value) "Show less" else " Show more")
            }
        }
    }
}

@Composable
fun MyApp(
    modifier: Modifier = Modifier,
    names: List<String> = listOf("World", "Compose")
) {
// 일반적인 글자 크기에 따른 컴럼 범위와 로우 범위
    //    Column(modifier = modifier.padding(vertical = 4.dp)) {
//        for (name in names) {
//            Greeting3(name = name)
//        }

//    }

// 일정한 간격의 컬럼과 로우 범위를 가지는 뷰 리스트뷰와 비슷
//    Column(modifier = modifier.padding(vertical = 4.dp)) {
//        for (name in names) {
//            Greeting4(name = name)
//        }
//    }
    Column(modifier = modifier.padding(vertical = 4.dp)) {
        for (name in names) {
            Greeting5(name = name)
        }
    }
}

/**
 * preview 미리보기로 해당 함수는 여러개를 만들고 각각의 이름을 지어줄 수 있습니다.
 */
@Preview(showBackground = true, name = "test_preview")
@Composable
fun GreetingPreview() {
    ComposeTestTheme {
//        Greeting("Android")
//        Greeting2("Android2")
        MyApp()
    }
}

조금씩 시간이 없기 때문에...(식자는 8시 반에 집에오기때문에...출퇴근 2시간......ㅠㅠ)
최대한 천천히 뜯어보려고 한다.
알아가보자