Compose 사용하여 Ui만들기

xml 파일을 이용하여 ui를 그리지않고 코드를 사용하여 ui제작하는법

@Composable 키워드

Composable은 특수한 함수이다. Composable을 직접 만들기 위해서는 @Composable키워드를 사용하여야한다.

@Composable를 이용하기 위해서는 해당 라이브러리들을 import해야한다.

컴파일러에게 function을 가져오라는 명령을 하여, 플레임워크에게 이 function은 UI의 일부가 컴포지션과 리컴포지션이 가능하도록 하기 위한것임을 알린다.
UI 요소를 표시하거나 숨기고, 표시방식을 경우에 따라 변경한다.
jetpack Compose가 사용자 인터페이스를 렌더하는데 사용하는 접근 방식이다.

@Composable 키워드를 붙이면 UI의 렌더링과 state(상태)와 data(데이터)가 변하면 자동으로 업데이트 함

@composable 사용해보기

package com.mbsysoft.myunitconverter

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.mbsysoft.myunitconverter.ui.theme.MyUnitConverterTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyUnitConverterTheme { //적용할 테마 불러오는 곳
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(), //fillMaxSize => 화면 전체 채우기
                    color = MaterialTheme.colorScheme.background
                ) {
//                    Greeting("Android")
//                    Greeting("Android")
//                    함수를 두번 호출해도 Hello Android는 UI에 한번만 표시됨
//                    열을 알려주지않으면 내가 어디에 위치해야되는지 몰라서 자리를 찾지못한다.

                    UnitConverter() // @Compose의 Column과 row를 사용하여 데이터를 쌓는다
                }
            }
        }
    }
}

@Composable
fun UnitConverter() {
    Column {
        // ui 요소 쌓는 방법
        // 세로로 표시 (열)
        Greeting("aaa")
        Greeting("bbb")
        Row { // 가로로 표시 (행)
            Greeting("Android1")
            Greeting("Android2")
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier,
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyUnitConverterTheme {
        Greeting("Android")
    }
}