004_레이아웃(XML)과 버튼 추가하기

이전 강의에서 프로젝트를 실행해보았으니, 이번에는 레이아웃을 수정하고 버튼을 추가하는 방법을 배워보겠습니다.

---

▼ 레이아웃이란?

안드로이드 앱에서 레이아웃(Layout) 은 화면의 디자인을 담당하는 XML 파일입니다. 버튼, 텍스트, 이미지 등의 UI 요소를 배치할 수 있습니다.

• XML 파일을 사용하여 UI 구성
• res/layout/activity_main.xml에서 레이아웃을 수정 가능

---

▼ 버튼 추가하기

기본적으로 생성된 activity_main.xml 파일을 수정하여 버튼을 추가해보겠습니다.

1. activity_main.xml 수정하기

아래 코드를 res/layout/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:gravity="center">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="안녕하세요!"
        android:textSize="24sp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="클릭하세요" />
</LinearLayout>

2. MainActivity.kt에서 버튼 기능 추가

버튼을 클릭하면 TextView의 텍스트가 변경되도록 코드를 추가합니다.

package com.example.myfirstapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView

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

        val textView = findViewById<TextView>(R.id.textView)
        val button = findViewById<Button>(R.id.button)

        button.setOnClickListener {
            textView.text = "버튼이 클릭되었습니다!"
        }
    }
}

---

▼ 실행 결과

이제 앱을 실행하면 "클릭하세요" 버튼이 표시되고, 버튼을 클릭하면 "버튼이 클릭되었습니다!" 라는 문구로 변경됩니다.

---

▶ 다음 강의 예고

005_입력 필드(EditText) 추가 및 데이터 활용

---