Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@matsumo0922(daichi-matsumoto)

[Java & Kotlin] 複数選択可能なRecyclerViewを作る

Last updated at Posted at 2020-08-26

##RecyclerViewって機能なにもないよね
僕自身、Android開発をはじめてから1年ほどはListView信者でした。「だってRecyclerViewって機能なにもないし、ListViewの劣化版でしょ？なんか難しそうで使いづらいし、生理的に無理」と思っていたんです。ListViewにはDividerやFastScroll、ChoiceModeだってある。それなのに後継のRecyclerViewには何も備わっていないじゃないか！皆さんもそう思っていた時期があったのではないでしょうか。

しかし実際はRecyclerViewのほうが扱いやすいんですよね。これが栄えている理由です。僕自身、ListViewのほうが簡単に実装できるとしてもRecyclerViewで実装してしまいます。昔、徹夜で必死にRecyclerAdapterを作る練習をした成果かもしれませんが、後の拡張性を考慮するとRecyclerViewで実装したほうがいいんです。今ではListViewを裏切ってRecyclerView信者になっています。

RecyclerViewの便利さアピールはこの辺にして、本題に入るとしましょう。RecyclerView信者の皆さんが書いた良質な記事がたくさんありますので、そちらもお読みください（勝手に信者にしてしまってごめんなさい）

・RecyclerViewの基本
・今更だけど、RecyclerViewの基本をまとめてみた

##RecyclerViewでも選択したい
選択可能なアイテムを作りたいという意味です。機能もなにもないRecyclerViewですが、この私が直々に選択可能なSelectableRecyclerViewに改造してあげましょう。というのが本記事の内容です。最近のアプリではほぼ確実に実装されているこの機能ですが、意外にも解説された記事が少ないらしく、この記事を書いてみました。

####選択可能なSelectableRecyclerViewの機能
様々なアプリに実装されているため、皆さんもどのような機能かほぼ知っていると思いますが、一応機能のリストを作っておこうと思います。

・普段は普通のRecyclerViewとして振る舞う
・アイテムを長押して選択モードに入る
・選択モード時はNormalClickでも選択可能（長押しでも選択可能）
・選択済みのアイテムをClickすると選択解除
・すべてのアイテムが選択解除されると、自動的に選択モードをOFFにする
・選択済みのアイテムを取得できる
・場合によっては、常に選択モードにできる

これくらいですかね。アプリのよって機能に違いはあってもこれらの機能は共通していると思います。何か別の機能が必要になった場合は各自で実装してください。この拡張性もRecyclerViewの良さですよね。

####環境
SelectableRecyclerViewと言っているくらいですから、Viewにしてやろうかとも思ったんですが、拡張性を考えるとそれはなしですね。人によって必要な機能は異なりますから。ということで今回はAdapterで実装していこうと思います。その前に、今回の環境を書いておきます。基本Kotlinベースで書いていきますが、Javaでの需要もあるようなのでAdapter本体はJavaでの実装も書いておきます。（Javaに関しては初心者なので間違っていたら言ってください）

・Java 8
・Kotlin 1.4
・Android Studio 4.0.1
・Target SDK 30
・min SDK 24
・Build tools 30.0.1

##選択可能にしてみる
####AdapterとHolder

Kotlin版（クリックして展開）
最初Javaで書いていたのでHolderはJavaの方を使います。Javaのやつをそのまま使えるなんてKotlinって神。
SelectableAdapterWithKotlin.kt
class SelectableAdapterWithKotlin(private val context: Context, private val itemDataList: List<String>, private val isAlwaysSelectable: Boolean): RecyclerView.Adapter<SelectableHolder>(){

