サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2>はじめに</h2>

はじめまして、この3月に入社したAndroidエンジニアの&nbsp;<a href="https://twitter.com/kgmyshin" target="_blank">kgmyshin</a>&nbsp;です。

Androidより、2018年3月初旬に Support Library 28.0.0 alpha がリリースされましたね。&nbsp;<a href="https://developer.android.com/topic/libraries/support-library/revisions.html#28-0-0-alpha1" target="_blank">ReleaseNote</a>を見てみると、新しいAPIとして<a href="https://developer.android.com/reference/androidx/recyclerview/selection/package-summary.html" target="_blank">recyclerview-selection</a>が追加されました。

今回は、早速その新しいAPIを触ってみた所感として、Android開発者向けに「どういうものなのか」「どう使えば良いのか」を紹介していきたいと思います。

<h2>recyclerview-selection とは</h2>

まずはこちらを見てください。

<img alt="" height="1422" src="https://image.dmm-corp.com/y4oitme6l1ij53pgiufxxiy1vaah" width="800" />

RecyclerViewでこの挙動を自力で実装しようとすると少し大変です。 タップで複数選択する機能であれば難しくないですが、ドラッグ中に選択状態にしたり、選択中のみオートスクロールも実装したりとなると少し苦労します。

この〈複数選択をドラッグでやりつつオートスクロールなども〉を良い感じにやってくれるのが&nbsp;<code>recyclerview-selection</code>&nbsp;です。

<h3>使い方</h3>

すごく大まかには、2ステップで実装できます。

<ol>
	<li><code>SelectionTracker</code>&nbsp;インスタンスをつくる</li>
	<li><code>RecyclerView.Adapter#onBindViewHolder</code>&nbsp;で選択状態を&nbsp;<code>View</code>&nbsp;に反映する</li>
</ol>

早速実装してみましょう。

今回は、下記の&nbsp;<code>Book</code>&nbsp;クラスのリストを一覧表示した&nbsp;<code>RecyclerView</code>&nbsp;に対して複数選択機能を実装していきます。

<pre>
<code>data class Book(
 val id: Long,
 val title: String,
 val subTitle: String
)</code></pre>

選択状態中に&nbsp;<code>getSelection</code>&nbsp;を呼び出した時に、どのリストを返却してほしいか。 選択中の&nbsp;<code>Book</code>&nbsp;そのものを返してほしいのか、 選択中の&nbsp;<code>Book</code>&nbsp;の&nbsp;<code>id</code>&nbsp;を返すのかで実装が少し変わってきます。

今回は後者の方法で実装していきます。前者の方法での実装例はgithubにあげてありますので、興味あるの方はそちらをご覧ください。

<ul>
	<li><a href="https://github.com/kgmyshin/recyclerview-selection-sample" target="_blank">kgmyshin/recyclerview-selection-sample</a></li>
</ul>

<h2>前準備</h2>

まずは&nbsp;<code>stableId</code>&nbsp;に&nbsp;<code>book.id</code>を使うようにします。

<code>stableId</code>&nbsp;とは&nbsp;<code>RecyclerView</code>&nbsp;に設定する各アイテムのIDのことです。自分で有効にしない限りは&nbsp;<code>NO_ID</code>&nbsp;が設定されています。これを有効にして適切に設定してあげることで&nbsp;<code>RecyclerView</code>&nbsp;のパフォーマンスに効くことがあります。

下記のように&nbsp;<code>RecyclerView.Adapter#setHasStableIds</code>&nbsp;で&nbsp;<code>true&nbsp;</code>をセットし、<code>getItemId</code>&nbsp;をオーバーライドして&nbsp;<code>book.id</code>&nbsp;を返却するようにすれば前準備の完了です。

<pre>
<code>class BookAdapter(
 context: Context,
 private val bookList: List&lt;Book&gt;
) : RecyclerView.Adapter&lt;BookViewHolder&gt;() {
 :
 init {
 setHasStableIds(true)
 }
 :
 override fun getItemId(position: Int): Long = bookList[position].id
 :
}</code></pre>

<h2>SelectionTrackerインスタンスをつくる</h2>

次に&nbsp;<code>SelectionTracker</code>&nbsp;インスタンスを作りましょう。&nbsp;<code>Builder</code>&nbsp;を用いて下記のように作ります。

<pre>
<code>selectionTracker = SelectionTracker.Builder&lt;Long&gt;(
 "my-selection-id",
 binding.recyclerView,
 StableIdKeyProvider(binding.recyclerView),
 BookIdDetailsLookup(binding.recyclerView),
 StorageStrategy.createLongStorage()
).build()</code></pre>

