Kotlin 기초 : 안드로이드 앱 개발을 위한 시작 (6. XML 레이아웃과 상호작용)

안녕하세요, 안드로이드 앱 개발에 관심 있는 여러분! 이번에는 Kotlin에서 안드로이드 앱의 사용자 인터페이스(UI)를 설계하고 다루는 핵심인 XML 레이아웃과의 상호작용에 대해 알아보겠습니다. 사용자에게 보여지는 화면을 어떻게 디자인하고 제어하는지를 배우면서, 안드로이드 앱 개발의 또 다른 중요한 부분을 익히게 될 것입니다.

1. XML 레이아웃이란?

안드로이드에서 UI를 설계하는 데에는 XML(Extensible Markup Language)이 사용됩니다. XML 레이아웃은 사용자 인터페이스의 구조와 디자인을 설명하는데에 효과적입니다.

2. 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">

    <!-- UI 구성 요소들을 정의합니다 -->

</LinearLayout>

3. UI 구성 요소 추가하기

3-1. 텍스트뷰(TextView)

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, Kotlin!"
    android:textSize="20sp"/>

3-2. 버튼(Button)

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me"
    android:onClick="onButtonClick"/>

4. Kotlin에서 XML 레이아웃 사용하기

4-1. 뷰 참조하기

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

4-2. 이벤트 핸들링

fun onButtonClick(view: View) {
    textView.text = "Button Clicked!"
}

5. 레이아웃과 코드의 연동

5-1. 데이터 바인딩(Data Binding)

val binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)

binding.textView.text = "Hello, Kotlin!"
binding.button.setOnClickListener { onButtonClick(it) }

6. 통합 예제: 간단한 계산기 앱

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

    <EditText
        android:id="@+id/number1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter number 1"
        android:inputType="numberDecimal"/>

    <EditText
        android:id="@+id/number2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter number 2"
        android:inputType="numberDecimal"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Add"
        android:onClick="onAddClick"/>

    <TextView
        android:id="@+id/result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Result: "/>

</LinearLayout>

// MainActivity.kt
class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
    }

    fun onAddClick(view: View) {
        val num1 = binding.number1.text.toString().toDoubleOrNull() ?: 0.0
        val num2 = binding.number2.text.toString().toDoubleOrNull() ?: 0.0

        val result = num1 + num2
        binding.result.text = "Result: $result"
    }
}

 

 

 

마무리

이제 여러분은 Kotlin으로 안드로이드 앱의 UI를 디자인하고 코드와 연동하는 방법에 대해 알게 되었습니다. XML 레이아웃을 통해 사용자에게 어떻게 정보를 보여줄지를 정의하고, Kotlin 코드에서 해당 UI를 제어하는 방법을 익힐 수 있습니다. 다음 시간에는 안드로이드에서 데이터를 저장하고 관리하는 방법을 알아보도록 하겠습니다. 계속해서 흥미로운 Kotlin 코딩되세요! 🚀