[Android] Jetpack Compose 제트팩 컴포즈 사용해보기

https://android-developers.googleblog.com/2021/07/jetpack-compose-announcement.html

Jetpack Compose is now 1.0: announcing Android’s modern toolkit for building native UI

Posted by Anna-Chiara Bellini , Product Manager, Nick Butcher , Developer Relations Today, we're launching version 1.0 of...

android-developers.googleblog.com

베타 버전이던 Jetpack Compose가

2021년 7월 28일 자로 정식 릴리즈 되었다.

❓ Jetpack Compose 란

XML레이아웃 대신 선언형 함수를 사용하여 UI를 구성
UI 개발 효율성을 극대화하기 위하여 개발됨
State로 UI를 동기화하여 버그 방지
Kotlin 으로 개발되었으며 Material Design 을 기반으로 함

즉, 기존의 XML레이아웃을 꾸며서 UI를 작성하는 방식이 아닌 코드로 작성하는 것이다.

@Composable 이라는 어노테이션을 사용하여 Composable 단위로 UI을 작성한다.

사용하려면 우선적으로

안드로이드 Arctic Fox 이상 버전을 사용 해야 한다.

기존에 사용하던 프로젝트에서 적용하려면

https://developer.android.com/jetpack/compose/setup

Jetpack Compose와 함께 Android 스튜디오 사용 | Android Developers

Jetpack Compose로 최적의 환경에서 개발하려면 최신 버전의 Android 스튜디오 Arctic Fox를 다운로드해야 합니다. Jetpack Compose와 함께 Android 스튜디오를 사용하여 앱을 개발할 때 Compose UI를 즉시 미리 볼

developer.android.com

공식 문서를 참고하면 된다.

이 글은 Google 공식문서를 기반으로 작성되었습니다.

프로젝트 생성

Empty Compose Activity로 새로 생성해준다.

생성하면 기존과 다른 형태의 샘플 레이아웃과 코드를 확인할 수 있다.

이제 XML파일 대신 코드를 통해 레이아웃을 생성한다.

여기서 생소한 2가지 어노테이션을 확인할 수 있다.

@Preview : 레이아웃 미리보기 지원함.
@Composable : 기존의 View의 역할. 실행시 컴파일러에게 UI를 그리게 하며, 반환타입을 정하지 않고 순서를 신경쓰지 않으며, 동시 실행 가능하고 갱신, 취소 될 수 있다.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeExTheme {
        Greeting("Android")
    }
}

@Preview 어노테이션은 레이아웃의 미리보기 기능을 지원한다.

showbackground 속성이 true 라면 기본 배경색을 White로 채워준다.

Preview를 빌드 하면

결과물을 미리 확인할 수 있으며

샘플 코드를 실행해보면 동일한 화면이 뜨는 것을 확인할 수 있다.

구조 살펴보기

이제 대략적인 구조를 살펴보자.

기본적으로 테마를 구성하는 Color, Shape, Theme, Type 클래스로 구성된다.

Color

Material Design 을 기본으로 하는 컬러들이 선언되어 있는 클래스이다.

Shapes

도형의 모양을 선언하는 클래스이다.

Type

텍스트 타입이 정의 되어 있으며

주석으로 처리되있는 부분은 기본 디자인들의 default 값이다.

이 값들을 오버라이드하여 디자인을 변경할 수 있다.

Theme

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200

    /* Other default colors to override
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
    */
)

@Composable
fun ComposeExTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

테마를 구성하는 클래스이다.

Color에서 정의되어 있는 컬러를 바탕으로 다크테마, 기본테마를 정의하며

Type과 동일하게 default 값을 오버라이드 하여 값을 변경할 수 있다.

위에서 정의한 테마를 바탕으로

다크모드, 기본모드에 따른 테마를 지정해주고 Shapes와 Type에서 정의한 Typography를 바탕으로 테마를 생성한다.

MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeExTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeExTheme {
        Greeting("Android")
    }
}

이제 다시 샘플코드로 돌아와보면, 텍스트가 생성되는 원리를 이해할 수 있다.

@Composable 로 작성된 Greeting 함수는 텍스트를 받아서 생성해주는 역할을 하며

onCreate에서 Surface를 사용하여 텍스트의 배경색을 지정하고, Android 텍스트를 넘겨주어 UI을 생성하는 것이다.