[Android/Compose] Spacer를 활용한 UI 요소 중앙 및 하단 배치

 

Compose를 이용해 화면을 구성하며, UI의 한 요소는 화면 중앙에 배치하고 다른 요소는 하단에 고정해야 하는 상황이 있었습니다.

이 요구사항을 어떻게 해결할 지 고민하던 중, Spacer(modifier = Modifier.weight(1f))를 활용하여 원하는 대로 배치할 수 있었습니다.
이 글에서는 해당 방법을 이용해 원하는 레이아웃을 구현한 과정을 정리해 보겠습니다.

---

Spacer를 활용한 중앙 및 하단 배치

구현 코드

@Composable
fun BusinessCardApp() {
    Column(
        modifier = Modifier.fillMaxSize(), // 전체 화면을 차지하도록 설정
        horizontalAlignment = Alignment.CenterHorizontally // 내부 요소를 가로 중앙 정렬
    ) {
        Spacer(modifier = Modifier.weight(1f)) // 상단 여백

        BusinessCardHeader(
            imagePainter = painterResource(R.drawable.android_logo),
            name = "Jennifer Doe",
            job = "Android Developer Extraordinaire"
        ) // 중앙에 배치될 요소

        Spacer(modifier = Modifier.weight(1f)) // 하단 여백

        BusinessCardContactInfo(
            phoneNumber = "01011112222",
            share = "@AndroidDev",
            eMail = "jen.doe@android.com",
        ) // 하단에 고정될 요소
    }
}

---

Spacer를 활용한 정렬 원리

1. 한 요소를 화면 중앙에 배치하는 방법

Column 내부에서 weight(1f)을 가진 Spacer를 위쪽과 아래쪽에 동일하게 배치하면,
두 개의 Spacer가 동일한 공간을 차지하며 그 사이에 위치한 요소가 자연스럽게 중앙에 배치됩니다.

2. 한 요소를 화면 하단에 고정하는 방법

Compose의 Column은 기본적으로 위에서 아래로 요소를 배치합니다.
따라서 Spacer(weight = 1f) 두 개가 균등하게 공간을 차지한 후,
마지막 요소가 자동으로 화면 하단에 배치됩니다.

---

구현 화면

 

---

정리

• 한 요소를 중앙에 배치하고, 다른 요소를 하단에 배치할 때 Spacer(weight = 1f)를 활용하면 간단하게 구현할 수 있습니다.
• 중앙 배치는 위, 아래에 동일한 크기의 Spacer를 배치하면 자연스럽게 이루어집니다.
• 하단 고정은 Column의 기본 흐름을 활용하여 마지막 요소로 배치하면 해결할 수 있습니다.