Androidアプリ開発日誌 5日目

目標がないとダラダラしちゃうので、ひとまず超シンプルな日記アプリを作ることにします。

今日はこんな感じで日付を選択する機能を追加。

f:id:xterm256color:20170723221836p:plain

目次

日付を画面表示するテキストビューの追加

まずはフラグメントのXMLファイルに日付を表示するテキストビューを追加。 ただし、このビューは直接テキスト編集するかわりにカレンダーを開くって挙動をさせたいので android:focusable="false"android:clickable="true"の設定を追加しときます。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/editDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="date"
        android:focusable="false"
        android:clickable="true"
        ... />

</android.support.constraint.ConstraintLayout>

フラグメントのonCreateViewでカレンダー表示を紐付け

onCreateViewで日付TextViewをクリックした時の挙動を設定していきます。

Javaで日付扱うときのハマりポイントだけど、月は0始まりなので注意しないといけませんね! (ローカル変数_monthの値が0の時は1月, 11のときは12月です)

public class AddDiaryFragment extends Fragment {

    # 日付
    private int _year;
    private int _month;
    private int _date;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_add_diary, container, false);

        final EditText dateText = (EditText) view.findViewById(R.id.editDate);

        // 日付の初期値は、当日の値。
        Calendar cal = Calendar.getInstance();
        _year = cal.get(Calendar.YEAR);
        _month = cal.get(Calendar.MONTH);
        _date = cal.get(Calendar.DATE);
        
        // 月は0始まりなので、1足しておく。
        String dateStr = _year + "/" + (_month+1) + "/" + _date;
        dateText.setText(dateStr);

        dateText.setOnClickListener(new View.OnClickListener(){
            @RequiresApi(api = Build.VERSION_CODES.N)
            @Override
            public void onClick(View view) {

                // カレンダーのダイアログが表示されたときに初期選択されている日付。
                final int year = _year;
                final int month = _month;
                final int date = _date;

                DatePickerDialog datePickerDialog=new DatePickerDialog(view.getContext(), new DatePickerDialog.OnDateSetListener() {
                    @Override
                    public void onDateSet(DatePicker datePicker, int y, int m, int d) {
                        _year = y;
                        _month = m;
                        _date = d;
                        String date = y + "/" + (m+1) + "/" + d;
                        dateText.setText(date);
                    }
                }, year, month, date);

                datePickerDialog.show();
            }
        });

        return view;
    }
}

ほとんどここからコピペしました。

android - Datepicker: How to popup datepicker when click on edittext - Stack Overflow

画面イメージ

f:id:xterm256color:20170723224630p:plain

日付部分をタップすると。。

f:id:xterm256color:20170723221836p:plain

カレンダーのダイアログが表示される!ヒュー!やったー