[Android/Compose] Jetpack Compose의 기본 개념

 

 

 

 

 

Jetpack Compose는 네이티브 UI를 빌드하기 위한 Android의 최신 도구입니다.

이와 비슷한 선언형 UI로 SwiftUI, Flutter 등이 있다.

 

기존 레거시 뷰 체계는 앞으로 등장하게 될 다양한 기기들의 화면(폴더블, 태블릿 등)에 대응하기 어렵습니다.

 

따라서 Google은 2021년 5월, 새로운 Android UI 설계 프레임워크를 출시하였습니다.

 

 

Jetpack Compose의 특징

• 적은 수의 코드로 더 많은 작업을 하고 전체 버그 클래스를 방지할 수 있으므로 코드가 간단하며 유지 관리하기 쉽습니다.
• 기존의 모든 코드와 호환되므로 언제 어디서든 원하는 대로 사용할 수 있습니다.
• Compose는 Android 플랫폼 API에 직접 액세스하고 material 디자인, 어두운 테마, 애니메이션 등을 기본적으로 지원하여 멋진 앱을 만들 수 있습니다.
• 특정 OS에 의존하지 않아 업데이트가 매우 빠릅니다.
• etc..

 

 

또한 기존의 View 체계에선 개발자가 항상 XML과 Activity/Fragment의 상태(State)를 일치시키는데 면밀한 집중을 요구했다. 때문에 개발자가 놓치는 부분에서 오류가 발생할 가능성이 늘 존재했고 이로 인한 유지관리의 복잡성이 증가했습니다.

 

Compose는 XML 없이 개발자가 집중적으로 UI를 구성할 수 있게 되었고 상태에 따라 UI를 업데이트하는 구조이기에 더욱 화면을 구성하기 편해졌습니다. 

 

 

Compose를 사용하자!

 

그럼 이제 Compose를 사용해보자.

Compose는 (Android Studio Arctic Fox) 폭스부터 이용이 가능합니다.

 

프로젝트 생성 후 Empty Compose Activity를 선택한 후 Next를 누른다.

 

 

 

프로젝트를 생성 후 Phone and Tablet의 Empty Compose Activity를 선택 후 Next를 누릅니다.

 

프로젝트 이름은 알아서 자신이 원하는 걸로 설정 후 프로젝트를 생성합니다.

 

 

 

 

UI Theme

 

 

 

위에 보이는 건 새로 생긴 UI 테마입니다. 

• Color.kt - for custom colors (색깔을 정의)
• Shape.kt - for custom shapes (모양을 정의)
• Type.kt - for custom typography (텍스트를 정의)
• Theme.kt - for custom themes (커스텀 테마를 정의)

 

 

 

MainActivity 코드 설명

setContent {
    // ComposeBasic은 프로젝트 명이며 프로젝트 명 + Theme이라는 이름으로 생성된다.
    ComposeBasicTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            Greeting("Android")
        }
    }
}

 

 

현재 보는 setContent는 기존 XML을 사용할 때 XML과 코드를 연결하는 부분을 Compose 형태로 나타낸 것이다. Compose에서는 이런 식으로 사용합니다.

 

 

 

 

아래와 같은 UI를 구성하는 코드

 

Surface와 Modifier는 Compose의 테마 설정 함수입니다.

 

Surface 함수는 전체적 표면을 담당합니다.

XML에 비유하자면 레이아웃이라 생각하면 편합니다. (LinearLayout, RelativeLayout 등..)

 

Modifer는 화면의 크기를 담당합니다. padding 또는 wrapContentSize 등이 있는데요,

이 또한 XML에 비유하자면 match_parent나 wrap_content가 있습니다.

 

이 두 함수에 대해선 더 자세하게 공부한 후 다른 포스트로 찾아뵙도록 하겠습니다.

 

 

이 글을 마치며

지금까지 Compose의 기본 개념과 사용 방법을 알아보았습니다. 아직 저도 미숙한 부분이 많아 글을 읽기 어려우시다면 다른 포스트도 참고하셨으면 좋겠습니다. 

 

 

 

출처

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

Jetpack Compose  |  Android Developers

https://www.jetpackcompose.net/themes-in-jetpack-compose

Jetpack Compose themes and Typography

https://full-stack.tistory.com/12

[Jetpack] Compose # 1 - 기본