[Jetpack Compose] 버튼을 화면 중앙에 배치

안녕하세요! 이번 블로그에서는 Jetpack Compose를 사용하여 화면 중앙에 버튼을 배치하는 간단한 안드로이드 앱을 만들어 보려고 합니다. 이 예제는 Column, Button, Text와 같은 기본 컴포저블(Composable)들을 활용하여 버튼을 중앙에 배치하는 방법을 다루고 있으며, 이를 통해 Jetpack Compose의 기본 레이아웃 구조와 컴포저블의 동작 방식을 쉽게 이해할 수 있을 거예요. 😊

1. 새로운 Compose 프로젝트 생성하기

1. Android Studio를 열고 New Project를 선택하세요.

 

2. Empty Compose Activity 템플릿을 선택하세요.

 

3. 프로젝트 이름은 Compose_02_01로 설정합니다.

 

4. Finish를 눌러 프로젝트를 생성하면 다음과 같이 MainActivity.kt 파일이 자동 생성이 됩니다.

package com.example.compose_02_01

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.compose_02_01.ui.theme.Compose_02_01Theme

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

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Compose_02_02Theme {
        Greeting("Android")
    }
}

 

2. Gradle 설정 확인하기

Compose를 사용하려면 build.gradle 파일에 필요한 설정이 되어 있어야 합니다. 기본적으로 Material 3 라이브러리가 포함되어 있어야 합니다.

 

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    namespace 'com.example.compose_02_01'
    compileSdk 33

    defaultConfig {
        applicationId 'com.example.compose_02_01'
        minSdk 21
        targetSdk 33
        versionCode 1
        versionName '1.0'
    }

    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion '1.5.2'
    }
}

dependencies {
    implementation 'androidx.core:core-ktx:1.10.0'
    implementation 'androidx.compose.ui:ui:1.5.2'
    implementation 'androidx.compose.material3:material3:1.2.0-alpha03'
    implementation 'androidx.activity:activity-compose:1.7.0'
}

이 설정이 없으면 Compose가 제대로 작동하지 않으니 꼭 확인하세요! 😊

 

 

📂 MainActivity.kt 작성하기

프로젝트를 생성 하면 다음과 같이 MainActivity.kt 파일이 생성이 됩니다. 이 파일은 안드로이드 앱이 시작될 때 가장 먼저 실행되는 중요한 파일입니다.

 

먼저, ComponentActivity는 안드로이드에서 화면을 그리는 기본 액티비티(Activity) 클래스로, 화면의 수명 주기를 관리합니다. 이 클래스는 앱의 시작, 정지, 재개 등 중요한 생명 주기 이벤트를 처리하는 데 필요한 메서드들을 제공합니다.

 

이번 예제에서는 MainActivity가 ComponentActivity를 상속받아 메인 화면을 설정하고  enableEdgeToEdge()는 시스템 상태 바와 내비게이션 바를 투명하게 만들어 화면 전체를 더 넓게 사용할 수 있도록 설정하는 함수입니다. 

 

앱의 실제 화면을 구성하는 부분은 setContent 블록 안에 작성됩니다. 이 블록은 Jetpack Compose의 컴포저블(Composable)들을 배치하는 영역입니다. 이 블록 안에서 앱의 UI를 정의하고, 화면에 그릴 내용을 설정할 수 있습니다.

package com.example.compose_02_01

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.tooling.preview.Preview
import com.example.compose_02_01.ui.theme.Compose_02_01Theme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()  // 전체 화면 모드로 설정
        setContent {

            }
        }
    }
}

 

 

색상, 글꼴, 모양 같은 디자인 요소를 통일되게 관리하기 위해  Compose_02_01Theme 앱 전체에 테마를 적용 하고 마지막으로, **Scaffold**는 Jetpack Compose에서 화면의 기본 구조를 잡는 데 사용되는 중요한 컴포저블입니다. 기본적으로 상단 바, 하단 바, 플로팅 액션 버튼(FAB), 메인 콘텐츠 영역을 쉽게 배치할 수 있도록 도와줍니다.   Modifier.fillMaxSize()를 사용하여 전체 화면을 채우는 레이아웃을 설정했습니다. innerPadding 매개변수를 사용하여 내부 패딩을 추가하여 화면의 가장자리와의 거리를 조절할 수 있습니다.

            Compose_02_01Theme {  // 테마 적용 (디자인 스타일)
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                
                }
            }

 

🖥️ MainScreen 만들기

이제 MainScreen 함수를 살펴볼게요. 이 부분은 실제 화면에 보이는 버튼을 그리는 중요한 역할을 합니다.

 

📝 컴포저블 함수란?