    //isAlwaysSelectableがONのときは最初から選択モード
    private var isSelectableMode = isAlwaysSelectable
    private val selectedItemPositions = mutableSetOf<Int>()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): SelectableHolder {
        return SelectableHolder(LayoutInflater.from(parent.context).inflate(R.layout.view_multi_url_card, parent, false))
    }

    @SuppressLint("SetTextI18n")
    override fun onBindViewHolder(holder: SelectableHolder, position: Int) {
        with(holder) {
            mainTextView.text = itemDataList[position]
            subTextView.text = "position $position"

            //このアイテムが選択済みの場合はチェックを入れる（✓のイメージを表示する）
            checkLayout.visibility = if (isSelectedItem(position)) View.VISIBLE else View.GONE

            cardView.setOnClickListener {

                //選択モードでないときは普通のクリックとして扱う
                if (!isSelectableMode && !isAlwaysSelectable) Toast.makeText(context, "Normal click", Toast.LENGTH_SHORT).show()
                else {
                    if (isSelectedItem(position)) removeSelectedItem(position)
                    else addSelectedItem(position)

                    onBindViewHolder(holder, position)
                }
            }
            cardView.setOnLongClickListener {

                //ロングクリックで選択モードに入る
                if (isSelectedItem(position)) removeSelectedItem(position)
                else addSelectedItem(position)

                onBindViewHolder(holder, position)

                return@setOnLongClickListener true
            }
        }
    }

    override fun getItemCount(): Int = itemDataList.size

    //選択済みのアイテムのPositionが記録されたSetを外部に渡す
    fun getSelectedItemPositions() = selectedItemPositions.toSet()
    
    //指定されたPositionのアイテムが選択済みか確認する
    private fun isSelectedItem(position: Int): Boolean = (selectedItemPositions.contains(position))

    //選択モードでないときは選択モードに入る
    private fun addSelectedItem(position: Int){
        if(selectedItemPositions.isEmpty() && !isAlwaysSelectable){
            isSelectableMode = true
            Toast.makeText(context, "Selectable Mode ON", Toast.LENGTH_SHORT).show()
        }
        selectedItemPositions.add(position)
    }

    //選択モードで最後の一個が選択解除された場合は、選択モードをOFFにする
    private fun removeSelectedItem(position: Int){
        selectedItemPositions.remove(position)
        if(selectedItemPositions.isEmpty() && !isAlwaysSelectable){
            isSelectableMode = false
            Toast.makeText(context, "Selectable Mode OFF", Toast.LENGTH_SHORT).show()
        }
    }
}
Java版（クリックして展開）
SelectableHolder.java
public class SelectableHolder extends RecyclerView.ViewHolder {

    public TextView mainTextView;
    public TextView subTextView;
    public CardView cardView;
    public ConstraintLayout checkLayout;

    public SelectableHolder(View itemView) {
        super(itemView);

        mainTextView = itemView.findViewById(R.id.VMU_MainText);
        subTextView = itemView.findViewById(R.id.VMU_SubText);
        cardView = itemView.findViewById(R.id.VMU_CardView);
        checkLayout = itemView.findViewById(R.id.VMU_CheckLayout);
    }
}
SelectableAdapter.java
public class SelectableAdapter extends RecyclerView.Adapter<SelectableHolder> {

    private Context context;
    private List<String> itemDataList;

    private Boolean isSelectableMode;
    private Boolean isAlwaysSelectable;
    private Set<Integer> selectedItemPositionsSet = new ArraySet<>();

    public SelectableAdapter(Context context, List<String> itemDataList, Boolean isAlwaysSelectable){
        this.context = context;
        this.itemDataList = itemDataList;
        this.isAlwaysSelectable = isAlwaysSelectable;

        //isAlwaysSelectableがONのときは最初から選択モード
        isSelectableMode = isAlwaysSelectable;
    }

    @NonNull
    @Override
    public SelectableHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new SelectableHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.view_multi_url_card, parent, false));
    }

    @SuppressLint("SetTextI18n")
    @Override
    public void onBindViewHolder(@NonNull final SelectableHolder holder, final int position) {
        holder.mainTextView.setText(itemDataList.get(position));
        holder.subTextView.setText("position " + position);

        //このアイテムが選択済みの場合はチェックを入れる（✓のイメージを表示する）
        if(isSelectedItem(position)){
            holder.checkLayout.setVisibility(View.VISIBLE);
        }
        else {
            holder.checkLayout.setVisibility(View.GONE);
        }

        holder.cardView.setOnClickListener(view -> {

            //選択モードでないときは普通のクリックとして扱う
            if(!isSelectableMode && !isAlwaysSelectable) Toast.makeText(context, "Normal click", Toast.LENGTH_SHORT).show();
            else {
                if(isSelectedItem(position)) removeSelectedItem(position);
                else addSelectedItem(position);

                onBindViewHolder(holder, position);
            }
        });

        holder.cardView.setOnLongClickListener(view -> {

            //ロングクリックで選択モードに入る
            if (isSelectedItem(position)) removeSelectedItem(position);
            else addSelectedItem(position);

            onBindViewHolder(holder, position);

            return true;
        });
    }

    @Override
    public int getItemCount() {
        return itemDataList.size();
    }

    //選択済みのアイテムのPositionが記録されたSetを外部に渡す
    Set<Integer> getSelectedItemPositions(){
        return selectedItemPositionsSet;
    }

    //指定されたPositionのアイテムが選択済みか確認する
    private Boolean isSelectedItem(int position){
        return selectedItemPositionsSet.contains(position);
    }

    //選択モードでないときは選択モードに入る
    private void addSelectedItem(int position){
        if(selectedItemPositionsSet.isEmpty() && !isAlwaysSelectable) {
            isSelectableMode = true;
            Toast.makeText(context, "Selectable Mode ON", Toast.LENGTH_SHORT).show();
        }
        selectedItemPositionsSet.add(position);
    }

    //選択モードで最後の一個が選択解除された場合は、選択モードをOFFにする
    private void removeSelectedItem(int position){
        selectedItemPositionsSet.remove(position);
        if(selectedItemPositionsSet.isEmpty() && !isAlwaysSelectable){
            isSelectableMode = false;
            Toast.makeText(context, "Selectable Mode OFF", Toast.LENGTH_SHORT).show();
        }
    }
}

