Compose CodeLab 1주차 : Surface, Modifiers

Android Jetpack Compose CodeLab 1주차 - Tweaking the UI

본 글은 Android Jetpack Compose CodeLab 1주차 강의를 정리한 내용입니다.

이전 글에서는 컴포즈가 제공하는 Text 라는 함수를 통해 텍스트를 화면에 띄워 봤는데요, 이번에는 UI를 구성하는 Surface와 Modifier 라는 기본적인 요소 및 속성에 대해 알아보도록 하겠습니다.

Surface

Surface 는 요소를 감싸는 컨테이너와 같은 역할을 하는 요소입니다.

@Composable
private fun Greeting(name: String) {
    Surface(color = MaterialTheme.colors.primary) {
        Text (text = "Hello $name!")
    }
}

이렇게 Surface 를 사용해 텍스트의 컨테이너를 생성하고, 컨테이너에 색상을 부여하면 다음과 같은 UI를 얻을 수 있습니다.

Modifier

다음은 Modifier 입니다.

Surface, Text 와 같은 대부분의 컴포즈 UI 요소는 레이아웃, 색상 등의 스타일을 수정할 수 있게 해주는 modifier 파라미터를 선택적으로 받을 수 있는데요, 한번 텍스트 요소에 패딩을 부여해 보겠습니다.

@Composable
private fun Greeting(name: String) {
    Surface(color = MaterialTheme.colors.primary) {
        Text (text = "Hello $name!", modifier=Modifier.padding(24.dp))
    }
}

Modifier는 스타일뿐만 아니라 클릭, 스크롤 여부 등의 동작을 제어하는 데에도 사용할 수 있는데요, 다양한 Modifier의 종류는 이곳 에서 확인할 수 있으며, 다음 글에서 더 많은 Modifier를 사용해보도록 하겠습니다.

TL;DR

• Surface 는 요소를 감싸는 컨테이너로써의 역할을 수행합니다.
• Modifier 는 스타일, 스크롤 동작 등을 부여하는 등 요소에 추가적인 속성을 부여합니다.