Android UI : LinearLayout

안녕하세요! 오늘은 LinearLayout에 대해 알아보려고 합니다. LinearLayout은 Android에서 가장 기본적이고 자주 사용되는 레이아웃 중 하나로, 자식 뷰들을 일렬로 배치하는 데 사용됩니다. LinearLayout은 수평 또는 수직 방향으로 자식 뷰를 정렬할 수 있으며, 이를 통해 유연하게 사용자 인터페이스를 구성할 수 있습니다.

이번 포스팅에서는 LinearLayout의 주요 속성과 함께, 예제 코드를 통해 그 사용 방법을 알아보겠습니다.

LinearLayout이란?

LinearLayout은 자식 뷰들을 수평 또는 수직으로 배치하는 레이아웃입니다. 방향에 따라 모든 자식 뷰를 나란히 배치하며, 레이아웃의 크기와 위치를 유연하게 조절할 수 있는 다양한 속성을 제공합니다.

• orientation: 자식 뷰를 나란히 배치할 방향을 지정합니다. vertical과 horizontal 중 하나를 선택할 수 있습니다.
• gravity: LinearLayout 내에서 자식 뷰들이 배치될 위치를 지정합니다.
• weight: 자식 뷰들이 전체 LinearLayout 내에서 차지하는 비율을 지정할 수 있습니다.

다음은 LinearLayout의 주요 속성을 설명하고 이를 사용하는 예제 코드를 보여드리겠습니다.

LinearLayout 주요 속성

1. orientation

orientation 속성은 LinearLayout이 자식 뷰들을 배치할 방향을 지정합니다. 수직(vertical) 또는 수평(horizontal) 중 하나를 선택할 수 있습니다.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!-- 자식 뷰들이 세로로 나란히 배치됩니다 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me!" />
</LinearLayout>

2. weight

weight 속성은 자식 뷰들이 LinearLayout에서 차지하는 공간의 비율을 지정합니다. 이 속성을 사용하면 화면 크기에 따라 유연하게 공간을 분배할 수 있습니다.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button 1" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Button 2" />
</LinearLayout>

위 예제에서 두 개의 버튼이 있습니다. 첫 번째 버튼은 weight가 1이고 두 번째 버튼은 weight가 2입니다. 따라서 두 번째 버튼은 첫 번째 버튼의 두 배 크기를 차지하게 됩니다.

3. gravity

gravity 속성은 자식 뷰들이 LinearLayout 내에서 배치될 위치를 결정합니다. center, left, right, bottom 등 다양한 값을 지정할 수 있습니다.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Centered Text" />
</LinearLayout>

위 예제에서 gravity 속성을 center로 지정하여, TextView가 LinearLayout의 중앙에 위치하도록 설정했습니다.

예제: LinearLayout으로 간단한 UI 만들기

이번에는 LinearLayout을 사용하여 간단한 사용자 인터페이스를 만들어보겠습니다. 이 예제에서는 사용자 이름과 이메일을 입력받고, 버튼을 누르면 Toast 메시지를 출력하는 간단한 폼을 만들어 보겠습니다.

XML 레이아웃 파일 (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter your name:" />

    <EditText
        android:id="@+id/nameInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Name" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter your email:" />

    <EditText
        android:id="@+id/emailInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email" />

    <Button
        android:id="@+id/submitButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />

</LinearLayout>

Kotlin 코드 (MainActivity.kt)

이제 이 레이아웃을 사용하여 사용자로부터 입력을 받고 버튼 클릭 시 메시지를 표시하는 MainActivity 클래스를 작성해 보겠습니다.

package com.example.linearlayoutexample

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

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

        val nameInput = findViewById<EditText>(R.id.nameInput)
        val emailInput = findViewById<EditText>(R.id.emailInput)
        val submitButton = findViewById<Button>(R.id.submitButton)

        submitButton.setOnClickListener {
            val name = nameInput.text.toString()
            val email = emailInput.text.toString()

            if (name.isNotEmpty() && email.isNotEmpty()) {
                Toast.makeText(this, "Name: $name\nEmail: $email", Toast.LENGTH_SHORT).show()
            } else {
                Toast.makeText(this, "Please enter both name and email.", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

설명

• activity_main.xml: LinearLayout을 사용하여 TextView, EditText, Button을 수직으로 나란히 배치했습니다. padding을 추가하여 화면의 가장자리에서 일정한 간격을 두었습니다.
• MainActivity: 사용자가 이름과 이메일을 입력한 후 Submit 버튼을 클릭하면 입력된 이름과 이메일이 Toast 메시지로 표시됩니다. 입력이 없을 경우 경고 메시지를 표시하도록 하였습니다.

결론

LinearLayout은 Android에서 가장 자주 사용되는 레이아웃 중 하나로, 자식 뷰를 간단하게 수직 또는 수평으로 정렬할 수 있어 UI 레이아웃을 구성하는 데 매우 유용합니다. 이번 포스팅에서는 LinearLayout의 기본 속성과 이를 사용한 간단한 예제에 대해 살펴보았습니다. orientation, weight, gravity 등의 속성을 잘 이해하고 활용하면 더욱 깔끔하고 유연한 UI를 만들 수 있습니다.

다음 포스팅에서는 다른 레이아웃들, 예를 들어 RelativeLayout이나 ConstraintLayout에 대해 다뤄보겠습니다. LinearLayout과 다른 레이아웃들의 차이점과 사용 방법을 비교해보며 더 나은 UI를 만드는 방법을 알아봅시다.