Preview

컴포즈를 쓰면 가장 먼저 알아야 할 기능인 Preview입니다. Preview를 통해 레이아웃을 볼 수 있으며 Interactive 기능을 통해 간단한 기능 테스트를 해볼 수 있습니다.

---

xml vs Compose Preview

기존 xml과 다르게 compose는 @Preview 어노테이션을 통해 내가 작성한 레이아웃을 볼 수 있습니다. 

xml 방식

Compose Preview

---

기능

말 그대로 작성한 레이아웃을 보여주는 기능을 합니다. 예를 들어 Greeting 컴포저블에 Button을 하나 더 추가하고 실제 휴대폰처럼 보고 싶다면 버튼 컴포저블과 Preview의 showSystemUi를 true 주면 됩니다.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Column() {
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
        Button(onClick = { /*TODO*/ }) {
            Text(text = "testText")
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun GreetingPreview() {
    TestExampleTheme {
        Greeting("Android")
    }
}

이렇게 작성만 해주면 실제 휴대폰처럼 화면이 나옵니다.

따란~

 만약 테스트 해야 하는 휴대폰의 비율이 정해져 있거나 배경색을 정해야 한다면 패러미터를 넘겨주기만 하면 됩니다.

@Repeatable
annotation class Preview(
    val name: String = "",
    val group: String = "",
    @IntRange(from = 1) val apiLevel: Int = -1,
    // TODO(mount): Make this Dp when they are inline classes
    val widthDp: Int = -1,
    // TODO(mount): Make this Dp when they are inline classes
    val heightDp: Int = -1,
    val locale: String = "",
    @FloatRange(from = 0.01) val fontScale: Float = 1f,
    val showSystemUi: Boolean = false,
    val showBackground: Boolean = false,
    val backgroundColor: Long = 0,
    @UiMode val uiMode: Int = 0,
    @Device val device: String = Devices.DEFAULT
)

Preview 어노테이션의 클래스입니다. 컴포즈의 제일 큰 장점!! 내부 로직을 직관적으로 볼 수 있다는 것!!

widthDp, heightDp를 통해 원하는 크기의 화면을 만들 수 있습니다.

 

Interactive Mode

Preview에는 위젯의 상호작용을 테스트해 볼 수 있는 기능이 있습니다. 

Preview 화면 위

 

---

주의사항

1. Preview는 나오는데 빌드하니까 안 나와요!

컴포즈는 실제 화면이 작성되는 영역과 Preview영역이 나눠져 있습니다. 

화면이 작성되는 영역은 setContent의 브래킷으로 감싸져 있습니다. 

반면에 Preview영역은 @Preview 어노테이션이 붙어있습니다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        TestExampleTheme {
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.background
            ) {
                Greeting("Android")
            }
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun GreetingPreview() {
    TestExampleTheme {
        Greeting("Android")
    }
}

따라서 Preview에는 작성했지만 setContent에 넣어주지 않았기 때문에 폰에서 보이지 않습니다. 

코드로 비교해 봅시다.

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun GreetingPreview() {
    TestExampleTheme {
        Text("안녕하세용")
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestExampleTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Column() {
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
        Button(onClick = { /*TODO*/ }) {
            Text(text = "testText")
        }
    }
}

보시면 Preview와 실물이 다른 것을 볼 수 있습니다. 

따라서 모든 UI를 그리는 컴포저블 함수를 하나 만들어서 Preview와 setContent에 둘 다 선언해 놓으면 위와 같은 문제를 해결할 수 있습니다.

2. Preview가 안 보여요!

Compose를 배우면서 레거시 개발자들이 가장 많이 겪는 불편입니다. 툭하면 Preview가 안 나오고 원인은 모르겠고 참 말썽이죠. 

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    
    LocalConfiguration.current as MainActivity
    
    Column() {
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
        Button(onClick = { /*TODO*/ }) {
            Text(text = "testText")
        }
    }
}

인위적으로 오류를 발생시켜 봤습니다. 컴포저블 함수에서 context를 MainActivity의 Context로 일부러 캐스팅시켜 봤습니다.

어?

보다 시 문제가 발생했습니다. 여기서 빨간 동그라미를 쳐둔 위험 표시를 클릭하면 

렌더링 실패

왜 렌더링이 실패했는지 알려줍니다. 캐스팅 예외네요. 일부러 추가한 캐스팅 문장을 지우면 정상적으로 렌더링 됩니다.

3. Preview를 지웠더니 탭이 완전히 사라졌어요!

다시 @Preview를 붙여주시고 해당. kt 파일을 껐다 켜주면 됩니다.