[ Android Studio ] 고객정보 입력 화면 구성하기(Do it!안드로이드앱 프로그래밍 도전과제_09)

💻

고객정보 입력 화면 (Do it!안드로이드앱 프로그래밍 도전과제_09)

고객 정보 입력 화면을 프래그먼트로 만들어 보세요.

이 화면은 고객의 이름, 나이, 생년월일을 입력받기 위한 것입니다.

프래그먼트로 고객 정보 입력 화면을 만들어 액티비티에 넣어줍니다.

프래그먼트의 레이아웃에는 리니어 레이아웃이나 상대 레이아웃을 사용하고

그 안에 이름과 나이를 입력받는 입력상자, 생년월일을 표시하는 버튼 그리고 [저장] 버튼을 배치합니다.

생년월일을 표시하는 버튼에는 오늘 날짜를 자동으로 표시하며,

버튼을 누르면 [날짜 선택] 대화상자를 띄우고 날짜를 입력받아 표시합니다.

이름을 넣을 수 있는 입력상자에는 문자열을, 나이를 입력받기 위한 입력상자에는

숫자를 입력할 수 있도록 설정하여 적당한 키패드를 띄우도록 하고

나이는 세 자리까지만 입력할 수 있게 만듭니다.

[저장] 버튼을 누르면 토스트로 입력한 정보를 표시합니다.

 

 

참고할 점

이름과 나이를 입력받은 입력상자에 키 입력 유형을 설정합니다.

그리고 적당한 키패드를 듸우려면 inputType 속성을 이용합니다.

날짜를 설정하려면 DatePickerDialog와 SimpleDateFormat을 사용할 수 있습니다.

---

먼저 res/layout폴더에 fragment_ㅡmain.xml을 선언하여,

메인 xml에서는 프래그먼트만 연결해줍니다.

 

UI Code

 

<activity_main.xml>

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


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:text="고객정보 입력"
        android:textSize="25sp"
        android:textStyle="bold" />

    <fragment
        android:id="@+id/mainFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.example.mission_09.MainFragment"/>
</FrameLayout>

 

 

<fragment_main.xml>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <EditText
        android:id="@+id/nameInput"
        android:layout_width="228dp"
        android:layout_height="45dp"
        android:layout_marginTop="104dp"
        android:background="@drawable/linear_border"
        android:ems="10"
        android:hint="이 름"
        android:inputType="textPersonName"
        android:paddingLeft="10dp"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/ageInput"
        android:layout_width="227dp"
        android:layout_height="48dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/linear_border"
        android:ems="5"
        android:hint="나 이"
        android:inputType="number"
        android:maxLines="3"
        android:paddingLeft="10dp"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.494"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/nameInput" />


    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="생년월일"
        android:textSize="20sp"
        app:layout_constraintBottom_toTopOf="@+id/birthButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.27"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ageInput" />

    <Button
        android:id="@+id/birthButton"
        android:layout_width="226dp"
        android:layout_height="51dp"
        android:layout_marginTop="48dp"
        android:background="@drawable/linear_border"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.491"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ageInput" />

    <Button
        android:id="@+id/saveButton"
        android:layout_width="99dp"
        android:layout_height="62dp"
        android:layout_marginBottom="144dp"
        android:background="@drawable/filled_border"
        android:padding="10dp"
        android:text="저장"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.532"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

프래그먼트에서는 이름과 나이를 입력할 수 있는 EditText와 생년월일을 입력할 달력을 띄울 버튼을 선언합니다.

이때 inputType = "text"/"number"를 사용하여 키패드를 띄웠을 때 원하는 속성이 나오게 합니다.

또한 나이는 maxLength를 사용하여 3자 이상 입력할 수 없도록 합니다.

 

---

JAVA Code

 

<MainActivity.java>

package com.example.mission_09;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

 

<MainFragment.java>

package com.example.mission_09;

import android.app.DatePickerDialog;
import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
//import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.Toast;

import androidx.fragment.app.Fragment;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;

public class MainFragment extends Fragment {
    EditText nameInput;
    EditText ageInput;

    Button birthButton;

    public static SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy년 MM월 dd일");

    Date selectedDate;

    public MainFragment() {

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_main, container, false);


        nameInput = rootView.findViewById(R.id.nameInput);
        ageInput = rootView.findViewById(R.id.ageInput);

        birthButton = rootView.findViewById(R.id.birthButton);
        birthButton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                showDateDialog();
            }
        });

        Button saveButton = rootView.findViewById(R.id.saveButton);
        saveButton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                String nameStr = nameInput.getText().toString();
                String ageStr = ageInput.getText().toString();
                String birthStr = birthButton.getText().toString();

                Toast.makeText(getContext(), "이름 : " + nameStr + ", 나이 : " + ageStr + ", 생년월일 : " + birthStr, Toast.LENGTH_SHORT).show();
            }
        });


        // set selected date using current date
        Date curDate = new Date();
        setSelectedDate(curDate);

        return rootView;
    }

    private void showDateDialog() {
        String birthDateStr = birthButton.getText().toString();

        Calendar calendar = Calendar.getInstance();
        Date curBirthDate = new Date();
        try {
            curBirthDate = dateFormat.parse(birthDateStr);
        } catch(Exception ex) {
            ex.printStackTrace();
        }

        calendar.setTime(curBirthDate);

        int curYear = calendar.get(Calendar.YEAR);
        int curMonth = calendar.get(Calendar.MONTH);
        int curDay = calendar.get(Calendar.DAY_OF_MONTH);

        DatePickerDialog dialog = new DatePickerDialog(getContext(),  birthDateSetListener,  curYear, curMonth, curDay);
        dialog.show();
    }

    private DatePickerDialog.OnDateSetListener birthDateSetListener = new DatePickerDialog.OnDateSetListener() {
        public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
            Calendar selectedCalendar = Calendar.getInstance();
            selectedCalendar.set(Calendar.YEAR, year);
            selectedCalendar.set(Calendar.MONTH, monthOfYear);
            selectedCalendar.set(Calendar.DAY_OF_MONTH, dayOfMonth);

            Date curDate = selectedCalendar.getTime();
            setSelectedDate(curDate);
        }
    };

    private void setSelectedDate(Date curDate) {
        selectedDate = curDate;

        String selectedDateStr = dateFormat.format(curDate);
        birthButton.setText(selectedDateStr);
    }

}

 

CustomerFragment.java에서 프래그먼트의 정의를 할 것인데, 먼저 Fragment를 상속받은 다음, onCreateView()를

구현하면서 프래그먼트 활동을 정의합니다.

프래그먼트에는 setContentView()메서드가 없는 대신, Layoutinflater를 사용해 inflate()함으로써 XML레이아웃과

클래스를 연결시켜줍니다. ViewGroup을 하나 선언한 다음, 여기에 fragment_customer를 인플레이트 시키고, 각각

버튼마다 입력을 정의해 줍니다.

이때 날짜는 DatePickerDialog를 설정하는데 기본값으로 Calendar 객체에서 현재의 년, 월, 일을 설정해줍니다.

이 후 DatePickerDialog는 Calendar에 저장되고, updateDate()함수를 정의하여, SimpleDateFormat에서 방금

저장한 날짜를 원하는 형식("yyyy/MM/dd")로 바꿔줍니다.

액티비티에선 그냥 setContentView를 사용하여 메인 레이아웃을 실행시키기만 해도, 메인 레이아웃 내부의 프래그먼트가

작동되어서 원하는 결과를 얻을 수 있습니다.

 

 

---

<결과화면>