대세라는 Compose! 그래 한번 배워볼까? 📐

Compose가 뭘까?

뜻으로는 구성하다, 작곡하다 라는 뜻을 가지고 있는데

안드로이드에서는 Compose는

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

링크 → https://developer.android.com/jetpack/compose/documentation

Jetpack Compose 시작하기  |  Android Developers

 

기존의 Android 의 XML나 iOS 의 StoryBoard 로 작성하는 방식은 “특정 상태에 따라 UI가 어떻게 보여질지에 대해 구현” 해야했다면,

Jetpack Compose 과 같은 선언형 UI는 이와 반대로 “특정 상태에 따라 UI가 무엇을 보여주면 되는지에 대해 구현” 하면 됩니다.

이런 방식은 기존 UI 구현 방식 대비 이점은

• 상태에 따른 UI 를 작성하기 위해 훨씬 적은 코드를 사용합니다.
• 뷰 계층의 트리를 탐색 (view.findViewById() 등) 하여 수동으로 조작하는 기존의 방식보다 실수할 확률이 적고, 유지보수적 측면에서 좋습니다.
• 기존 언어의 유연성을 그대로 활용할 수 있습니다.
• 개발자가 뷰의 속성 등의 구현을 경우에 따라 상세하게 작성하지 않아도 되므로 재사용, 확장성에 용이합니다.

일단 저는 어떤건지 먼저 써보고 그 다음 더 깊게 알아보는 스타일이라 먼저 써봤다.

1. 일단 최신 버전으로 앱을 만들 때 Empty Compose Activity 파일로 앱을 만든다.
2. 그러면 아래와 같은 식으로 앱이 만들어 질 것이다.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.Text

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

위에서 보면 setContent 라는 함수가 보일텐데 저 안에서 Compose 코드를 실행할 수 있다.

그리고 Text() 안에 String값이 들어가있는데 저렇게 실행하게 되면 빈 화면에

Hello world 가 왼쪽 상단에 위치되어있을 것이다.

기존의 xml의 코드에 TextView를 배치하고 Activity에서 string 값을 지정해주고 띄워주는 형식이랑 다르게 저렇게 Text(”bla bla”) 만 적어준다면 text를 보여줄 수있다.

1. 저런식으로 setContent 안에 작성해도 되지만 함수로 뺄 수 있는데 그 때 조건이 따른다.

// ...
import androidx.compose.runtime.Composable

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

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

저기 MessageCard() 함수 위에 어노테이션이 보일텐데(@Compose) setContent 밖에서 Compose 변수를 사용하려고 하기 위해 선언한 것이다.

3-1. 여기서 Compose의 장점 중 하나는 코드로 작업하면서 바로 에뮬레이터에서 볼 수 있는 장점이 있다.

// ...
import androidx.compose.ui.tooling.preview.Preview

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

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

@Preview 어노테이션을 설정해주면 Android Studio 오른쪽 상단의 Split 버튼을 누르면 뷰를 보면서 작업이 가능하다.

1. 이제 Text() 여러개 사용할 때!

// ...
import androidx.compose.foundation.layout.Column

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

Column {} 함수로 묶어주면 수직 정렬, Row {} 로 묶어주면 수평정렬, Box {}로 묶어주면 요소를 쌓을 수 있습니다.

Box {} 는 쌓아지는 요소라 modifier라는 변수를 설정해줘야한다.

(아래에서 바로 설명하겠다~)

1. 이제 각 UI의 margin, width, height 등 설정을 위해 modifier라는 것을 설정해준다.

// ...
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.width

@Composable
fun MessageCard(msg: Message) {
    Column {
	Text(text = msg.author)
	Spacer(modifier = Modifier.height(4.dp))
	Text(text = msg.body)
    }
}

Spacer() 함수는 UI의 사이에 공간을 만들어주는 UI다.

그 안에 modifier를 Modifier.변수() 를 설정해주면 여러 설정을 할 수 있다.

1. Text()의 글자 색이나 사이즈 혹은 Style을 지정해줄 수 있다.

@Composable
fun MessageCard(msg: Message) {
   Row(modifier = Modifier.padding(all = 8.dp)) {
       Column {
           Text(
        	text = msg.author,
        	color = MaterialTheme.colors.secondaryVariant,
        	style = MaterialTheme.typography.subtitle2,
        	fontsize = 20.sp
           )

           Spacer(modifier = Modifier.height(4.dp))

           Text(
            text = msg.body,
            style = MaterialTheme.typography.body2
           )
       }
   }
}

Text() 괄호 안에 color, size, fontsize 등등 여러 변수들을 설정해주면 된다.

Compose는 계속해서 공부를 해야하고 계속해서 업데이트가 되기 때문에 지속적으로 블로그를 올릴 예정이다.