####Activity
ActivityはKotlinで書きます。そもそも大したこと書いてないので用意に移植できると思います。Buttonを押すと、Adapterから選択状態のアイテムのPositionを受け取り（getSelectedItemPositions）、Activityが保持しているListと照らし合わせて値を取得し、表示します。

以下コード（クリックして展開）
MainActivity.kt
class MainActivity : AppCompatActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val itemDataList = listOf("ポメラニアン", "トイプードル", "柴犬", "ブルドック", "ダックスフント", "ドーベルマン", "ビーグル", "ラブラドールレトリバー", "ゴールデンレトリバー", "シベリアンハスキー")
        val selectableAdapter = SelectableAdapterWithKotlin(this, itemDataList, false)

        AM_RecyclerView.apply {
            setHasFixedSize(false)
            adapter = selectableAdapter
            layoutManager = LinearLayoutManager(this@MainActivity)
        }

        AM_Button.setOnClickListener {
            MaterialAlertDialogBuilder(this)
                .setTitle("選択したアイテム")
                .setMessage(selectableAdapter.getSelectedItemPositions().joinToString(separator = "\n") { itemDataList[it] })
                .setPositiveButton("OK", null)
                .show()
        }
    }
}

####レイアウト
選択済みというのを示すためにちょっと複雑になっています。今回はViewの表示・非表示で選択状態を示していますが、CheckboxにCheckを入れるとかでもいいと思います。

以下コード（クリックして展開）
view_multi_url_card.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="wrap_content">

    <androidx.cardview.widget.CardView
        android:id="@+id/VMU_CardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="8dp"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="8dp"
        app:cardBackgroundColor="@color/colorBackgroundZ4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.cardview.widget.CardView
                android:id="@+id/cardView"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:cardBackgroundColor="@android:color/transparent"
                app:cardElevation="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center">

                    <ImageView
                        android:id="@+id/VMU_Image"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:scaleType="centerCrop"
                        android:src="@drawable/im_dog"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/VMU_CheckLayout"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:alpha="0.9"
                        android:background="@color/colorAccent"
                        android:visibility="gone">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:layout_marginStart="16dp"
                            android:layout_marginTop="16dp"
                            android:layout_marginEnd="16dp"
                            android:layout_marginBottom="16dp"
                            android:scaleType="fitCenter"
                            android:src="@drawable/ic_check"
                            app:layout_constraintBottom_toBottomOf="parent"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toTopOf="parent" />

                    </androidx.constraintlayout.widget.ConstraintLayout>

                </androidx.constraintlayout.widget.ConstraintLayout>
            </androidx.cardview.widget.CardView>

            <LinearLayout
                android:id="@+id/linearLayout"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginBottom="16dp"
                android:orientation="vertical"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/cardView"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/VMU_MainText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:text="メインテキスト"
                    android:textColor="@color/colorChar"
                    android:textSize="14sp" />

                <TextView
                    android:id="@+id/VMU_SubText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:ellipsize="end"
                    android:gravity="end"
                    android:singleLine="true"
                    android:text="サブテキスト"
                    android:textColor="@color/colorCharSec"
                    android:textSize="12sp" />

            </LinearLayout>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@color/colorBackgroundZ3"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/AM_RecyclerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/AM_Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        android:text="選択したアイテムを見る" />

</LinearLayout>

####Gradle
RecyclerViewを使うにはGradleに追記が必要です。今回はCardViewなども使っているのでそれらも書く必要があります。

以下コード（クリックして展開）
build.gradle(app)
dependencies {
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'com.google.android.material:material:1.2.0'
}

##動かしてみた
Pixel 3 (Android 11)で動かしてみました。Kotlin版・Java版どちらとも同じ動作をします。
実機で動いているZIF

##最後に
今回は選択可能なRecyclerViewを作ってみました。上記のGIFではisAlwaysSelectableはfalseになっていますが、trueにすれば常に選択可能になると思います。Javaの方ではミスがあるかもしれませんので、見つけたらコメントお願いします。参考になっても参考にならなくてもLGTMしてくださいね（嘘です。参考にならなかったらコメントしてください。できる限りお手伝いします）

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?