<code>Builder&nbsp;</code>のコンストラクタの各引数についての説明は下記です。

<table border="1" cellpadding="1" cellspacing="1" style="width:500px;">
	<tbody>
		<tr>
			<td>第n引数</td>
			<td>例</td>
			<td>説明</td>
		</tr>
		<tr>
			<td>第1引数</td>
			<td>&quot;my-selection-id&quot;</td>
			<td>使用する&nbsp;<code>activty</code>&nbsp;や&nbsp;<code>fragment</code>&nbsp;でユニークになるように指定します。&nbsp;<code>onRestoreInstanceState</code>&nbsp;などで&nbsp;<code>Bundle</code>&nbsp;から取得する&nbsp;<code>key</code>として使ってるようです</td>
		</tr>
		<tr>
			<td>第2引数</td>
			<td>recyclerView</td>
			<td>該当の&nbsp;<code>RecyclerView</code>&nbsp;を指定してください。</td>
		</tr>
		<tr>
			<td>第3引数</td>
			<td>StableIdKeyProvider(binding.recyclerView)</td>
			<td><code>IdKeyProvider</code>&nbsp;を設定します。<code>IdKeyProvider</code>&nbsp;は&nbsp;<code>item</code>&nbsp;(選択対象) と&nbsp;<code>key</code>&nbsp;(選択時に保持するもの) の対応関係を解決するためのものです。</td>
		</tr>
		<tr>
			<td>第4引数</td>
			<td>BookIdDetailsLookup(binding.recyclerView)</td>
			<td><code>MotionEvent</code>を元に今どこの&nbsp;<code>item</code>&nbsp;(選択対象) の上にいるのかを検索する&nbsp;<code>ItemDetailsLookup</code>&nbsp;を実装したものを指定します。</td>
		</tr>
		<tr>
			<td>第5引数</td>
			<td>StorageStrategy.createLongStorage()</td>
			<td><code>savedState</code>&nbsp;に何を保存するのかという情報を持った&nbsp;<code>StorageStrategy</code>&nbsp;インスタンスを設定します。</td>
		</tr>
	</tbody>
</table>

今回は選択時に保持するものとして&nbsp;<code>stableId</code>&nbsp;(&nbsp;<code>book.id</code>&nbsp;) を使用するので、<code>IdKeyProvider</code>&nbsp;には標準で用意されている&nbsp;<code>StableIdKeyProvider</code>&nbsp;を指定します。

自作する必要があるのは&nbsp;<code>ItemDetailsLookup</code>&nbsp;だけで、こちらは&nbsp;<a href="https://developer.android.com/reference/androidx/recyclerview/selection/ItemDetailsLookup.html" target="_blank">ItemDetailsLookup</a>のSampleを参考に&nbsp;<code>BookIdDetailsLookup</code>&nbsp;は下記のように実装しました。

<pre>
<code>class BookIdDetailsLookup(
 private val recyclerView: RecyclerView
) : ItemDetailsLookup&lt;Long&gt;() {

 override fun getItemDetails(e: MotionEvent): ItemDetails&lt;Long&gt;? = recyclerView.findChildViewUnder(
 e.x,
 e.y
 )?.let {
 (recyclerView.getChildViewHolder(it) as? BookViewHolder)?.getItemIdDetails()
 }
}</code></pre>

<h2>RecyclerView.Adapter#onBindViewHolderで選択状態をViewに反映する</h2>

ここまで実装をしたものを動かしてみました。

<img alt="" height="1422" src="https://image.dmm-corp.com/v4rrnxczlppulhxgfprtyn31rb4e" width="800" />

見てのとおり（しっかり複数選択機能自体は動いているものの）どれが選択されているのかがまったくわかりません。&nbsp;<code>View</code>&nbsp;への選択状態かどうかの反映は自分で実装していきましょう。

<code>recyclerview-selection</code>&nbsp;では選択状態になった時、最終的には&nbsp;<code>RecyclerView.Adapter#onBindViewHolder</code>&nbsp;が呼ばれるので、ここで背景色の変更をします。 実際には&nbsp;<code>selector</code>&nbsp;を作ってあげて、選択されているか否かを元に&nbsp;<code>View#setActivated</code>&nbsp;を呼び出します。 (&nbsp;<code>setSelected</code>&nbsp;ではなく&nbsp;<code>setActivated</code>&nbsp;を呼ぶ理由は&nbsp;<a href="https://developer.android.com/reference/android/view/View.html#setActivated(boolean" target="_blank">こちら</a>) を参照ください。 )

