[Jetpack Compose Codelab-1] Jetpack Compose 기본

Android Compose 튜토리얼  |  Android 개발자  |  Android Developers

 

Jetpack Compose는 Android에서 화면을 만들기 위한 도구입니다.

더 적은 수의 코드, 강력한 도구, 직관적인 Kotlin API들로 UI 개발을 빠르고 쉽게 할 수 있도록 도와줍니다.

 

이 글에서는 선언형 함수를 이용해 간단한 UI 컴포넌트를 만들어보겠습니다.

화면을 그리는데 XML 레이아웃을 수정하거나 Layout Editor를 사용하지 않고,

구성 가능한 함수를 사용하여 element를 정의하면 Compose 컴파일러가 이후 작업을 대신 해주게 됩니다.

 

🌹 Index

Lesson 1: Composable function

Lesson 2: Layouts

Lesson 3: Material Design

Lesson 4: Lists and Animation

 

Lesson 1: Composable functions

Jetpack Compose는 구성 가능한 함수(이후, composable functions)로 구성됩니다.

 

이러한 함수를 이용한 UI 구성은 UI 구조에 집중해야 하는 XML 기반의 UI 구성과 달리,

코드를 이용해 element의 모양을 구현하고 필요한 데이터를 전달하는 방식으로 앱의 UI를 정의할 수 있습니다.

 

Composable function은 @Composable Annotation을 통해 만들 수 있습니다.

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

 

text element 추가해보기

처음은 간단하게 기존 XML의 TextView를 어떻게 Compose로 표현하는지 알아보겠습니다.

🔥 Android Studio에서 Jetpack Compose Project 만드는 방법

아래 그림과 같이 Compose Activity를 선택하면 쉽게 Compose를 사용하는 Project를 만들 수 있습니다.🤗

 

먼저, onCreate내에 content 블록을 정의하고 해당 블록 내에 Text composable function을 호출해주겠습니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(text = "Hello World")
        }
    }
}

 composable function은 또 다른 composable function 내에서만 호출할 수 있으며,

setContent 블록은 이러한 composable function이 호출되는 레이아웃을 정의합니다.

🔥 setContent block <- composable functions <- other composable functions

그럼 위의 코드를 실행해 보겠습니다.

Jetpack Compose는 Kotlin 컴파일러 플러그인을 통해 composable function을 어플리케이션의 UI 요소로 변환하게 됩니다.

 

예를 들어, 위에서 작성한 Text composable function은 Compose UI 라이브러리에 의해 정의되어 있으며 화면에 text를 보여주게 됩니다.

다음은 composable function을 직접 작성해보도록 하겠습니다. 😊👍

 

Define a composable function

이전에 말씀드렸듯이 composable function은 @Composable Annotaion을 이용해 정의합니다.

 

예로, 전달받은 데이터 name을 화면에 Text로 표현하는 composable function을 만들어보겠습니다.

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

모든 Composable function은 다른 Composable function 내에서 선언되어야 하므로,

onCreate 메서드 내 setContent에서 MessageCard composable function을 호출해 주도록 합니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard(name = "Android")
        }
    }
}

결과 화면은 아래와 같습니다.

흠, 결과는 잘 나왔지만 매 번 결과를 확인하기 위해 build 하는건 많이 번거롭고 시간이 걸립니다. 🧐

이를 위해 Jetpack Compose에서는 Preview를 지원해주고 있습니다.

 

Preview your function in Android Studio

Preview도 간단합니다. Preview로 보고 싶은 Composable function 이름 위에 @Preview Annotaion을 붙여주면 됩니다.

Annotation을 붙여주면 build와 설치 없이 composable 결과 화면을 바로 볼 수 있습니다.

🔥 Preview는 전달 받는 매개변수가 없는 Compoasable function에서만 사용할 수 있음에 유의하세요.🤨

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard(name = "Android")
}

우측 상단의 Split 탭을 누르면 Preview 화면을 보실 수 있습니다.

 

지금까지 Jetpack Compose의 기본인 Composable function을 만드는 방법을 알아보았습니다.

이번에는 화면 구성을 위한 Layout에 대해서 알아보겠습니다.🙌🏻

 

 

Lesson 2: Layouts

UI element들은 한 element가 다른 element들을 포함하는 식의 계층 구조를 가지고 있습니다.

 

Compmose에서는 이러한 계층 구조를 composable function 내에서 다른 composable function을 호출하는 방식으로 구현할 수 있습니다.📌

 

Add multiple texts

여러 Jetpack Compose 기능에 대해 알아보기 확장 가능한 메세지들이 포함된 리스트를 구현해보겠습니다.

 

먼저 메세지의 작성자와 내용을 표시할 수 있는 MessageCard composable function을 만듭니다.

데이터를 여러 개 전달해야 하기 때문에 data class를 만들어 인스턴스를 전달해주겠습니다.

data class Message(val auth: String, val body: String)

@Composable
fun MessageCard(msg: Message) {
    Text(text = msg.auth)
    Text(text = msg.body)
}

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard(msg = Message("seomseom", "My First Jetpack Compose"))
}

 

위의 코드는 제대로 Text를 두개 만들어주지만, 두 개의 element를 어떻게 배치할지에 대한 정보가 하나도 지정되지 않았기 때문에

읽을 수 없을 정도로 서로 겹치게 출력된 것을 볼 수 있습니다.

 

한 번 두 element를 세로로 배치해보도록 하겠습니다. 이럴 때 사용하는 것이 바로 Column 함수입니다.

@Composable
fun MessageCard(msg: Message) {
    Column() {
        Text(text = msg.auth)
        Text(text = msg.body)
    }
}

가로롤 정렬할 때는 Row 함수를 사용할 수 있으며, 여러 element를 순서대로 쌓을 때는 Box 함수를 사용할 수 있습니다.📌

위의 예제에서 이번에는 작성자의 프로필 사진을 추가해보도록 하겠습니다.

@Composable
fun MessageCard(msg: Message) {
    Row() {
        Image(
            painter = painterResource(id = R.drawable.img),
            contentDescription = "Profile Image",
        )
        Column {
            Text(text = msg.auth)
            Text(text = msg.body)
        }
    }
}

화면에 제대로 출력이 되었지만, 좀 더 이쁘게 보이도록 수정해봅시다.

composable을 변경하기 위해 modifier를 사용할 수 있습니다.

 

modifier는 composable의 크기, 레이아웃, 모양을 변경하거나 element가 클릭 가능하도록 만드는 등의 상위 수준 상호작용을 추가할 수 있습니다.

🔥 이 modifier들은 체인이 가능해서 여러 modifer를 함께 적용할 수 있습니다.

@Composable
fun MessageCard(msg: Message) {
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.img),
            contentDescription = "Profile Image",
            modifier = Modifier
                // Set image size to 40dp
                .size(40.dp)
                // Clip image to be shaped as a circle
                .clip(CircleShape)
        )
        
        // image와 작성자 정보 사이에 공간 추가
        Spacer(modifier = Modifier.width(8.dp))
        
        Column {
            Text(text = msg.auth)
            // 각 정보 사이에 공간 추가
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = msg.body)
        }
    }
}