Android 배워보자 Compose - (1)

Compose 가 뭐지?

https://developer.android.com/jetpack/compose/documentation?hl=ko

Jetpack Compose 시작하기  |  Android Developers

 

기존 Android 에서 View, 즉 UI 개발에서는 필연적으로 Kotlin(혹은 Java) 과 xml 을 오가며 작업했지만

Jetpack Compose 를 사용하면 View를 Kotlin 으로만 작성할 수 있다고 합니다.

아래는 Android 에서 Compose를 권장하는 이유에 대한 공식 문서입니다.

 

https://developer.android.com/jetpack/compose/why-adopt?hl=ko

Compose를 사용해야 하는 이유  |  Jetpack Compose  |  Android Developers

 

아무튼 오늘은 Compose 를 이용하여 간단한 화면을 구상해봅시다.

 

 

얼마전에 안드로이드 스튜디오를 Giraffe 로 업그레이드 하고 선택 화면이 다소 바뀌었습니다.

기존에는 Compose Activity 라는 선택 항목이 있었는데 아무튼 저거랑 같이 가운데 육각형 모양 아이콘이 있는 템플릿을 선택해주시면 됩니다.

 

아래는 생성된 Empty Project 의 MainActivity 입니다

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

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

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ComposableTheme {
        Greeting("Android")
    }
}

에..??

 

기존에 알고있던 setContentView 도 안보이고 액티비티 밖에 튀어나와있는 함수도 있고 처음 보면 조금 어지럽습니다.

다행히도 Android 에서 제공되는 튜토리얼이 있었습니다.

 

https://developer.android.com/jetpack/compose/tutorial?hl=ko&continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fjetpack-compose-for-android-developers-1%3Fhl%3Dko%23article-https%3A%2F%2Fdeveloper.android.com%2Fjetpack%2Fcompose%2Ftutorial

Android Compose 튜토리얼  |  Jetpack Compose  |  Android Developers

 

우리가 알던 FrameLayout, LinearLayout 은 다 사라지고 Box와 Row/Column 으로 대체된 듯 합니다.

그리고 Modifier 가 대략적인 레이아웃의 사이즈를 잡아주는 듯 보이는군요

(예시 코드에서의 fillMaxSize 가 우리가 알고있는 width/height 가 match_parent 인 레이아웃이라고 생각하면 될 것 같습니다. default 는 wrap_content 인 것으로 보이네요)

 

그럼 일단 뭐라도 한번 그려 봅시다

오늘의 샘플 데이터입니다. 담백하게 흔하디 흔한 Person으로 가보겠습니다.

data class Person(
    val name:String,
    val sexual : String,
    val age: Int,
    val profile: Int,
    val introduction: String
)

 

 

일단 Column 을 사용해서 위 정보들을 차례로 그려봅시다

 

@Composable
    fun ProfileCard(person: Person){
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ){
            Image(painter = painterResource(id = person.profile),
                contentDescription = "profile",
                modifier = Modifier.size(32.dp))
            Text(text = person.name,
                color = white,
                fontSize = 18.sp
            )
            Text(text = person.sexual,
                color = white,
                fontSize = 16.sp)
            Text(text = person.age.toString(),
                color = white,
                fontSize = 16.sp)
            Text(text = person.introduction,
                color = white,
                fontSize = 14.sp)
        }
    }

    @Preview
    @Composable
    fun MainPreview(){
        ProfileCard(person = Person(
            name = "김철수",
            sexual = "남성",
            age = 28,
            profile = R.drawable.ic_demo,
            "집에 있길 좋아합니다."
        ))
    }

 

결과는?

 

 

확실히 코드 길이가 정말 말도안되게 짧아졌습니다. ImageView 하나, TextView 3 개가 들어가고 심지어 DataBinding 처럼 객체 각 요소를 매핑하는 코드가 코틀린으로 단 10줄이라니.. 왜 기업 채용 우대 사항에 Compose 가 자주 보이는지 30분만에 느꼈습니다.. 

그리고 일단 재밌어요

 

 

그럼 Row 도 섞어서 조금 더 그럴듯 하게 수정해봅시다.

    @Composable
    fun ProfileCard(person: Person){
        Row (
            modifier= Modifier.padding(all = 4.dp),
            verticalAlignment = Alignment.CenterVertically){
            Image(painter = painterResource(id = person.profile),
                contentDescription = "profile",
                modifier = Modifier.size(32.dp))
            Spacer(modifier = Modifier.width(8.dp))
            Column {
                Text(text = person.name,
                    color = white,
                    fontSize = 18.sp
                )
                Spacer(modifier = Modifier.height(4.dp))
                Text(text = person.sexual,
                    color = white,
                    fontSize = 16.sp)
                Text(text = person.age.toString(),
                    color = white,
                    fontSize = 16.sp)
                Text(text = person.introduction,
                    color = white,
                    fontSize = 14.sp)
            }
        }
    }

 

결과는?

 

 

이번엔 간단하게 Row/Column 으로 ItemView를 하나 짜보았고, 다음엔 이전 Android 에서 가장 핵심이었던 RecyclerView 를 Compose로 그려보도록 하겠습니다.