読者です 読者をやめる 読者になる 読者になる

AndroidでDatePickerDialogのまがい物を作る

Android

2日かけて、AndroidのDatePickerDialogのまがい物を作った。名前被らないように、DateSelectDialogって名前にした。

何で作ろうと思ったかというと、標準のDatePickerDialogでは「年だけ選択させる」とか「年と月だけ選択させる」っていうのができないから。それを実現しようと思うと、

yukiasu.blogspot.jp

この方のような方法をとることになる。昔のUIだったらこれでいけたんだけど、最近のDatePickerDialogは下の画像のようにすごい複雑化してるので、ただ単に「日付選択のViewだけ非表示にする」っていうのではうまくいかなさそう。

f:id:YaaMaa:20170220120210p:plain

今では非推奨となってしまったHOLOテーマを指定する手もあるけど、マテリアルデザインが好きなので戻りたくない…。そこで、もう自分でまがい物を作ればいいんちゃうかなって思った。

現在の年選択ダイアログが

f:id:YaaMaa:20170220120702p:plain

こんなん。この上半分を消して、年選択の右側に月選択と日選択のスピナーを表示させたらいいんかな?

年選択はListViewで実装されてるっぽいので、それに倣ってやってみる。

完成図は下のような感じ。

f:id:YaaMaa:20170220121501p:plain

f:id:YaaMaa:20170221015054p:plain


ダイアログの中身

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="@dimen/dialog_padding_top"
    android:paddingBottom="@dimen/dialog_padding_bottom"
    android:paddingStart="@dimen/dialog_horizontal_padding"
    android:paddingEnd="@dimen/dialog_horizontal_padding"
    android:baselineAligned="false">

    <ListView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:divider="@null"
        android:id="@+id/year"/>

    <ListView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:divider="@null"
        android:id="@+id/month"/>

    <ListView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:divider="@null"
        android:id="@+id/date"/>

</LinearLayout>

weightを1にして、均等に並べる。

ListViewの中身

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dateselect_circle"
        android:layout_centerInParent="true"
        android:tint="@color/colorAccent"
        android:alpha=".38"
        android:id="@+id/image"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:textSize="13sp"
        android:id="@+id/text"/>

</RelativeLayout>

ImageViewは背景の丸で、TextViewは「2016」とかの文字。

Dialogのコード

このダイアログを実際に使うときには

DateSelectDialog dialog = new DateSelectDialog();
Bundle args = new Bundle();
args.putInt("mode", Calendar.DATE);
args.putInt("default", CalendarManager.toEpochtime(date, Calendar.DATE));
dialog.setArguments(args);
dialog.show(getActivity().getSupportFragmentManager(), "dialog");

このように、"mode"にCalendar.DATE or Calendar.MONTH or Calendar.YEARを指定することでどこまで選択させるかを決め、"default"で初期値を入れることにする。なので、そういう情報はgetArguments()から取ってくる。

ダイアログクラスのonCreateDialogは下のようになった。

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
  inflater = LayoutInflater.from(getContext());
  final View contentView = inflater.inflate(R.layout.date_select_dialog, null);

  mode = getArguments().getInt("mode");
  selected = CalendarManager.fromEpochtime(getArguments().getInt("default"), mode);

  ListView yearList = (ListView) contentView.findViewById(R.id.year);
  // monthとdateも同様

  // ダイアログ作る
  Dialog dialog = new AlertDialog.Builder(getContext())
    .setView(contentView)
    .setPositiveButton("OK", new DialogInterface.OnClickListener() {
      @Override
      public void onClick(DialogInterface dialog, int which) {
        // あとで書く
      }
    })
    .setNegativeButton("Cancel", null)
    .create();

  // modeに応じてListViewを消す
  if (mode == Calendar.MONTH || mode == Calendar.YEAR) {
      dateList.setVisibility(View.GONE);
      if (mode == Calendar.YEAR) {
          monthList.setVisibility(View.GONE);
      }
  }

  // リストの中身を作成(数を+2してるのは、端っこに空白を作るため)
  List<Integer> yearObjects = new ArrayList<>();
  for (int i = 0; i < YEAR_LAST-YEAR_FIRST + 1 + 2; i++) {
      yearObjects.add(i);
  }
  List<Integer> monthObjects = new ArrayList<>();
  for (int i = 0; i < MONTH_COUNT + 2; i++) {
      monthObjects.add(i);
  }
  List<Integer> dateObjects = new ArrayList<>();
  for (int i = 0; i < CalendarManager.getEndOfMonth(selected) + 2; i++) {
      dateObjects.add(i);
  }

  // アダプタをセット
  yearList.setAdapter(new DateSelectDialogListAdapter(getContext(), 0, yearObjects, Calendar.YEAR));
  // monthとdateも同様

  // 端をフェードさせる
  yearList.setVerticalFadingEdgeEnabled(true);
  // monthとdateも同様

  updateTitle(dialog); // 現在選択されてる日時をタイトルにセットする
  return dialog;
}

