코틀린 안드로이드 앱개발 강좌, 표 형태로 배치 - GridLayout

1. GridLayout 소개

GridLayout은 Android에서 UI 컴포넌트를 격자로 배치할 수 있는 레이아웃입니다. 클래스를 이용해 필요한 행(row)과 열(column)로 구분할 수 있으며, 다양한 크기와 배치 옵션을 제공합니다. 복잡한 UI를 구성하는 데 유용하며, 특히 정렬된 데이터를 시각적으로 표현하는 데 적합합니다.

GridLayout을 사용하면 각 뷰의 크기 및 위치를 쉽게 지정하여 다양한 형식의 앱 UI를 설계할 수 있습니다. 이 레이아웃을 사용하여 버튼, 텍스트뷰, 이미지 등을 격자형태로 배치할 수 있습니다.

2. GridLayout 설정 및 사용법

2.1 기본 설정

GridLayout을 사용하기 위해 XML 레이아웃 파일에 다음과 같이 추가합니다:

<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:rowCount="2"
    android:columnCount="3">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="0"
        android:text="1"
        android:layout_columnWeight="1"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="1"
        android:text="2"
        android:layout_columnWeight="1"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="2"
        android:text="3"
        android:layout_columnWeight="1"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="0"
        android:text="4"
        android:layout_columnWeight="1"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="1"
        android:text="5"
        android:layout_columnWeight="1"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="2"
        android:text="6"
        android:layout_columnWeight="1"/>

</GridLayout>

위 코드는 2행 3열의 GridLayout을 설정합니다. 각 TextView는 같은 크기로 구성됩니다. layout_columnWeight 속성을 사용하여 각 열의 비율을 조정할 수 있습니다.

3. GridLayout의 속성

GridLayout에는 여러 가지 속성이 있으며, 그중 일부는 다음과 같습니다:

rowCount: GridLayout의 행 수를 설정합니다.
columnCount: GridLayout의 열 수를 설정합니다.
layout_row: 각 뷰의 행 인덱스를 설정합니다.
layout_column: 각 뷰의 열 인덱스를 설정합니다.
layout_rowWeight: 행의 비율 크기를 설정합니다.
layout_columnWeight: 열의 비율 크기를 설정합니다.

4. 코드 예제

4.1 간단한 계산기 앱

GridLayout을 활용하여 간단한 계산기 UI를 만들어 보겠습니다. 아래는 전체 XML 코드 예제입니다:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:rowCount="5"
        android:columnCount="4">

        <EditText
            android:id="@+id/inputField"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnSpan="4"
            android:layout_row="0"
            android:padding="16dp"
            android:hint="계산 입력"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="0"
            android:text="1"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="1"
            android:text="2"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="2"
            android:text="3"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="3"
            android:text="+"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="0"
            android:text="4"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="1"
            android:text="5"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="2"
            android:text="6"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="3"
            android:text="-"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="0"
            android:text="7"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="1"
            android:text="8"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="2"
            android:text="9"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="3"
            android:text="*"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="0"
            android:text="C"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="1"
            android:text="0"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="2"
            android:text="="
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="3"
            android:text="/"
            android:layout_columnWeight="1"/>

    </GridLayout>

</RelativeLayout>

위 예제는 기본적인 계산기 UI를 GridLayout으로 구현한 것입니다. 각 버튼은 0dp의 너비를 가지며, layout_columnWeight을 사용하여 동일한 비율로 나눠집니다.

4.2 Activity와 연결하기

이제 Kotlin 코드를 사용하여 UI와 연결해보겠습니다. MainActivity.kt 파일의 코드는 다음과 같습니다:

import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.EditText
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private lateinit var inputField: EditText

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        inputField = findViewById(R.id.inputField)

        val buttons = listOf(
            R.id.btn1, R.id.btn2, R.id.btn3, R.id.btnPlus,
            R.id.btn4, R.id.btn5, R.id.btn6, R.id.btnMinus,
            R.id.btn7, R.id.btn8, R.id.btn9, R.id.btnMultiply,
            R.id.btnC, R.id.btn0, R.id.btnEqual, R.id.btnDivide
        )

        buttons.forEach { buttonId ->
            findViewById

위 코드에서는 각 버튼에 클릭 리스너를 추가하여 사용자의 입력을 처리합니다. 숫자 버튼 클릭 시 해당 숫자가 입력 필드에 추가되고, “C” 버튼은 입력 필드를 초기화하며, “=” 버튼은 결과를 계산하는 로직을 수행합니다.

5. GridLayout 배치의 이점

GridLayout을 사용하면 다음과 같은 장점이 있습니다:

유연한 배치: 각 뷰의 크기와 위치를 상세히 조정할 수 있습니다.
비율 조정: layout_columnWeight와 layout_rowWeight 속성을 통해 비율 기반의 동적 UI를 작성할 수 있습니다.
보편적 사용: 많은 사용자 인터페이스 디자인에서 쉽게 사용될 수 있는 패턴을 제공합니다.

6. GridLayout의 단점

하지만 GridLayout은 몇 가지 단점도 있습니다:

복잡도: 여러 뷰를 배치할 경우 복잡성이 증가할 수 있습니다.
퍼포먼스: 많은 뷰를 배치할 때 성능에 영향을 줄 수 있습니다.

7. 요약

이번 강좌에서는 GridLayout을 사용하여 UI를 설계하는 방법을 살펴보았습니다. GridLayout의 장점과 단점을 이해하고, 간단한 계산기 앱을 통해 실습해보았습니다. GridLayout은 격자 형태로 UI를 구성할 수 있게 해 주어 다양한 앱에서 사용될 수 있는 유용한 레이아웃입니다.

코틀린 안드로이드 앱개발 강좌, 표 형태로 배치 – GridLayout