[안드로이드] Jetpack Compose 찍먹 해보기 - 2편: 텍스트 출력

지난 시간에는 Compose 프로젝트를 만들어보고 간단한 코드를 살펴보았는데요, 이번에는 직접 코드를 수정하여 텍스트를 출력해봅니다.

Columns & Rows

일단 아래 코드처럼 Hello와 World를 출력해봅시다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello")
            Text("World")
        }
    }
}

에뮬레이터를 실행하여 결과를 보면 다음과 같이 두 글자가 겹쳐져 있는 것을 보실 수 있습니다.

이 합쳐진 문자열들을 세로, 혹은 가로로 분리하기 위해서는 Row, Column을 사용해야 합니다. 아래 코드와 같이 말이죠.

// 코드 생략..
super.onCreate(savedInstanceState)
setContent {
    Row{
        Text("Hello")
        Text("World")
    }
}

결과를 실행해보면 두 문자열이 가로로 배치된 것을 보실 수 있습니다.

만약 Row 대신 Column을 사용한다면 세로로 배치 되겠죠?

텍스트 중앙 배치

텍스트를 화면 중앙에 놓고자 할때는 horizontalAlignment 를 사용하시면 됩니다. 아래 코드를 입력하시고 결과 화면을 띄워봅시다.

super.onCreate(savedInstanceState)
setContent {
    Column(horizontalAlignment = Alignment.CenterHorizontally){
        Text("Hello")
        Text("World")
    }
}

엥? 달리진게 없는데요 이 사기꾼
언뜻 보기에는 달라진 것이 없는 것 처럼 보입니다.
그러나 문자열 하나 하나를 자세히 보면 텍스트 상자안에서만 가운데 정렬이 된 것을 볼 수 있습니다.

위 사진과 같이 텍스트 박스의 사이즈가 wrap content 되어 한정된 공간 안에서만 가운데 정렬이 된 것을 보실 수 있습니다.

그러면 텍스트가 전체화면의 가운데에 오게 하려면 어떻게 해야 할까요??

간단합니다. 텍스트 박스의 사이즈를 키워주면 되겠죠?
이렇게 텍스트 상자의 사이즈를 키워줄 때는 modifier를 사용합니다.
다음 코드와 같이 fillMaxSize를 이용해주면 텍스트 박스의 크기는 화면을 꽉 채우게 됩니다.

setContent {
    Column(
        Modifier.fillMaxSize(), // xml에서의 match_parent와 같은 의미입니다.
        horizontalAlignment = Alignment.CenterHorizontally){
        Text("Hello")
        Text("World")
    }
}

결과를 확인해 보면 전체화면에서 텍스트들이 가로 중앙에 배치된 것을 보실 수 있습니다.

그외에도 Modifier의 속성을 살펴보면, padding을 활용한 여백지정, 배경 색 지정 등을 하실 수 있는 것을 확인하실 수 있습니다.

다음 코드와 같이 입력하고, 결과를 출력해봅시다.

setContent {
    Column(
        Modifier.fillMaxSize()
            .background(Color.Green),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally){
        Text("Hello")
        Text("World")
    }
}

텍스트가 화면의 정 중앙에 온 것을 확인할 수 있습니다.

여기서 참고해야할 것은 Column으로 지정하실때 수직 가운데 정렬은 Arrangement를 이용하고 수평 가운데 정렬은 Alignment를 이용했습니다.

그러나 Row로 지정하실 때에는 반대로 수평 가운데 정렬에는 Arrangement를 사용하시고, 수직 가운데 정렬에는 Alignment를 사용하여야 합니다.