Androidアプリのアイテム選択をドラムロールで実装する

この記事はAndroidスマホ用のアプリ開発の中で、
今後の開発で再使用性が高いと思われるコーディングをまとめたものです。
Javaの開発経験、XML構文規則、Androidのアプリ開発経験がある方を対象としています。
Androidのアプリ開発でお役にたててれば、嬉しいです。
（これからAndroidのアプリ開発やJavaでの開発を始めたい方への案内は、記事の最後で紹介します）

この記事のテーマ

アイテム選択をドラムロールで実装する

健康志向の方にオススメです。

リンク

ポイント
NumberPicker
これからAndroidのアプリ開発やJavaでの開発を始めたい方へ

ポイント

iOSアプリの時間選択で採用されているドラムロール式ユーザインタフェースの実装を紹介します。
Androidでドラムロールに近いコンポーネントとしてNumberPickerがあります。
NumberPickerは数値選択を想定しているため、数値以外を扱う場合は少し工夫が必要です。

NumberPicker

NumberPicker | API reference | Android Developers

NumberPicker

NumberPickerは数値選択を想定しているため、数値以外を扱う場合はDisplayedValuesに文字列の配列を設定します。
小数点以下の数値を扱う場合も、文字列の配列で設定する必要があります。
文字列の配列から値をと取得する場合にgetValueで取得できる値を使用します。


    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home, container, false);
        :

        NumberPicker picker = view.findViewById(R.id.picker);
        : 
        // 小数選択
        picker(0, new ArrayList<>(), 1.0f, 2.0f, picker, 0);
        :
        // 文字列選択
        List<Menu> menuList = new ArrayList<>();
        menuList.add(new Menu(1, "テスト1", 1));
        menuList.add(new Menu(2, "テスト2", 2));
        menuList.add(new Menu(3, "テスト3", 3));
        picker(1, menuList, 0, 0, picker, 0);
        :
        return view;
    }

    // ピッカー
    public void picker(int type, List<Menu> menuList, float min, float max, NumberPicker picker, int index) {
        List<Integer> sequenceList = new ArrayList<>();
        List<Float> valuesList = new ArrayList<>();
        List<String> nameList = new ArrayList<>();
        String key;
        if (type > 0) {
            // 文字列（メニュー）
            for (Menu menu : menuList) {
                sequenceList.add(menu.sequence);
                nameList.add(menu.name);
                valuesList.add(menu.value);
            }
        } else {
            // 小数値
            for (float f = min; f <= max; f+=0.1f) {
                 sequenceList.add(-1);
                 nameList.add(String.format(Locale.getDefault(), "%.1f", f));
                 valuesList.add(f);
            }
        }
        if (sequenceList.isEmpty()) sequenceList.add(0);
        if (nameList.isEmpty()) nameList.add("0");
        if (valuesList.isEmpty()) valuesList.add(0f);
        int[] sequences = sequenceList.stream().mapToInt(Integer::intValue).toArray();
        String[] strings = nameList.toArray(new String[0]);
        double[] values = valuesList.stream().mapToDouble(Float::floatValue).toArray();
        ViewGroup.LayoutParams layoutParams = picker.getLayoutParams();
        layoutParams.height = values.length > 3? (int) (72 * mainActivity.displayMetrics.density) : (int) (192 * mainActivity.displayMetrics.density);
        picker.setLayoutParams(layoutParams);
        picker.setOnClickListener(view2 -> {
            index = picker.getValue() < strings.length ? picker.getValue() : 0;
            int sequence = sequences[index];
            double value = values[index];
            // ピッカー選択後の処理
            :
        });
        picker(picker, strings, index);
        :
    }

    // ピッカー表示
    private void picker(NumberPicker picker, String[] data, int index) {
        if (data.length > 0) {
            picker.setMinValue(0);
            picker.setDisplayedValues(data);
            picker.setMaxValue(data.length - 1);
            picker.setValue(data.length > index? index : 0);
            picker.setWrapSelectorWheel(true);
        }
    }
}

setWrapSelectorWheelはドラムロールの選択肢をループさせる場合にtrueに設定します
NumberPickerのリスナーにValueChangedListenerがありますが、値が変わる度にイベント発生するため、選択の終了で使用するのには不向きです。

参考：Menuクラス

public class Menu {
    public Integer sequence;
    public String name;
    public Float value;
    public Menu(Integer sequence,
                String name,
                Float value) {
        this.sequence = sequence;
        this.name = name;
        this.value = value;
    }
}

レイアウトXML

    : 
    <NumberPicker
        android:id="@+id/picker"
        android:layout_width="192dp"
        android:layout_height="72dp"
        android:layout_centerInParent="true"
        android:gravity="top"
        android:theme="@style/NumberPicker"/>
    :

NumberPickerのスタイルはテーマ（theme）で指定します。

スタイルXML

    <style name="NumberPicker" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:colorControlNormal">@android:color/transparent</item>
        <item name="android:textColorPrimary">@color/blue</item>
        <item name="android:textColorSecondary">@color/black</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">14sp</item>
        <item name="android:enabled">false</item>
    </style>

選択枠の非表示は、colorControlNormalに透明（transparent）を指定します。
数値の直接入力させない場合は、enabledにfalseを設定します。

今回は、ここまでです。

ドラムロールでアイテム選択を実装しているAndroidアプリです。