TIL 55일차 (Compose 특강 2회차 정리)

Compose 특강 2회차 정리

 

@Composable

 

Composable이란?

Composable 함수는 Compose 앱을 구성하는 일반함수이다.

코틀린의 일반함수와 같이 결과값을 반환하지 않는다.

사용자의 UI 요소를 전달하면 컴포즈 런타임 통해 렌더링 한다.

 

 

선언방식

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

컴포즈 방식은 위젯을 생성하는 동시에 초기화를 진행할 수 있다.

 

 

 

Modifier

 

Modifier란?

Composable의 크기, 레이아웃, 동작 및 모양을 변경하기 위해

정의하는 속성이며 사용자와의 상호작용도 정의할 수 있다.

 

 

Modifier 속성들

- padding: 요소 주위에 공간을 배치
- size: 부모 레이아웃에서 수신한 제약조건에 따라 크기를 지정
- requiredSize: 제약 조건에 관계없이 컴포저블의 크기를 고정
- fillMaxSize: 하위 요소가 상위 요소에서 제공되는 모든 가용 공간을 최대한으로 채움
- offset: 원래 위치를 기준으로 레이아웃을 배치
- weight: 컴포저블 크기를 상위 요소 내에서 유연하게 설정 (Row, Column 내에서 사용 가능)

 

Modifier의 순서

각 Modifier 함수는 이전에 적용된 Modifier의 결과를 기반으로

변경 사항을 추가하므로, Modifier 적용 순서에 따라 최종 결과가 달라질 수 있다.

 

 

 

Layout

 

레이아웃 위젯들

 

Column - 가로배치, Row - 세로배치, Box - 겹치게 배치

 

 

정렬 속성

verticalAlignment: 수직 방향에서 자식 Composable들의 정렬 방식을 지정
horizontalArrangement: 수평 방향에서 자식 Composable들의 정렬 방식을 지정
contentAlignment: 레이아웃 내의 콘텐츠가 상위 요소의 경계 내에서 어떻게 정렬될지를 결정

해당 프로퍼티에 Aligment.정렬속성 또는

Arragement.정렬속성 값을 줘서 위젯의 위치를 조절할 수 있다.

 

 

 

UI

 

Text

@Composable
fun SimpleText() {
    Text(
        text = "문자열",         
        color = Color.Black,  
        fontSize = 16.sp,      
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Serif
    )
}

// string.xml
@Composable
fun StringResourceText() {
    Text(stringResource(R.string.hello_world))
}

 

TextField

@Composable
fun SimpleTextField() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

TextField에 값이 입력될 때 Composable함수는 재실행되는데 이때

text 변수는 remeber로 선언되었기에 입력된 값이 유지된다.

 

 

Image

// 로컬 이미지 불러오기
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)

// 인터넷 이미지 불러오기
AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)

 

Scaffold

topBar, bottomBar, floatingActionButton를 매개변수로 제공

 

 

Button

@Composable
fun SimpleButton(onClick: () -> Unit) {
    Button(onClick = { onClick() }) { Text("Filled") }
}

버튼 위젯은 onClick을 인자로 받는다.

 

 

Switch

@Composable
fun SimpleSwitch() {
    var checked by remember { mutableStateOf(true) }
    Switch(
        checked = checked,
        onCheckedChange = {...}
    )
}

스위치 위젯은 활성화 여부와 토글시의 동작을 매개변수에 넣어줘야한다.

체크박스도 이거랑 동일한 매개변수를 갖는다.

 

 

List

@Composable
fun MessageList(messages: List<Message>) {
    Column(...) {
        messages.forEach { message ->
            Text(message)
        }
    }
}

레이아웃 위젯을 반환해 반복해서 UI를 표시할 수 있다. 

 

LazyColumn {
    items(messages) { message ->
        MessageRow(message)
    }
}

많은 수의 항목이나 길이를 알 수 없는 목록을 표시해야 하는 경우,

성능상 문제가 발생하는 걸 방지하기 위해 Lazy 레이아웃을 반환한다.

 

 

Resource

// Formatting
<string name="congratulate">Happy %1$s %2$d</string>
Text(text = stringResource(R.string.congratulate, "New Year", 2021))

// Dimensions
<dimen name="padding_small">8dp</dimen>
Text(
    text = "...",
    modifier = Modifier.padding(dimensionResource(R.dimen.padding_small))
)

// Colors
<color name="purple_200">#FFBB86FC</color>
Text(text = "...", color = colorResource(R.color.purple_200))

리소스 파일은 이런식으로 불러올 수 있다.