Compose 학습 - 2 (Composable 함수)

chapter 19 : 컴포저블 함수 개요

컴포저블 함수는 Jetpack Compose를 이용해 안드로이드 앱용 User Interface를 구성하는 빌딩 블록이다.

이번장에서는 상태 함수, 비상태 함수, 함수 구문, 파운데이션 컴포저블과 머티리얼 컴포저블의 차이 등을 다룬다. 

Composable 함수 :

• Composable 함수는 Compose로 사용자 인터페이스를 만들기 위해 이용하는 특수한 코틀린 함수다.
• @Composable annotation을 사용해서 선언하고 코틀린의 일반 함수와 구별된다. 
• Composable 함수에서는 코틀린 표준 함수를 호출하지만, 표준 함수에서는 Composable 함수를 호출할 수 없다. 
• 전형적인 Compose 기반 UI는 내장 Composable과 Custom Composable을 조합하여 구성한다. 

Composable 함수는 stateful composable 또는 stateless composable로 분류 된다. 

 

stateful composable  :

compose context에서 stateful composable은 앱 실행 중 변경할 수 있는 모든 값으로 정의된다.

예를 들어, 슬라이더 위치값, 텍스트 필드에 입력된 문자열, 체크박스의 현재 설정 상태 등이 모드 stateful에 해당된다.

@Composable
fun DemoScreen() {
    var sliderPosition by remember { mutableStateOf(20f) }
    
    ... 생략 ...
}

• remember 키워드를 이용하고 mutableStateOf 함수를 호출한다. 

stateless composable

@Composable
fun DemoSlider(sliderPositions: Float, onPositionChange: (Float) -> Unit) {
    Slider(
        modifier = Modifier.padding(10.dp),
        valueRange = 20f..40f,
        value = sliderPositions,
        onValueChange = { onPositionChange(it) }
    )
}

• DemoSlider는 DemoScreen이 전달한 상태값을 이용하지만 스스로 상태값을 저장하지는 않는다 . 그래서 stateless composable이다. 

Composable 함수 구문

@Composable
fun CustomSwitch() {
    val checked = remember { mutableStateOf(true) }

    Switch(checked = checked.value, onCheckedChange = {checked.value = it})
    if(checked.value){
        Text("Switch is On")
    } else {
        Text("Switch is Off")

    }
}

 

리스트 항목 :

@Composable
fun CustomList(items: List<String>) {
    Column {
        for (item in items) {
            Text(item)
            Divider(color = Color.Black)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeStudyTheme {
        CustomList(listOf("One", "Two", "Three", "Four", "Five", "Six"))
    }
}

 

Foundation Composable과 Material Composable

Compose에서 번들로 제공하는 Composable은 Layout, Foundation, Material Design 컴포넌트 3가지다.

 

Layout Component :

> 컴포넌트를 화면에 배치하고, 배치된 컴포넌트들이 상호 동작하는 방법을 정의할 수 있다. 

• Box
• ConstraintLayout
• BoxWithConstraints
• Row
• Column

Foundation Components :

> 기본적인 사용자 인터페이스 기능을 제공하는 최소한의 컴포넌트 집합이다. 이 컴포넌트들은 기본적으로 특정한 스타일이나 테마를 내포하지는 않지만, 커스터마이즈를 통해 앱의 형태나 행동을 자유롭게 정할 수 있다. 

• BaseTextField
• LazyRow
• Canvas
• Shape
• Image
• Text
• LazyColumn

Material Compose Components :

> 구글에서 제공하는 Material 테마 가이드라인을 만족하도록 특별히 디자인된 것들이다.

• AlertDialog
• RadioButton
• Button
• Scaffold 
• 너무 많아서 생략