자바 안드로이드 앱개발 강좌, 전화 앱의 키패드 화면 만들기

작성일: 2023년 10월

1. 서론

안드로이드 앱 개발을 시작하면서 가장 흥미로운 프로젝트 중 하나는 전화 앱의 키패드 화면을 만드는 것입니다. 이 강좌에서는 자바 언어를 사용하여 전화기의 기본 기능인 키패드를 구현하는 방법을 배웁니다. 키패드는 사용자에게 전화번호를 입력할 수 있는 인터페이스를 제공하며, 간단한 레이아웃과 버튼 클릭 이벤트를 통해 전화를 거는 기능을 포함합니다.

이 강좌에서는 XML 레이아웃을 정의하고, Java 코드를 통해 버튼 클릭 이벤트를 처리하며, 전화 번호를 입력하고 시각적으로 표시하는 방법을 다룹니다. 끝으로, 이러한 구성 요소들을 통합하여 완전한 폰 기능을 갖춘 키패드 화면을 구현할 것입니다.

2. 개발 환경 설정

안드로이드 앱 개발을 위해 필요한 개발 환경 설정 방법을 설명하겠습니다.

2.1. Android Studio 설치

먼저, Android Studio를 설치해야 합니다. Android Studio는 안드로이드 개발을 위한 공식 IDE입니다. Google의 공식 웹사이트에서 설치 파일을 다운로드하고 설치 과정을 따르세요.

2.2. 프로젝트 생성

Android Studio를 시작한 후, 새 프로젝트를 만듭니다. 다음 설정을 사용합니다:

  • 애플리케이션 이름: DialerApp
  • 패키지 이름: com.example.dialerapp
  • 저장 경로: 적절한 위치
  • 언어: Java
  • 최소 API 레벨: API 21: Android 5.0 (Lollipop)

이 설정으로 기본 안드로이드 프로젝트가 생성됩니다.

3. UI 레이아웃 구성

다음 단계는 XML 파일을 사용하여 키패드의 UI 레이아웃을 구성하는 것입니다. activity_main.xml 파일을 열고 아래와 같이 수정합니다:


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

                    <TextView
                        android:id="@+id/phoneNumberTextView"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="30sp"
                        android:padding="16dp"
                        android:gravity="end" />

                    <GridLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_below="@id/phoneNumberTextView"
                        android:columnCount="3"
                        android:rowCount="4">

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

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

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

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

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

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

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

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

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

                        <Button
                            android:id="@+id/buttonStar"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:text="*"
                            android:layout_columnWeight="1"
                            android:layout_rowWeight="1" />

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

                        <Button
                            android:id="@+id/buttonPound"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:text="#"
                            android:layout_columnWeight="1"
                            android:layout_rowWeight="1" />

                    </GridLayout>

                </RelativeLayout>
            

위의 XML 레이아웃은 전화 키패드의 UI를 구성합니다. TextView는 입력된 전화번호를 표시하며, GridLayout에는 숫자 버튼이 배치되어 있습니다.

4. Java 코드 구현

이제 메인 액티비티의 Java 코드를 작성하여 버튼 클릭 이벤트를 처리하고, 텍스트 뷰에 입력되는 전화번호를 업데이트하겠습니다. MainActivity.java 파일을 열고 다음 코드를 추가합니다:


                package com.example.dialerapp;

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

                public class MainActivity extends AppCompatActivity {

                    private TextView phoneNumberTextView;

                    @Override
                    protected void onCreate(Bundle savedInstanceState) {
                        super.onCreate(savedInstanceState);
                        setContentView(R.layout.activity_main);

                        phoneNumberTextView = findViewById(R.id.phoneNumberTextView);

                        setButtonListeners();
                    }

                    private void setButtonListeners() {
                        for (int i = 0; i <= 9; i++) {
                            final int number = i;
                            String buttonID = "button" + number;
                            int resID = getResources().getIdentifier(buttonID, "id", getPackageName());
                            Button button = findViewById(resID);
                            button.setOnClickListener(new View.OnClickListener() {
                                @Override
                                public void onClick(View v) {
                                    appendNumber(String.valueOf(number));
                                }
                            });
                        }

                        findViewById(R.id.buttonStar).setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                appendNumber("*");
                            }
                        });

                        findViewById(R.id.buttonPound).setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                appendNumber("#");
                            }
                        });
                    }

                    private void appendNumber(String number) {
                        String currentText = phoneNumberTextView.getText().toString();
                        phoneNumberTextView.setText(currentText + number);
                    }
                }
            

위 코드는 각 버튼에 클릭 리스너를 추가하여 버튼이 눌릴 때마다 전화번호를 입력받아 TextView를 업데이트합니다. setButtonListeners 메서드는 0부터 9까지의 숫자 버튼과 ‘*’ 및 ‘#’ 버튼에 대한 리스너를 설정합니다.

5. 전화 걸기 기능 추가

이제 사용자가 전화번호를 입력한 후 전화를 걸 수 있는 기능을 추가하겠습니다. 이를 위해 appendNumber 메서드에 전화 걸기 버튼을 추가하겠습니다. 전화 걸기 메뉴를 작성하고 전화를 걸 수 있도록 하려면 다음 코드를 추가 하세요:


                // 전화 걸기 버튼을 위한 추가 코드
                findViewById(R.id.callButton).setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        String phoneNumber = phoneNumberTextView.getText().toString();
                        if (!phoneNumber.isEmpty()) {
                            Intent callIntent = new Intent(Intent.ACTION_DIAL);
                            callIntent.setData(Uri.parse("tel:" + phoneNumber));
                            startActivity(callIntent);
                        }
                    }
                });
            

이 코드에서는 전화 걸기 버튼이 클릭될 때 현재 텍스트 뷰의 내용을 가져와 전화 URI를 사용하여 전화를 거는 인텐트를 시작합니다.

6. 테스트 및 디버깅

이제 앱을 빌드하고 실행하여 모든 기능이 제대로 작동하는지 확인해야 합니다. Android Studio에서 “Run” 버튼을 클릭하면 AVD(Android Virtual Device)에서 앱이 실행됩니다. 전화번호를 입력하고 걸기 버튼을 눌러 전화 함수가 정상적으로 작동하는지 확인하세요.

또한, 버튼에 대한 클릭 이벤트가 올바르게 작동하는지, 텍스트 뷰가 업데이트되는지 확인하기 위해 계정이 필요할 수 있습니다. 문제를 발견하면 Android Studio의 Logcat을 사용하여 오류 메시지를 찾아 디버깅하세요.

7. 결론

이번 강좌에서는 자바를 사용하여 기본적인 전화 앱의 키패드 화면을 만들어 보았습니다. UI 레이아웃을 XML로 구성하고, Java 클래스를 사용해 버튼 클릭 이벤트를 처리해 전화번호를 입력할 수 있게 만들었습니다. 또한 전화번호를 실제로 입력하고 전화를 거는 기능을 구현했습니다.

이제 여러분은 키패드를 활용한 안드로이드 앱의 기본 구성 요소를 이해하고 있으며, 이를 바탕으로 더 복잡한 응용 프로그램으로 발전시킬 수 있습니다. 다양한 UI 기능이나 추가적 효과를 넣어보며 더 나만의 독창적인 애플리케이션을 만들어 보세요!

향후 발전된 기능으로는 최근 통화 기록, 즐겨찾기 연락처 추가, 전화번호부에서 검색하기 등을 추가할 수 있습니다. 여러분의 앱 개발 여정에 행운을 빕니다!

작성자: 조광형