Dialogの中身のListViewのアダプタ

まず、日付を変換する必要があったので、いろいろメソッドを用意した。この辺で使う数字には3タイプある。

  • リストでのポジション(0インデックス)

  • 普通に1から始まる(年は1970からだけど)表示用の数字

  • カレンダーにセットするとき用の数字(日付・年は表示用のままでいいのに、月だけは0インデックス)

それらを互いに変換しようと思うと、下のようになった。もうちょっと効率のいい方法あったかも…。

// positionから表示用の数字へ
static int pos2Displayed(int mode, int position) {
  switch (mode) {
    case Calendar.DATE:
      return position;
    case Calendar.MONTH:
      return position;
    case Calendar.YEAR:
    default:
      return position + YEAR_FIRST - 1;
  }
}

// positionからCalendar用の数字へ
static int pos2Calendar(int mode, int position) {
  switch (mode) {
    case Calendar.DATE:
      return position;
    case Calendar.MONTH:
      return position - 1;
    case Calendar.YEAR:
    default:
      return position + YEAR_FIRST - 1;
  }
}

// Calendar用の数字からpositionへ
static int calendar2Pos(int mode, Calendar calendar) {
  switch (mode) {
    case Calendar.DATE:
      return calendar.get(mode);
    case Calendar.MONTH:
      return calendar.get(mode) + 1;
    case Calendar.YEAR:
    default:
      return calendar.get(mode) - YEAR_FIRST + 1;
  }
}

ここからが一番ややこしかった。

特に、リストの一番上と一番下に空白を追加するところが厄介だった。

空白を入れないと、

f:id:YaaMaa:20170220131718p:plain

こんな感じで、フォーカスされてる日付を真ん中に持ってこようとしても限界がある。だから、空白を加えて下のようにする。

f:id:YaaMaa:20170220131805p:plain

その空白の高さ(ここではoffsetって名前にしてる)は「(ListView全体の高さ - 一行の高さ) / 2」なんだけど、ListView全体の高さっていうのがgetViewに来てからでないと求まらんかった。DialogFragmentの方のonCreateDialogとかonCreateViewとかでは、0が返ってきたりListView自体がnullだったりする。しかもよくわからないことに、ログ出力してみたらgetViewがすごい回数呼ばれてて、初めのうちはListViewの高さは0なのに、途中からちゃんとした数字になっていくみたいだった。

class DateSelectDialogListAdapter extends ArrayAdapter<Integer> {
  int mode;
  List<Integer> objects;
  int itemHeight;
  int offset = 0;

