도전과제 09 :고객 정보 입력화면의 구성 (Do it 안드로이드 앱 프로그래밍) [JAVA]

 

도전과제 09

고객 정보 입력 화면을 프래그먼트로 만들어 보세요. 이 화면은 고객의 이름, 나이, 생년월일을 입력받기 위한 것입니다.

1. 프래그먼트로 고객 정보 입력 화면을 만들어 액티비티에 넣어줍니다.
2. 프래그먼트의 레이아웃에는 리니어 레이아웃이나 상대 레이아웃을 사용하고 그 안에 이름과 나이를 입력받는 입력상자, 생년월일을 표시하는 버튼 그리고 [저장] 버튼을 배치합니다.
3. 생년월일을 표시하는 버튼에는 오늘 날짜를 자동으로 표시하며, 버튼을 누르면 [날짜 선택] 대화상자를 띄우고 날짜를 입력받아 표시합니다. 이름을 넣을 수 있는 입력상자에는 문자열을, 나이를 입력받기 위한 입력상자에는 숫자를 입력할 수 있도록 설정하여 적당한 키패드를 띄우도록 하고 나이는 세 자리까지만 입력할 수 있게 만듭니다.
4. [저장] 버튼을 누르면 토스트로 입력한 정보를 표시합니다.

참고할 점

이름과 나이를 입력받은 입력상자에 키 입력 유형을 설정합니다.
그리고 적당한 키패드를 듸우려면 inputType 속성을 이용합니다.
날짜를 설정하려면 DatePickerDialog와 SimpleDateFormat을 사용할 수 있습니다.

 

풀이

우선 res/layout 폴더에 fragment_customer.xml을 선언하여, 메인 xml 에서는 프레그먼트만 연결해준다.

<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"
    tools:context=".MainActivity">

    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/mainFragment"
        android:name="org.techtown.doitmission_09.CustomerFragment"/>

</androidx.constraintlayout.widget.ConstraintLayout>

프레그먼트에서는 이름과 나이를 칠 수 있는 EditText와 생년월일을 입력할 달력을 띄울 버튼을 선언한다.  이때 inputType = "text" / "number" 를 사용하여 키패드를 띄웠을 때 원하는 속성이 나오게 한다. 또한 나이는 maxLength를 사용하여 3자 이상 입력할 수 없도록 한다.

public class CustomerFragment extends Fragment {
    EditText editName;
    EditText editAge;
    Button editDate;


    Calendar myCalendar = Calendar.getInstance();
    //기본값으로 오늘 날짜
    DatePickerDialog.OnDateSetListener setDate= new DatePickerDialog.OnDateSetListener() {
        @Override
        public void onDateSet(DatePicker datePicker, int i, int i1, int i2) {
            myCalendar.set(Calendar.YEAR, i);
            myCalendar.set(Calendar.MONTH,i1);
            myCalendar.set(Calendar.DAY_OF_MONTH,i2);
            updateDate();
        }
    };

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

        editName = rootView.findViewById(R.id.editName);
        editAge = rootView.findViewById(R.id.editAge);
        editDate = rootView.findViewById(R.id.editDate);
        Date currentTime = Calendar.getInstance().getTime();
        editDate.setText(new SimpleDateFormat("YYYY/MM/dd",Locale.getDefault()).format(currentTime));



        editDate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                new DatePickerDialog(getContext(), setDate, myCalendar.get(Calendar.YEAR), myCalendar.get(Calendar.MONTH), myCalendar.get(Calendar.DAY_OF_MONTH)).show();

            }
        });

        Button button = rootView.findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {    //눌렀을 때 이름이 뜨게
                String name = editName.getText().toString();
                String age = editAge.getText().toString();
                String date = editDate.getText().toString();

                if(name.length() < 1 | age.length() < 1 | date.length() < 1){
                    Toast.makeText(getContext(), "정보를 모두 입력하세요", Toast.LENGTH_LONG ).show();
                }
                else{   //토스트 뜨게
                    Toast.makeText(getContext(), "이름 : " + name + " 나이 : " + age + " 생년월일 : "+ date, Toast.LENGTH_LONG).show();
                }
            }
        });
        return rootView;
    }

    public void updateDate(){   //날짜 형식 변환
        String format = "YYYY/MM/dd";
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat(format, Locale.KOREA);
        editDate.setText(simpleDateFormat.format(myCalendar.getTime()));
    }
}

CustomerFragment.java에서 프래그먼트의 정의를 할 것인데, 우선 Fragment를 상속받은 다음, onCreateView()를 구현하면서 프래그먼트의 활동을 정의한다. 

프래그먼트에는 setContentView() 메서드가 없는 데신, LayoutInflater를 사용해 inflate()함으로써 XML레이아웃과 클래스를 연결시켜준다. ViewGroup을 하나 선언한 다음, 여기에 fragment_customer를 인플레이트 시키고, 각각 버튼마다 입력을 정의한다. 

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

이후 DatePickerDialog는 myCalendar에 저장되고, updateDate()함수를 정의하여, SimpleDateFormat에서 방금 저장한 날짜를 원하는 형식 ("YYYY/MM/dd")로 바꿔준다.

액티비티에선 그냥 setContentView를 사용해 메인 레이아웃을 실행시키기만 해도, 메인 레이아웃 내부의 프래그먼트가 작동되어 원하는 결과를 얻을 수 있다.

 

결과

전체 소스 코드 : https://github.com/howtolivelikehuman/DoitAndroid/tree/master/DoitMission_09