Compose 가 뭐지?
https://developer.android.com/jetpack/compose/documentation?hl=ko
Jetpack Compose 시작하기 | Android Developers
Jetpack Compose 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Jetpack Compose는 네이티브 Android UI를 빌드하기 위한 최신 도구 키트입니다. 여기에서 Compo
developer.android.com
기존 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
Jetpack Compose는 네이티브 UI를 빌드하기 위한 Android의 최신 툴킷입니다. 더 적은 수의 코드, 강력한 도구, 직관적인 Kotlin API로 Android에서의 UI 개발을 간소화하고 가속화하여 앱에 생동감을 더해줍
developer.android.com
아무튼 오늘은 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 에서 제공되는 튜토리얼이 있었습니다.
Android Compose 튜토리얼 | Jetpack Compose | Android Developers
컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Jetpack Compose는 네이티브 Android UI를 빌드하기 위한 최신 도구 키트입니다. Jetpack Compose는 더 적은 수의 코드,
developer.android.com
우리가 알던 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로 그려보도록 하겠습니다.
'Android > Kotlin' 카테고리의 다른 글
Android 배워보자 Compose! -(3) (3) | 2024.01.11 |
---|---|
Android 배워보자 Compose! (2) (0) | 2024.01.10 |
Android Room Database 사용하기 (1) | 2024.01.08 |
Android ExoPlayer 로 앱에서 동영상 재생하기 (1) | 2024.01.05 |
Android Jackson Library 를 이용한 JSON Parsing (1) | 2024.01.05 |