【Android】イメージを含んだリッチな行を持つ RecyclerView

前回、RecyclerView の簡単な使い方を紹介しました。
www.shookuro.com

ご存じの通りRecyclerView は複数の行を保持します。

前回はこの行はただの Textview でした。

今回はイメージやテキストなど複数の部品を持つ行を保持する RecyclerView を作ります。

前回のソースを元にして修正していきます。

行のレイアウトを作成

拙者が作ったマルチカウンターというアプリで使用している行を RecyclerView の中で使います。
play.google.com

行のイメージはこちら
f:id:yyama1556:20210211145717p:plain

左からマイナスボタン、テキスト、プラスボタンと並んでいます。

この行を定義した XML を「counter_row.xml」として layout 配下に格納します。

プラスボタン（btn_plus.png）、マイナスボタン（btn_minus.png）は別途用意して drawable 配下に格納しておいてください。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:padding="10dp">

    <!-- マイナスボタン -->
    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/btn_minus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:adjustViewBounds="true"
        android:foreground="?android:attr/selectableItemBackground"
        android:padding="0dp"
        android:src="@drawable/btn_minus" />

    <!-- テキスト -->
    <TextView
        android:id="@+id/counter_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_vertical|center_horizontal"
        android:text="1,000"
        android:textSize="40sp" />

    <!-- プラスボタン -->
    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/btn_plus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_margin="0dp"
        android:adjustViewBounds="true"
        android:foreground="?android:attr/selectableItemBackground"
        android:padding="0dp"
        android:src="@drawable/btn_add" />

</LinearLayout>

アダプタの修正

MyAdapter を修正していきます。

まずは onCreateViewHolder メソッド。TextView の代わりに counter_row.xml で定義した１行を作成し、MyViewHolder のコンストラクタに渡します。
　

修正前：

    @Override
    public MyAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent,
                                                     int viewType) {
        TextView v = new TextView(parent.getContext());
        MyViewHolder vh = new MyViewHolder(v);
        return vh;
    }

修正後：

    @Override
    public MyAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent,
                                                     int viewType) {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.counter_row, parent, false);
        MyViewHolder vh = new MyViewHolder(v);
        return vh;
    }

　
　
次にインナークラスの MyViewHolder を修正します。
　
フィールドの TextView には counter_row.xml で定義されている TextView を設定します。
　
修正前：

    public static class MyViewHolder extends RecyclerView.ViewHolder {
        public TextView textView;
        public MyViewHolder(TextView v) {
            super(v);
            textView = v;
            textView.setTextSize(30);
        }
    }

修正後：

    public static class MyViewHolder extends RecyclerView.ViewHolder {
        public TextView textView;
        public MyViewHolder(View v) {
            super(v);
            textView = v.findViewById(R.id.counter_num);
            textView.setTextSize(30);
        }
    }

　
これで完成です。実行したら次のような画面が表示されます。
f:id:yyama1556:20210211145006p:plain