컴포즈 Composable, Preview 어노테이션과 빌드하기

최근 선언형 UI 프로그래밍은 안정성과 생산성을 높이기 위해 많이 사용하는 추세입니다. React, React Native, Flutter, SwiftUI, Jetpack Compose 등이 이에 해당합니다. 모두 공통적으로 상태(state)를 관리해서 UI Update를 하고, 함수에서 코드블럭을 통해 UI를 생성합니다. 기존 사용하던 명령형 UI 프로그래밍과 선언형 UI 프로그래밍의 차이를 정확히 이해하고 개발해야 선언형에 맞는 코드를 작성할 수 있습니다. 지금부터 Jetpack Compose를 공부하며 주요 내용을 정리하도록 하겠습니다.

 

1. Compose(컴포즈)란?

기존의 뷰 방식의 명령형 UI 프로그래밍과 반대되는 개념으로 선언형 UI 프로그래밍 방식으로 구글이 안드로이드용으로 UI를 만드는 작업을 극적으로 단순화 한 프레임워크입니다. 그리고 컴포즈는 코틀린 전용입니다.

2. Compose 살펴보기

컴포즈는 코틀린 전용이기 때문에 프로젝트 수준의 build.gradle파일에 다음과 같은 설정이 필요합니다.

    dependencies {
        classpath 'com.android.tools.build:gradle:7.4.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.21"
    }

다음은 앱 수준의 build.gradle파일에 필요합니다.

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

API 레벨은 21이상 이어야 하고, 컴포즈가 활성화되도록 설정, 코틀린 컴파일러 플러그인 버전도 설정합니다.

android {
	//...
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion "1.4.7"
    }
	//...
}

3. Composable 어노테이션

• 컴포즈는 UI를 구성할 때 컴포즈 함수를 호출하는 것으로 시작하고 끝납니다.
• 컴포저블 함수는 @Composable 어노테이션으로 식별할 수 있습니다.
• 반환타입을 가질 필요가 없고, 다른 컴포저블 함수를 호출하는것으로 끝납니다.
• 대표적으로 컴포즈에서 제공하는 컴포저블 함수로는 Box, Row, Column, Text, TextField .... 등이 있습니다.

@Composable
@Preview
fun Hello() {
    val name = remember { mutableStateOf("") }  // 상태를 관리하는 remeber
    val nameEntered = remember { mutableStateOf(false) }    // 상태를 관리하는 remeber
    Box(    // 다른 컴포저블 함수 호출
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        contentAlignment = Alignment.Center
    ) {
        if (nameEntered.value) {
            Greeting(name.value)    // 다른 컴포저블 함수 호출
        } else {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {    // 다른 컴포저블 함수 호출
                Welcome()   // 다른 컴포저블 함수 호출
                TextAndButton(name, nameEntered)    // 다른 컴포저블 함수 호출
            }
        }
    }
}

위 예제와 같이 Hello() 라는 컴포저블 함수에서 다른 컴포저블 함수를 호출함으로써 UI를 구성하는 모습입니다.

Greeting, Welcome, TextAndButton은 따로 정의한 컴포저블 함수입니다.

4. Preview 어노테이션

안드로이드 스튜디오를 통해 컴포즈를 개발할 때 즉각적으로 컴파일을 통해 디자인을 확인할 수 있습니다. 컴포저블 함수에 Preview 어노테이션을 추가하면 MainActivity.kt에서 Split 또는 Design 탭을 통해 확인할 수 있습니다. mac 기준 control + shift + -> 또는 <- 방향키를 통해 이동할 수 있습니다.

 

@Composable
fun Greeting(name: String) {
    Text(
        text = stringResource(id = R.string.hello, name),
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.subtitle1
    )
}

 

위의 코드는 미리보기를 할 수 없습니다. Greeting이라는 컴포저블 함수의 인자인 name에 어떤 값이 할당될지 알 수 없기 때문입니다. 위 코드를 미리보기를 할 수 있는 방법은 3가지 정도가 있습니다.

1. Wrapper 컴포저블함수 만들기

@Composable
@Preview(group = "my-group-1", device = Devices.AUTOMOTIVE_1024p)
fun GreetingWrapper() {
    Greeting("Jetpack Compose")
}

Greeting 컴포저블 함수에 값을 전달하는 Wrapper 컴포저블 함수를 만듭니다

2. 함수에 디폴트 값 설정하기

@Composable
@Preview(group = "my-group-1")
fun AltGreeting(name: String = "Jetpack Compose") {
    Text(
        text = stringResource(id = R.string.hello, name),
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.subtitle1
    )
}

컴포저블함수에 디폴트 값을 설정해줍니다

3. Provider 사용하기

class HelloProvider : PreviewParameterProvider<String> {
    override val values: Sequence<String>
        get() = listOf("PreviewParameterProvider", "hi hi hi").asSequence()
}

@Composable
@Preview
fun AltGreeting2(@PreviewParameter(HelloProvider::class) name: String) {
    Text(
        text = stringResource(id = R.string.hello, name),
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.subtitle1
    )
}

@PreviewParameter 어노테이션과 PreviewParameterProvider 를 통해서 미리보기를 구현할 수 있습니다.

리스트형식으로 값을 반환해서 한 번에 여러 가지를 미리보기 할 수 있습니다.

 

5. Preview 기능

• 배경색 변경 @Preview(showBackground = true, backgroundColor = 0xffff0000)
• 미리보기 사이즈 변경 @Preview(widthDp = 100, heightDp = 100)
• 다국어지원 시 언어 설정 @Preview(locale = "ko-KR")
• 상태바나 액션바 보이기 @Preview(showSystemUi = true)
• 미리보기 그룹화 @Preview(group = "my-group")

 

그리고 Activity에서 컴포저블 함수를 사용하려면 ComponentActivity를 상속받아야 합니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Hello()
        }
    }
}

 

여기까지 기본적인 컴포즈를 사용하기 위해 컴포저블과 미리보기, 빌드에 대해 간단하게 알아봤습니다.

 

 

출처 : 도서 젯팩 컴포즈로 개발하는 안드로이드 UI