選択されているか否かは&nbsp;<code>SelectionTracker#isSelected&nbsp;</code>でわかるので、下記のようにして&nbsp;<code>Adapter</code>&nbsp;を作ります。

<pre>
<code>class BookAdapter(
 context: Context,
 private val sectionTracker: SelectionTracker&lt;Long&gt;,
 private val bookList: List&lt;Book&gt;
) : RecyclerView.Adapter&lt;BookViewHolder&gt;() {
 :
 override fun onBindViewHolder(
 holder: BookViewHolder,
 position: Int
 ) {
 val item = bookList[position]
 holder.bind(
 sectionTracker.isSelected(item.id), // setActivated は holder.bindの中で
 position,
 bookList[position]
 )
 }
 :
}</code></pre>

ただ、このコードをそのまま動かすと&nbsp;クラッシュします&nbsp;。 なぜかというと&nbsp;<code>SelectionTracker</code>&nbsp;の生成の時にセットする&nbsp;<code>RecyclerView</code>&nbsp;に&nbsp;<code>Adapter</code>&nbsp;がないと&nbsp;<code>IllegalArgumentException</code>&nbsp;が投げられるようになっているからです。 (&nbsp;<code>Adapter</code>&nbsp;の生成には&nbsp;<code>SectionTracker</code>がいるが、&nbsp;<code>SectionTracker</code>の生成には逆に<code>Adapter</code>が必要になってしまっているからです。)

<pre>
<code>public abstract class SelectionTracker&lt;K&gt; {
 :
 public static final class Builder&lt;K&gt; {
 :
 public Builder(
 @NonNull String selectionId,
 @NonNull RecyclerView recyclerView,
 @NonNull ItemKeyProvider&lt;K&gt; keyProvider,
 @NonNull ItemDetailsLookup&lt;K&gt; detailsLookup,
 @NonNull StorageStrategy&lt;K&gt; storage) {
 :
 mAdapter = recyclerView.getAdapter();
 :
 checkArgument(mAdapter != null); // ← throw IllegalArgumentException
 :
 }
 : 
 }
 :
}</code></pre>

そのため&nbsp;<code>SectionTracker&nbsp;</code>は下記のように&nbsp;<code>Adapter&nbsp;</code>作成後に外部から設定する必要があります。

<pre>
<code>class BookAdapter(
 context: Context,
 private val bookList: List&lt;Book&gt;
) : RecyclerView.Adapter&lt;BookViewHolder&gt;() {
 :
 var sectionTracker: SelectionTracker&lt;Long&gt;? = null // Adapterを作成後に、SectionTrackerを作成してそのあとにadapterにセットする
 :
 override fun onBindViewHolder(
 holder: BookViewHolder,
 position: Int
 ) {
 val item = bookList[position]
 holder.bind(
 sectionTracker?.isSelected(item.id) ?: false, // setActivated は holder.bindの中で
 position,
 bookList[position]
 )
 }
 :
}</code></pre>

依存関係が複雑でスッキリした実装とは言いにくいのですが（一応Sampleであげているコードは&nbsp;<code>SectionTracker&nbsp;</code>を直接メンバーに持つのではなくインタフェースを噛ませてますが、正直あまり納得のいく実装はできていません）、これで完成です！

<h3>所感</h3>

まだalpha版なのでバグをちらほら見かけます。ただし、冒頭にも書きましたが〈複数選択をドラッグでやりつつオートスクロール〉する処理を実装するのはひと苦労なので、そういったケースを実装する場合は新APIを使ったほうが良いなと感じました。

サンプルコードは下記に置いております。ご興味ある方はご覧ください。

<ul>
	<li><a href="https://github.com/kgmyshin/recyclerview-selection-sample/tree/use_stable_id" target="_blank">kgmyshin/recyclerview-selection-sample Book.id(stableID)をSelectionにしたもの</a></li>
	<li><a href="https://github.com/kgmyshin/recyclerview-selection-sample" target="_blank">kgmyshin/recyclerview-selection-sample BookをそのままSelectionにしたもの</a></li>
</ul>

<h2>採用情報</h2>

現在、DMM.com では、エンジニアメンバーを募集しております！ 興味のある方はぜひ下記募集ページをご確認下さい！

<a href="https://dmm-corp.com/recruit/engineer" target="_blank">dmm-corp.com</a>

Support Library 28.0.0 alpha新APIのrecyclerview-selectionを使ってみた

シェア