먼저, 이 함수는 **@Composable**이라는 어노테이션으로 시작합니다.

• **@Composable**은 이 함수가 컴포저블 함수임을 나타냅니다.
• 컴포저블 함수는 Jetpack Compose에서 화면에 그릴 수 있는 요소들을 정의하는 특별한 함수입니다.
• 즉, 화면에 나타나는 버튼, 텍스트, 이미지 같은 요소를 만드는 데 사용됩니다.
• 컴포저블 함수는 XML 파일 없이도 화면을 만들 수 있는 Jetpack Compose의 가장 중요한 특징 중 하나입니다.

 

🔹 MainScreen 함수의 기본 구조

fun MainScreen(modifier: Modifier = Modifier) {

 

• 함수 이름은 **MainScreen**이며, 이 함수는 Modifier라는 매개변수를 기본값으로 받습니다.
• Modifier는 화면 요소의 크기, 배경색, 패딩 등을 설정하는 데 사용하는 매우 중요한 속성입니다.
• 여기서 기본값으로 **Modifier**를 주었기 때문에 나중에 다른 곳에서 **MainScreen**을 호출할 때 필요에 따라 Modifier를 추가할 수도 있고, 그냥 기본 설정으로 사용할 수도 있습니다.

 

 

🗂️ 화면의 기본 구조 - Column 사용하기

이제 MainScreen 함수의 핵심 부분인 Column을 봅시다.

• **Column**은 화면에 여러 요소를 세로 방향으로 배치하는 데 사용됩니다.
• 예를 들어, 제목, 이미지, 버튼 같은 요소를 위에서 아래로 쌓고 싶을 때 **Column**을 사용합니다.
• 이 Column은 일종의 컨테이너 역할을 합니다.

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
            .padding(),

• .fillMaxSize(): Column을 화면의 전체 크기로 확장합니다.
• .background(Color.LightGray): Column의 배경색을 **밝은 회색 (LightGray)**으로 설정합니다.
• .padding(): 기본 여백을 추가합니다. **여백(Padding)**은 화면의 요소들이 서로 겹치지 않도록 공간을 주는 역할을 합니다.

 

🎯 요소 정렬 - 중앙 배치하기

@Composable
fun MainScreen(modifier: Modifier = Modifier) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
            .padding(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(
            onClick = {},  // 버튼을 눌렀을 때 할 일
            shape = RectangleShape  // 직사각형 모양의 버튼
        ) {
            Text(text = "wrap_content Example")  // 버튼 안의 글자
        }
    }
}

 

horizontalAlignment = Alignment.CenterHorizontally

• Column 안의 모든 요소를 가로 방향으로 가운데 정렬합니다.
  

verticalArrangement = Arrangement.Center

• Column 안의 모든 요소를 세로 방향으로도 가운데 정렬합니다.

• 이렇게 설정하면 화면의 모든 요소가 정확히 화면의 중앙에 배치됩니다.

 

🔘 버튼 추가하기

이제 Column 안에 버튼을 추가하는 부분을 살펴봅시다.
버튼은 사용자가 직접 클릭할 수 있는 요소로, 사용자와 상호작용할 수 있는 중요한 UI 컴포넌트입니다.

        Button(
            onClick = {},  // 버튼을 눌렀을 때 할 일
            shape = RectangleShape  // 직사각형 모양의 버튼
        ) {
            Text(text = "wrap_content Example")  // 버튼 안의 글자
        }

• **Button**은 기본적으로 직사각형 모양이며, 클릭 가능한 요소입니다.
• onClick = {}
  • 버튼을 눌렀을 때 실행할 코드를 여기에 작성할 수 있습니다.
  • 여기서는 아직 동작을 정의하지 않았기 때문에 빈 중괄호로 남겨두었습니다.
• shape = RectangleShape
  • 버튼의 모양을 직사각형으로 설정합니다.
  • 기본 버튼은 모서리가 살짝 둥글지만, RectangleShape는 모서리가 직각인 완전히 네모난 버튼을 만듭니다.
• Text(text = "wrap_content Example")
  • 버튼 안에 표시할 텍스트를 정의하는 부분입니다.
  • 여기서는 **"wrap_content Example"**이라는 글자가 버튼 안에 표시됩니다.

@Composable
fun MainScreen( modifier: Modifier = Modifier) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
            .padding(),
        horizontalAlignment =  Alignment.CenterHorizontally,
        verticalArrangement =  Arrangement.Center
    ){
        // Wrap content example
        Button(
            onClick = {},
            shape = RectangleShape
        ) {
            Text(text = "wrap_content Example")
        }

    }
}

👁️ 실행화면 (Preview)