코틀린 안드로이드 앱개발 강좌, 전화 앱의 키패드 화면 만들기

안드로이드 앱개발에 있어 UI/UX는 매우 중요한 요소입니다. 이 강좌에서는 코틀린을 활용하여 전화 앱의 키패드 화면을 구현하는 방법을 알아보겠습니다. 이 예제를 통해 기본적인 레이아웃 구성, 버튼 동작, 이벤트 처리 및 UI 상태 관리를 배울 수 있습니다.

1. 프로젝트 설정

안드로이드 스튜디오를 실행한 후 새로운 프로젝트를 생성합니다. 아래의 설정을 따라 주세요:

• Application Name: PhoneDialer
• Language: Kotlin
• Minimum API Level: API 21: Android 5.0 (Lollipop)

이후 ‘Finish’를 클릭하여 프로젝트를 시작합니다.

2. 레이아웃 생성

이제 주요 XML 레이아웃 파일을 수정하여 키패드 화면을 디자인합니다. res/layout/activity_main.xml 파일을 열고 아래의 코드를 추가합니다:

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

    <TextView
        android:id="@+id/display"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:layout_alignParentTop="true"
        android:padding="16dp"
        android:background="#e0e0e0"
        android:gravity="end" />

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_above="@id/display"
        android:layout_marginTop="16dp"
        android:rowCount="4"
        android:columnCount="3"
        android:layout_gravity="center">

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="1"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="2"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="3"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="4"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="5"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button6"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="6"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button7"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="7"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button8"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="8"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button9"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="9"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button_star"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="*"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button0"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="0"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button_hash"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="#"
            android:textSize="24sp" />

    </GridLayout>

</RelativeLayout>

위의 코드에서 우리는 간단한 텍스트 뷰와 그리드 레이아웃을 사용하여 키패드를 만들었습니다. 각 버튼은 0부터 9까지 그리고 별표(*)와 샵(#)을 포함하고 있습니다. 다음으로는 각 버튼에 대한 클릭 이벤트를 설정할 것입니다.

3. 버튼 클릭 리스너 추가

이제 MainActivity.kt 파일을 열고 버튼 클릭 리스너를 추가하도록 하겠습니다. 코드를 아래와 같이 수정합니다:

package com.example.phonedialer

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

class MainActivity : AppCompatActivity() {
    private lateinit var display: TextView

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

        display = findViewById(R.id.display)

        val button1 = findViewById(R.id.button1)
        val button2 = findViewById(R.id.button2)
        val button3 = findViewById(R.id.button3)
        val button4 = findViewById(R.id.button4)
        val button5 = findViewById(R.id.button5)
        val button6 = findViewById(R.id.button6)
        val button7 = findViewById(R.id.button7)
        val button8 = findViewById(R.id.button8)
        val button9 = findViewById(R.id.button9)
        val button0 = findViewById(R.id.button0)
        val buttonStar = findViewById(R.id.button_star)
        val buttonHash = findViewById(R.id.button_hash)

        val buttons = listOf(button1, button2, button3, button4, button5, button6, button7, button8, button9, button0, buttonStar, buttonHash)

        for (button in buttons) {
            button.setOnClickListener {
                onButtonClick(it as Button)
            }
        }
    }

    private fun onButtonClick(button: Button) {
        display.append(button.text)
    }
}

위의 코드에서는 각 버튼에 대해 클릭 리스너를 설정하고, 버튼을 누를 때마다 해당 버튼의 숫자가 화면에 추가됩니다. onButtonClick 메서드는 누른 버튼의 텍스트를 가져와 display TextView에 추가합니다.

4. 앱 실행 및 테스트

코드가 준비되었으니, 앱을 실행하여 키패드가 잘 작동하는지 확인해보겠습니다. 안드로이드 스튜디오에서 ‘Run’ 버튼을 클릭하여 에뮬레이터에서 실행합니다.

누구나 쉽게 사용할 수 있도록 디자인된 이 키패드는 사용자 경험을 고려하여 설계되었습니다. 숫자를 클릭할 때마다 상단 TextView에 해당 숫자가 표시됩니다.

5. 추가 기능 개발

이 기본 버전에 몇 가지 추가 기능을 더할 수 있습니다. 예를 들어, 전화번호 지우기, 전화걸기 버튼을 추가하여 실제 전화 앱에 맞도록 만들 수 있습니다. 이 부분은 다음 단계에서 다루어보겠습니다.

5.1 전화번호 지우기 버튼 추가하기

전화번호를 지울 수 있는 버튼을 추가하기 위해 위의 XML 파일에 지우기 버튼을 추가합니다:

<Button
    android:id="@+id/button_clear"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Clear"
    android:textSize="24sp"
    android:layout_marginTop="16dp" />

이제 다시 MainActivity.kt로 돌아가서 이 버튼에 대한 클릭 리스너를 추가해보겠습니다:

val buttonClear = findViewById(R.id.button_clear)
buttonClear.setOnClickListener {
    display.text = ""
}

5.2 전화 걸기 버튼 추가하기

전화 걸기 기능을 추가하기 위해 전화 걸기 버튼도 XML 파일에 다음처럼 추가해야 합니다:

<Button
    android:id="@+id/button_call"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Call"
    android:textSize="24sp"
    android:layout_marginTop="16dp" />

다시 MainActivity.kt로 돌아가서 전화 걸기 버튼의 클릭 리스너를 설정합니다. 이 버튼 클릭 시 전화번호를 실제로 걸 수 있도록 Permissions을 추가해야 합니다. 먼저, AndroidManifest.xml에 다음 권한을 추가합니다:

<uses-permission android:name="android.permission.CALL_PHONE" />

그리고, button_call의 클릭 리스너를 추가합니다:

val buttonCall = findViewById(R.id.button_call)
buttonCall.setOnClickListener {
    val numberToCall = display.text.toString()
    if (numberToCall.isNotEmpty()) {
        val dialIntent = Intent(Intent.ACTION_CALL)
        dialIntent.data = Uri.parse("tel:$numberToCall")
        startActivity(dialIntent)
    }
}

6. 마무리

– 이제 기본적인 키패드 앱이 완성되었습니다. 코틀린과 안드로이드에서 UI 구성 요소를 활용하여 간단한 전화 앱을 만들 수 있었습니다. 이 강좌를 통해 안드로이드 앱 개발의 기초를 배웠기를 바랍니다.

– 추가적으로 다양한 기능을 구현해보면 더 많은 경험을 쌓을 수 있으며, 실제 서비스에 사용될 수 있는 앱으로 발전시킬 수 있습니다.

이 강좌가 도움이 되었길 바라며, 여러분의 안드로이드 개발 여정에 성공을 기원합니다!