Compose 와 Preview

Android Studio support for Compose | Jetpack Compose | Android Developers

Compose

Composable 함수는 다음과 같이 @Composable 주석이 달려있다.

@Composable
fun SimpleComposable() { //Compose 들은 모두 대문자로 시작하는 네이밍 컨벤션을 갖는다.
		Text("Hello World")
}

Preview

Preview 어노테이션을 사용하면 , 안드로이드 스튜디오의 오른쪽 윈도우에서 해당 컴포즈를 미리보기 할 수 있게된다.

// 프리뷰 함수
@Preview(showBackground = true) //인수로 device 를 지정하면 해당 device의 크기로 확인할 수 있다.
@Composable
fun DefaultPreview() {
    FirstApplicationTheme() {
        // A surface container using the 'background' color from the theme
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Row(
                modifier = Modifier
                    .background(Color.Gray) //배경색 지정
                    .fillMaxSize() //사이즈 지정
                    .padding(16.dp), //padding 지정
                verticalAlignment = Alignment.CenterVertically // vertical 중앙정렬
            ) {
                Text(text = "hello")
                Spacer(modifier = Modifier.width(30.dp))
                Text(text = "World")
            }
        }
    }
}

LocalInspectionMode.current 로 현재의 compose가 프리뷰에서 렌더링 되는지 확인할 수 있다.

if (LocalInspectionMode.current) {
    // Show this text in a preview window:
    Text("Hello preview user!")
} else {
    // Show this text in the app:
    Text("Hello $name!")
}