[Android Studio] Compose 사용해보기

 

어제는 ViewBinding 을 이용해서 화면 구현 예제를 실습해보았다.

오늘은 Compose에 대해서 연습해보려고 한다.

 

원래 xml 문서에서 하나하나 TextView, ImageView 등등 지정을 해주고 (UI 정의)

 

또 MainActivity.kt 에서 동작을 넣고 했었는데  (로직+바인딩)

 

이제 메인액티비티 파일 하나에서 모두 작성할 수 있다. (xml 없이 UI 자체가 Kotlin 코드)

 

 

 

일단, 기존에 뷰바인딩을 이용하는 경우

 

이 Empty Views Activity 를 선택해서 만들었었다.

 

 

Compose 에서는 Empty Activity 를 선택한다.

 

 

 

 

 

MainActivity.kt 

 

 

 

기본적으로 만들어지는 코드도 굉장히 다르게 생겼다.

 

여기에 몇가지를 추가해보면

 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeKtTheme {
                Surface(color = MaterialTheme.colorScheme.background) {
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .background(color = Color.Blue)
                            .padding(16.dp),
                        horizontalAlignment = Alignment.CenterHorizontally,
                    ) {
                        Text("Hello")
                        Text("World")
                    }
                }
            }
        }
    }
}

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

}

// 미리보기
@Preview(showBackground = true)
@Composable
fun DefaultPreview(){
    ComposeKtTheme {
        Greeting("차차")
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview2(){
    ComposeKtTheme {
        Greeting("고고")
    }
}

 

 

 

이렇게 화면을 만들 수 있다.

 

 

 

 

preview는 미리보기이다.

Vue3에서 양방향 바인딩 덕분에 빌드하지 않고 저장만 해도 5173포트 환경에서 바뀐 UI를 확인할 수 있었던 것처럼

 

@Preview 어노테이션이 붙은 함수는 바로 확인할 수 있다.

 

다만, Vue3처럼 브라우저에서 실시간 반영되는 건 아니고 안드로이드스튜디오 내에서 미리보기가 동작하는 것이다.

 

 

 

 

 

 

 

---

 

 

 

for문 이용해서 간단하게 만들 수 있다.

 

ListView 랑 비슷하게 생겼지만 

그냥 Text() 를 많이 출력하는 것 뿐이고

ListView / RecyclerView 처럼 스크롤하면 재사용하는 건 아니다.

 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Column(
                
            ) {
                for(i in 1..50) {
                    Text("글씨 $i")
                }
            }
        }
    }
}