  public DateSelectDialogListAdapter(Context context, int resource, List<Integer> objects, int mode) {
    super(context, resource, objects);
    this.mode = mode;
    this.objects = objects;

    itemHeight = getResources().getDimensionPixelSize(R.dimen.date_select_dialog_item_height);
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    // 空白の分のViewかどうか
    boolean end = position == 0 || position == objects.size() - 1;

    // dateListの中身を月に合わせる
    if (mode == Calendar.DATE && objects.size() - 2 != CalendarManager.getEndOfMonth(selected)) {
      int excess = objects.size() - 2 - CalendarManager.getEndOfMonth(selected);
      for (int i = 0; i < Math.abs(excess); i++) {
        if (excess > 0) {
          objects.remove(objects.size() - 2);
        } else {
          objects.add(objects.size() - 1, objects.size() - 1);
        }
      }
      notifyDataSetChanged();
    }

    if (convertView == null) {
      convertView = inflater.inflate(R.layout.date_select_dialog_list_item, parent, false);
    }

    if (parent.getHeight() != 0 && offset == 0) {
      offset = (parent.getHeight() - itemHeight) / 2;

      // 選択中のアイテムが真ん中に来るようスクロール
      ((ListView) parent).setSelectionFromTop(calendar2Pos(selected), offset);

      convertView.getLayoutParams().height = end ? offset : itemHeight;
    }

    // TextViewの設定
    // end == trueならVisibilityをView.GONEにしたり、そうじゃなかったら数字を表示したり色を変えたり

    // 選択されている日であれば背景を表示
    convertView.findViewById(R.id.image).setVisibility(
      selected.get(mode) == pos2Calendar(position)
        ? View.VISIBLE
        : View.GONE
    );

    // クリックリスナー
    final int finalPosition = position;
    convertView.setOnClickListener(end ? null : new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        v.performHapticFeedback(HapticFeedbackConstants.LONG_PRESS);

        // 日付の変更
        selected.set(mode, pos2Calendar(finalPosition));
        updateTitle(getDialog());

        DateSelectDialogListAdapter.this.notifyDataSetChanged();
      }
    });

    return convertView;
  }
}

setSelectionFromTopやりすぎって思ったけど、一回セットしただけでは元に戻ってしまったので何回もやってる。

クリックリスナーでは、標準のDatePickerDialogと同じように、クリックされた際に短くバイブさせる。それがperformHapticFeedbackっていうメソッドなんだけど、ここでは引数であるfeedbackConstantにHapticFeedbackConstants.LONG_PRESSを指定してる。本当はCLOCK_TICKがよかったんだけど、APIレベルが足りないので仕方なく…。CLOCK_TICKが「ビッ」って感じだとすると、LONG_PRESSは「ズォンッ」って勢いでバイブレートしよる。

クリックが遅れて反応する問題

たまに、リストの中身をクリックしたら反応が遅れることがあった。

stackoverflow.com

ここの、LayoutParamsについて語ってる人の回答を見て解決!

convertViewに毎回新しく作ったLayoutParamsをセットしてたのが原因だった。

convertView.getLayoutParams().height = ○;

こうやって設定すればよかったみたい。

ダイアログの選択が完了したときのリスナー

インターフェースの中にメソッド入れといて、

public interface OnDateSelectedListener {
  void onSelect(Calendar calendar);
}

それをフィールドとしておいて、

OnDateSelectedListener onDateSelectedListener;

setOnDateSelectedListenerが呼び出されたときに登録する。

public void setOnDateSelectedListener(OnDateSelectedListener l) {
  this.onDateSelectedListener = l;
}

そしたら、さっき「あとで書く」って書いたOKボタンのリスナーには下のように書ける。

.setPositiveButton("OK", new DialogInterface.OnClickListener() {
  @Override
  public void onClick(DialogInterface dialog, int which) {
    if (onDateSelectedListener != null) {
      onDateSelectedListener.onSelect(今選択されてる日付のCalendarオブジェクト);
    }
  }
})

ダイアログを呼び出す側はこうなる↓

dialog.setOnDateSelectedListener(new DateSelectDialog.OnDateSelectedListener() {
  @Override
  public void onSelect(Calendar calendar) {
    // calendarを使って好きなことをする
  }
});

いろいろと効率悪いところもあるけど、これで上に貼った完成図のようなダイアログができた(*‘▽’)

横向けてもちゃんと表示されてる。

f:id:YaaMaa:20170220134937p:plain