TimePickerDialogで時刻を設定(選択)する方法[Android Studio, Java]

スポンサーリンク
Android Studio

ユーザーに時計画面で時刻を設定させたい!!

こういったお悩みを解決いたします!もちろんソースコード付きです!

通知機能やスケジュール管理など、日付情報を使うことで開発するアプリの幅はぐーんと広がりますよね。

ぜひ参考にしてみてください。

※本記事はJavaのお話になります。(Kotlinについては勉強不足です。。)

Kotlinの方は以下の記事でおそらく似たようなことを解説されていると思います。

qiita.com

スポンサーリンク

環境

– Android Studio 4.0

– 使用言語 Java

スポンサーリンク

時刻選択の流れ

時刻選択の流れとしては以下になります。

1.EditTextをタップする

f:id:pikaoichan:20200822174321p:plain

2.時刻選択画面を表示し、時刻を選択する。

f:id:pikaoichan:20200822174327p:plain

3.時刻を選択すると、EditTextに選択した時刻が表示される

f:id:pikaoichan:20200822174334p:plain

実装

実装の大まかな概要としては以下になります。

  • DialogFragmentクラスを継承したクラス(本ページではTimePickerDialogFragmentクラス)を作成する
  • Activityに、EditTextをタップしたときにTimePickerDialogを表示する処理を記述する
  • TimePickerDialogFragmentクラスに、時刻を選択した際の処理を記述する

詳しくみていきましょう。

まずはレイアウトファイル(activity_main.xml)とstring.xmlです。

activity_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"
tools:context=".MainActivity">
<EditText
android:id="@+id/etTimePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="7"
android:hint="@string/etTimePickerHint"
android:inputType="time"
android:focusable="false"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

hint はテキストが何もセットされていないときに薄く表示される文字列です。

focusableをfalseにすることで、タップしたときにキーボードが表示されなくなります。

string.xml

<resources>
<string name="app_name">TimePickerSample</string>
<string name="etTimePickerHint">時刻を入力</string>
</resources>

hint で表示する文字列のみ用意しています。

ここからはメインである、ActivityおよびTimePickerDialogFragmentについて解説します。

MainActivity.java

package com.example.timepickersample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
public class MainActivity extends AppCompatActivity {
  private EditText _etTimePicker;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    _etTimePicker = findViewById(R.id.etTimePicker);
    _etTimePicker.setOnClickListener(new etOnClickListener());
  }
  public class etOnClickListener implements View.OnClickListener{
    @Override
    public void onClick(View view) {    //タップされたときの処理
      TimePickerDialogFragment timePickerDialogFragment = new TimePickerDialogFragment(); 
      //TimePickerDialogFragmentクラスのインスタンスを生成
      timePickerDialogFragment.show(getSupportFragmentManager(), "TimePickerDialogFragment"); //ダイアログを表示
    }
  }
  public void setTextToEditText(String timeText) {    //EditTextに文字列をセットする関数
    _etTimePicker.setText(timeText);
  }
}

TimePickerDialogFragment.java

package com.example.timepickersample;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.widget.TimePicker;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.DialogFragment;
public class TimePickerDialogFragment extends DialogFragment {
  @NonNull
  @Override
  public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
    final MainActivity mainActivity = (MainActivity) getActivity();
    TimePickerDialog timePickerDialog = new TimePickerDialog(
      mainActivity,
      new TimePickerDialog.OnTimeSetListener() {
        @Override
        public void onTimeSet(TimePicker view, int hour, int minute) {  //時刻が設定されたときの処理
          String timeText = hour + ":" + String.format("%02d", minute);    //EditTextに表示する文字列
          mainActivity.setTextToEditText(timeText);
        }
      },
    12, //初期値(時)
    0,  //初期値(分)
    true
    );
    return timePickerDialog;
  }
}

まずは、ActivityのOnCreateでEditTextを取得し、クリックリスナをセットします。そしてそのリスナのOnClickでダイアログを表示する処理を記述します。

TimePickerDialogFragmentクラスでは、ダイアログを生成する処理や時刻が選択されたときの処理などを記述しています。

生成するTimePickerDialogのコンストラクタは引数が5個あります。

第2引数はユーザーが日付を選択し終わったときのリスナ(TimePickerDialog.OnTimeSetListener)になります。その中のOnTimeSetで時刻が選択されたときの処理を記述します。

今回は選択された時刻を文字列に変換し、EditTextに表示するシンプルな処理としています。

minuteを表示するときの注意ですが、これはただの整数になるので、そのまま出力してしまうと”12:0″のような表記になってしまいます

一般的には”12:00″のように分は2桁で表記しますので、String.format()で形式を指定しています

第3,4引数は表示するTimePickerDialogの時刻の初期値になります。今回は、12:00を初期値としています。

第5引数は、時刻の選択方法を24時間表記(true)にするかAM/PM表記(false)にするかの決定になります。

trueの場合                                                                   falseの場合

f:id:pikaoichan:20200822174327p:plain

f:id:pikaoichan:20200822174338p:plain

正直これに関しては好みですね。どちらもできることは変わらないです。

ちなみに、私は24時間表記の方が好きです。

 おわりに

いかがでしたでしょうか。

今回はAndroidアプリで時刻を選択する処理の解説をしました。

↓↓↓↓同様に日付の選択方法を見たい方はこちら↓↓↓↓

DatePickerDialogで日付を設定(選択)する方法【Android Studio, Java】
Androidアプリでカレンダーを表示し、ユーザーに日付を選択してもらう方法を分かりやすく解説します!

以上です。ありがとうございました。

コメント

タイトルとURLをコピーしました