Jetpack Compose에서 Column으로 버튼 리스트 만들기

Jetpack Compose는 안드로이드 개발자들에게 직관적이고 간결한 UI 구성 방식을 제공합니다. 기존의 XML 기반 레이아웃에서 벗어나 선언형(Declarative) 스타일로 화면을 구성할 수 있어, 더 짧은 코드로 복잡한 UI를 손쉽게 구현할 수 있습니다. 이번 글에서는 Column을 활용하여 버튼 리스트를 간단하게 구현하는 방법을 살펴보겠습니다.

 

앱 화면에서 버튼을 세로로 나열하는 경우는 매우 일반적입니다. 예를 들어 설정 메뉴, 리스트 형식의 옵션, 간단한 네비게이션 메뉴 등 다양한 곳에서 활용될 수 있습니다. 이 글에서는 버튼을 세로로 배치하고 간격을 조절하는 기본적인 방법부터 시작하여, 버튼의 스타일과 배경 색상까지 함께 설정하는 방법을 설명합니다.

---

📌 이번 블로그에서 다룰 내용

1. Column을 이용한 기본 레이아웃 구성
2. 버튼 사이의 간격 조절하기
3. 버튼의 배경색과 텍스트 스타일 설정하기
4. 초보자도 쉽게 이해할 수 있는 컴포저블 함수 만들기

이제 Jetpack Compose의 기본 구조를 이해하고, Column을 이용하여 버튼을 세로로 배치하는 방법을 하나씩 알아보겠습니다. 간단한 예제와 함께 기본부터 차근차근 시작해볼까요? 😊

 

안드로이드 스튜디오에서 "New Project">"Empty Activity"로 새로운 프로젝트를 다음과 같이 생성합니다.

 

프로젝트 이름을 "compose_02_column_01"이라고 입력하고 프로젝트를 생성합니다. 

프로젝트를 생성하면 자동으로 다음과 같이 코드가 생성됩니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Compose_02_column_01Theme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

 

자동으로 생성된 코드에서 다음과 같이 Greeting 컴포즈 함수를 다음과 같이 삭제 합니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Compose_02_column_01Theme {
            }
        }
    }
}

 

이제 준비 과정이 끝났습니다. 화면에 세로로 버튼을 나열하는 간단한 레이아웃을 구성하는 SampleLinearLayout 함수를 만들어 보겠습니다.

 

SampleLinearLayout() 함수는 Jetpack Compose에서 세로로 버튼을 나열하는 간단한 레이아웃을 구성하는 함수입니다. 이 함수는 화면을 구성할 때 Column 컴포저블을 사용하여 버튼을 수직으로 배치하는 구조를 가지고 있습니다.

 

1. 기본 구조 설정

먼저, Column은 세로 방향으로 컴포넌트들을 배치할 때 사용하는 기본 레이아웃 컨테이너입니다. 이 함수는 **Modifier**를 사용하여 다양한 속성을 설정하고 있습니다.

modifier = Modifier .fillMaxSize() .background(Color.LightGray) .padding(16.dp)

• fillMaxSize(): 화면을 가득 채우도록 크기를 설정합니다. 이 설정은 전체 화면을 사용할 때 매우 유용합니다.
• background(Color.LightGray): 전체 배경색을 연한 회색으로 설정하여 버튼이 더 잘 보이도록 만듭니다.
• padding(16.dp): 화면의 가장자리에서 16dp만큼 안쪽으로 여백을 주어 컴포넌트들이 너무 붙어 있지 않도록 합니다.

---

2. 수평 및 수직 정렬

Column은 기본적으로 세로 방향으로 컴포넌트를 배치하지만, 내부 요소의 정렬 방식을 추가로 설정할 수 있습니다.

horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(16.dp)

• horizontalAlignment는 수평 정렬을 의미하며, 여기서는 모든 버튼을 가로로 중앙에 배치하기 위해 **Alignment.CenterHorizontally**를 사용했습니다.
• verticalArrangement는 세로 방향에서 각 버튼 사이의 간격을 지정합니다. **Arrangement.spacedBy(16.dp)**를 사용하여 버튼 사이에 16dp의 공간을 줍니다. 이 설정은 버튼들이 너무 붙어 있는 것을 방지하고 깔끔한 간격을 만들어줍니다.

---

3. 버튼 배치

이제 버튼을 실제로 배치하는 부분입니다. ButtonItem()이라는 별도의 함수를 사용하여 버튼을 생성합니다.

ButtonItem(text = "BUTTON01")
ButtonItem(text = "BUTTON02")
ButtonItem(text = "BUTTON03")

• 각 줄은 버튼 하나를 나타냅니다.
• 버튼의 텍스트는 "BUTTON01", "BUTTON02", **"BUTTON03"**으로 지정되었습니다.
• 이 방식으로 버튼의 수나 텍스트를 쉽게 수정할 수 있습니다.

@Composable
fun SampleLinearLayout() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        ButtonItem(text = "BUTTON01")
        ButtonItem(text = "BUTTON02")
        ButtonItem(text = "BUTTON03")
    }
}

 

 

Surface

Surface는 안드로이드 컴포즈에서 화면에 그리는 기본적인 단위입니다. Surface는 렌더링 가능한 영역을 나타내며, 여기에 다양한 컴포즈 요소들을 배치하고 그릴 수 있습니다. 간단하게 말해, 화면의 일부분을 나타내는 컴포즈 요소라고 생각할 수 있습니다.

 

- Material Design 스타일이다. (elevation, shape, color..)

- light/dark 테마에 따라 적용 가능

- XML의 MaterialCardView와 유사

 

 

속성

    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    content: @Composable () -> Unit

 

 

1. Text가 Margine을 가져야 한다면?

text에 Margine을 주는 것이 아닌 Surface에 text를 넣고 Surface에 padding을 부여하는 것이 성능적으로 더 좋다고 한다.
(Text에도 padding을 같이 부여해서 사용할 수 있다.)

Surface(
        modifier = Modifier.padding(5.dp)
    ) {
        Text(
            text = "Hello $name!",
            modifier = Modifier.padding(8.dp)
        )
    }

 

Surface를 이용해서 다음과 같이 ButtonItem 컴포즈 함수를 만들어 보겠습니다. 

@Composable
fun ButtonItem(text: String) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp),
        color = Color(0xFFCCCCCC),
        shadowElevation = 4.dp
    ) {
        Box(
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = text,
                fontWeight = FontWeight.Bold,
                fontSize = 16.sp
            )
        }
    }
}

 

이제 모든 소스를 작성을 했으며 안드로이드 스튜디오에서 실행을 하거나 프리뷰 화면을 보시면 다음과 같이 버튼이 생성된걸 확인 할수 있습니다. 

 

[실행화면]