[Qiita] RecyclerViewにリストカードを表示するViewを作る

※この記事は以前Qiitaに投稿されていた古い記事です

はじめに

Google Nowには、次のようにリストを表示するカードがあります。

このようなカードを作ろうと思ったときに、ViewGroupにaddViewしたり、ListViewをスクロールさせなくしてカードにしてみたりとやり方はいくつかあると思うのですが、これをもっと簡単に作れたらいいのになぁと思い、カスタムビューを作ってみましたので簡単に紹介したいと思います。

実現したいこと

今回作るカスタムビューで実現したいのは次のとおりです。
  • リストアイテムのViewを生成・保持
  • リストアイテムの追加・変更・削除
  • リストアイテムの表示数を制限
  • リストアイテムの表示数を制限している場合、削除したら次の項目を表示する
  • カードのヘッダー、フッター

Viewの構成

今回作るカスタムビューは、次のような構成にします。
Viewの構成.png
まず、カードを作るのでCardViewで囲み、その上にRelativeLayoutを乗せます。
その上に乗っている上下にあるViewはヘッダーとフッターになる予定のものです。
ヘッダーとフッターはViewにしておくことで後で差し替えられるようにし、デフォルトではTextViewを表示します。
そしてメインとなるリストはLinearLayoutを利用します。

基礎となるViewを作る

先ほどのViewの構成どおりに、まずは基礎となるViewを作っていきます。
class ListCardView : CardView {
    private val defaultPadding = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16f, resources.displayMetrics).toInt()

    private var rootView: RelativeLayout = RelativeLayout(context).apply {
        layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
    }
    var headerView: View? = TextView(context).apply {
        id = R.id.header_view
        layoutParams = RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
        setPadding(defaultPadding, defaultPadding, defaultPadding, defaultPadding)
    }
    private var listView: LinearLayout = LinearLayout(context).apply {
        id = R.id.list_view
        orientation = LinearLayout.VERTICAL
        layoutParams = RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT).apply {
            addRule(RelativeLayout.BELOW, R.id.header_view)
        }
    }
    var footerView: View? = TextView(context).apply {
        id = R.id.footer_view
        gravity = Gravity.END
        setPadding(defaultPadding, defaultPadding, defaultPadding, defaultPadding)
        layoutParams = RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT).apply {
            addRule(RelativeLayout.BELOW, R.id.list_view)
        }
    }
}
headerViewとfooterViewは後から差し替えができるように公開しておき、それ以外は公開する必要はないので private にしています。
そして、これらのViewを順番に追加していきます。
class ListCardView : CardView {
    constructor(context: Context?) : super(context) {
        initialize()
    }
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
        initialize(attrs)
    }
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
        initialize(attrs)
    }

    private fun initialize(attrs: AttributeSet? = null) {
        rootView.addView(headerView)
        rootView.addView(listView)
        rootView.addView(footerView)
        addView(rootView)
    }
}
これは普段xmlでやっている作業をプログラムで書いているだけなので、特に難しいことはしていません。

Adapterを作る

ListViewやRecyclerViewなどと同じように、Adapterを使ってリストのアイテムを操作できるようにします。
abstract class Adapter {
    private val observable = AdapterDataObservable()
    // リストの1つのアイテムのViewを生成
    abstract fun createView(position: Int, viewGroup: ViewGroup?): View
    // 生成したViewに対してバインドしてViewを返却する
    abstract fun bindView(position: Int, view: View): View
    // 生成したViewに表示する情報を返却する
    abstract fun getItem(position: Int): Any
    // 生成したViewのIdを返却する
    abstract fun getId(position: Int): Long
    // リストの個数を返却する
    abstract fun getCount(): Int
    // Viewの変更を反映する
    fun notifyDataSetChanged() {
        observable.notifyChanged()
    }
    // Viewの変更通知を受け取るObserverを登録する
    fun registerObserver(observer: AdapterDataObserver) {
        observable.registerObserver(observer)
    }
}
ListViewやRecyclerViewと同じような感覚で利用できるように、メソッド名はそれらで利用されているものに合わせて作っています。

リストアイテムのViewを生成・保持する

リストアイテムのViewを保持するための変数を用意します。
private val listItemCache = LongSparseArray<View>()
private val dividerCache = LongSparseArray<View>()
リストアイテムの追加・削除などがしやすいようにリストアイテムとdividerを別々に保持しています。
次に、Adapterのセット時にAdapterを元にViewを生成・保持する処理を書きます。
var adapter: Adapter? = null
    set(value) {
        value?.let {
            // キャッシュをクリア
            listItemCache.clear()
            dividerCache.clear()
            // アイテムを生成・保持
            for (position in 0 until it.getCount()) {
                listItemCache.put(it.getId(position), it.createView(position, this))
                dividerCache.put(position.toLong(), createDividerView())
            }
            dividerCache.put(listItemCache.size().toLong(), createDividerView())
        }
        field = value
    }
Adapterのセット時には既にセットされていたキャッシュがあるかもしれないので、まずはキャッシュを削除しておきます。
次に、リストのアイテム数分、Adapter#createView()を使ってViewを生成し、それをキャッシュしておきます。
dividerも同様にキャッシュをしますが、dividerはリストの個数よりも1つ余分に必要なため、for文の外で1つだけdividerを追加しています。

リストの変更をViewに反映する

変更通知処理を書くためのinterfaceと、実際に通知するためのObservableを作成します。
private class AdapterDataObservable : Observable<AdapterDataObserver>() {
    fun notifyChanged() {
        for (i in mObservers.indices.reversed()) {
            mObservers[i].onChanged()
        }
    }
}

interface AdapterDataObserver {
    fun onChanged()
}
ここで言うObservableはRxJavaやDataBindingのObservableではなく、android.databaseのObservableです。
このObservableはRecyclerViewで利用されているものと同じです。
次に、実際にリストの変更をViewに反映していきます。
fun onAdapterChanged(adapter: Adapter) {
    val diff = adapter.getCount() - listItemCache.size()
    if (diff < 0) {
        for (i in listItemCache.size() - 1 downTo (listItemCache.size() - Math.abs(diff))) {
            listItemCache.removeAt(i)
            dividerCache.removeAt(i)
        }
    } else if (diff > 0) {
        val startPosition = if (listItemCache.size() == 0) 0 else listItemCache.size()
        for (i in startPosition until listItemCache.size() + Math.abs(diff)) {
            listItemCache.put(adapter.getId(i), adapter.createView(i, this@ListCardView))
            dividerCache.put(i.toLong(), createDividerView())
        }
        dividerCache.put(listItemCache.size().toLong(), createDividerView())
    }
    listView.removeAllViews()
    for (i in 0 until listItemCache.size()) {
        listView.addView(dividerCache.valueAt(i))
        listView.addView(adapter.bindView(i, listItemCache.get(adapter.getId(i))))
    }
    listView.addView(dividerCache.valueAt(listItemCache.size()))
}
少し複雑なことをしていますが、ここでは次のような処理を行っています。
  1. adapterのアイテム個数とキャッシュの個数の差分をとる
  2. 差分がマイナスの場合、差分の個数分キャッシュから削除する
  3. 差分がプラスの場合、差分の個数分Viewをキャッシュする
  4. LinearLayoutから一旦全てのViewを削除
  5. dividerをLinearLayoutにaddViewする
  6. キャッシュからViewを取得し、Adapter#bindViewメソッドを通してViewにバインドした後にaddView
  7. LinearLayoutの一番下にdividerをaddView
これらの処理によって、リストアイテムの追加・削除・変更処理のすべてに対応しています。
もしリストアイテムの個数が多くなるのであればRecyclerViewのように一部のViewのみに反映するようなメソッドを用意する必要があるかと思いますが、今回のようなカードに表示する程度であれば、これで問題無いかと思います。
そして、先ほどのAdapterセット時の処理の後にViewの変更通知を処理を登録し、最後に変更を通知します。
var adapter: Adapter? = null
    set(value) {
        value?.let {
            //..省略..

            it.registerObserver(object : AdapterDataObserver {
                override fun onChanged() {
                    onAdapterChanged(it)
                }
            })
            it.notifyDataSetChanged()
        }
        field = value
    }
これで、adapterをセットしたときとnotifyDataSetChangedメソッドを呼び出したときにAdapterの内容がViewに反映されるようになりました。

リストアイテムの表示数を制限する

まずは、制限数を保持する変数を用意します。
private var listLimit = 0
AdapterからlistLimitを操作できるようにするため、Adapterにも変数を用意しておきます。
また、セット後すぐにViewに状態が反映されるようにするため、セット後にnotifyDataSetChanged()を実行します。
abstract class Adapter {
    var listLimit: Int = 0
        set(value) {
            field = value
            notifyDataSetChanged()
        }
}
Adapterのセット時にはListCardViewに既に設定されている値をadapterに反映します。
var adapter: Adapter? = null
    set(value) {
        value?.let {
            it.listLimit = listLimit
また、Adapterに変更通知が来た場合にはAdapterの内容をListCardViewのlistLimitに反映します。
fun onAdapterChanged(adapter: Adapter) {
    listLimit = adapter.listLimit
このlistLimitが0の場合はキャッシュサイズをそのまま返却し、listLimitが設定されている場合はlistLimitを返却する拡張関数を作ります。
private fun LongSparseArray<View>.limit(): Int {
    return if (listLimit == 0) {
        size()
    } else {
        if (listLimit < size()) {
            listLimit
        } else {
            size()
        }
    }
}
そして、Viewに反映する処理を行っているところの size() を limit() に変えることで、listLimitが設定されている場合はその数だけViewを表示するようにします。
for (i in 0 until listItemCache.limit()) {
    listView.addView(dividerCache.valueAt(i))
    listView.addView(adapter.bindView(i, listItemCache.get(adapter.getId(i))))
}
これで、リストアイテムの表示数を制限することと、リストアイテムが削除されたときは自動で次のアイテムを表示することのそれぞれのパターンに対応できました。

xmlから属性を変更できるようにする

これはカスタムビューを作る上での話なのでサクッと説明します。
まず、attrs.xmlにxmlで設定したい属性を定義します。
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ListCardView">
        <attr name="headerText" format="string"/>
        <attr name="headerTextColor" format="color"/>
        <attr name="footerText" format="string"/>
        <attr name="footerTextColor" format="color"/>
        <attr name="android:divider"/>
        <attr name="listLimit" format="integer"/>
    </declare-styleable>
</resources>
そして、AttributeSetがセットされている場合はそこから取得してViewに反映します。
private fun initialize(attrs: AttributeSet? = null) {
    attrs?.let {
        context.obtainStyledAttributes(attrs, R.styleable.ListCardView).apply {
            if (headerView is TextView) {
                (headerView as TextView).run {
                    text = getString(R.styleable.ListCardView_headerText)
                    setTextColor(getColor(R.styleable.ListCardView_headerTextColor, Color.BLACK))
                }
            }
            if (footerView is TextView) {
                (footerView as TextView).run {
                    text = getString(R.styleable.ListCardView_footerText)
                    setTextColor(getColor(R.styleable.ListCardView_footerTextColor, Color.BLACK))
                }
            }
            dividerColor = getColor(R.styleable.ListCardView_android_divider, Color.LTGRAY)
            listLimit = getInteger(R.styleable.ListCardView_listLimit, 0)
        }
    }
}

サンプルを作って実行してみる

簡単なAdapterを作ります。
class SimpleAdapter(
        private val inflater: LayoutInflater, private val list: List<String>,
        private val onItemClickListener: (position: Int, adapter: ListCardView.Adapter) -> Unit
) : ListCardView.Adapter() {
    override fun createView(position: Int, viewGroup: ViewGroup?): View {
        return inflater.inflate(android.R.layout.simple_list_item_1, viewGroup, false)
    }

    override fun bindView(position: Int, view: View): View {
        view.findViewById<TextView>(android.R.id.text1).apply {
            text = getItem(position).toString()
            setOnClickListener {
                onItemClickListener.invoke(position, this@SimpleAdapter)
            }
        }
        return view
    }

    override fun getItem(position: Int): Any {
        return list[position]
    }

    override fun getId(position: Int): Long {
        return position.toLong()
    }

    override fun getCount(): Int {
        return list.size
    }

}
Listを作ってAdapterにセットします。
val list = ArrayList<String>().apply {
    for (i in 0..5) {
        add("test$i")
    }
}
holder.binding.listCardView.adapter = SimpleAdapter(LayoutInflater.from(this@MainActivity), list, { pos, adapter ->
    list.removeAt(pos)
    adapter.notifyDataSetChanged()
})
あとはもろもろ必要なものを実装した結果のサンプルがこんな感じです。

見た目がすごく雑ですが、必要な機能はだいたいそろっているのであとは見た目やアニメーションを良い感じに整えればGoogle Nowのリストカードのようなものが出来るのではないかなと思います。

おわりに

AdapterにセットしたものをViewに反映するためにはどうすれば良いのか、Viewをどう再利用するのが良いのかなど悩みどころが非常に多くあり、まだまだ改善の余地があるかなとは思いますが、当初の目的であったRecyclerViewにリストカードを表示するViewを作ることは無事に達成できたので良かったです。
このCustomViewを作る上で、RecyclerViewの中の実装を読んで参考にしていたのですが、読んでみると難しいことには間違いないのですが全く読めないわけではなく勉強になる部分が結構多いので、とりあえず読んでみるのは大事だなと実感しました。
今回作ったサンプルはGitHubに公開しているので、良ければご参考ください。
syarihu/ListCardView
https://github.com/syarihu/ListCardView


コメント

コメントを投稿

人気の投稿

[Qiita] Google Playのクローズドベータ版テストでメールアドレスを指定して公開する

イメージ
※この記事は以前Qiitaに投稿されていた古い記事です はじめに ふと、Google Playのクローズドベータ版テストを試してみたくなって使ってみたので手順を書いてみました。 Google Playのクローズドベータ版テストについて Google Playで決まったユーザーのみにアプリをテストしてもらいたい場合、クローズドベータ版テストを使用することができます。 クローズドベータテストには以下の3種類がありますが、今回はメールアドレスを指定する方法でテストを公開してみます。 メールアドレスを指定して公開する Googleグループのユーザーに公開する Google+コミュニティのユーザーに公開する 前提条件 テスターのメールアドレスはGoogleアカウントまたはGoogle Appsアカウントであること テスト開始手順 テスターの設定 Google Play デベロッパーコンソール にログイン アプリを選択 左のメニューから[APK]を選択 タブの中央にある[ベータ版テスト]を選択 [クローズドベータ版テストを設定]を選択 [Create list]を選択 リスト名を入力(「〜事業部」や「〜チーム」など、リスト内のテスターがどのような人なのかを識別するための名前を入力する) メールアドレスを入力(以下の3通りのどれか) メールアドレスを1つずつ入力してカンマかエンターを押す カンマ区切りのメールアドレスをコピペしてエンターを押す CSVファイルをアップロードする [保存]を押す 公開したいリストにチェックを入れる 右上の[更新を送信]を押す (製品版の公開と同じく即時公開はされないため、公開されるまで少し時間がかかる) 青い枠で囲われているオプトインURLをテスターに共有する 公開したベータ版をそのまま製品版に移行するには[製品版にプロモート]を押すことで、簡単に移行できます。 APKを公開する Google Play デベロッパーコンソール にログイン アプリを選択 左のメニューから[APK]を選択 タブの中央にある[ベータ版テスト]を選択 [ベータ版に新しいAPKをアップロード]を選択 APKファイルを選択 [このバージョンの新機能]を記載
続きを読む

[Qiita] Androidの実機でPCのlocalhostに接続したり、Webページの要素を検証する

イメージ
※この記事は以前Qiitaに投稿されていた古い記事です はじめに 実機でPCのlocalhostに接続したいときや、実機で見ているWebページの要素を検証したいことがあったので、その方法をメモとして書いておきます。 必要なもの Android Android 4.0以上 最新のChrome PC Chrome 32以上 Android SDK SDKが必要というよりはadbが必要なので、既にSDKが入っている場合はadbにパスを通しておくだけで良いです。 ※ Chrome拡張で「adb」というものがありますが、現在は非推奨になっているため、ここでは使いません。 Android SDKをインストールする 手元にWindowsが無いため、今回はMacの説明のみ書きます。 既にAndroid SDKが入っている場合は、この手順は必要無いです。 Android SDKをダウンロードする ここ から、自分の環境のAndroid SDKをダウンロードします。 今回はadbのみ必要なため、SDKのみのダウンロードをします。 ダウンロードしたzipを任意の場所に置き、zipを解凍する ターミナルでダウンロードしたSDKのディレクトリ配下のtoolsディレクトリを開く cd [ 任意のディレクトリ ] /android-sdk-macosx/tools android というシェルスクリプトを起動する ./android Android SDK Managerが起動するので、 Android SDK Platform-tools のみにチェックを入れて右下のinstallボタンを押す 同意してインストールする 完了したら Close を押してAndroid SDK Managerも閉じる adbにパスを通す 先ほどのインストールでplatform-toolsというディレクトリが生成されているはずなので、そこにパスを通します。 ~/.bash_profile を開く vi ~/.bash_profile 以下のようにSDKのディレクトリ配下のplatform-toolsディレクトリにパスを通す export PATH = $PATH : [ SDKのディレクト
続きを読む

[Qiita] AppCompatのAlertDialogのテーマカラーを変える

イメージ
※この記事は以前Qiitaに投稿されていた古い記事です はじめに Android Supoprt Library 22.1で公開された android.support.v7.app.AlertDialogを使うと、Material Designなダイアログを簡単に実装することができますが、そのダイアログのタイトルの文字色やダイアログの背景色を変えるにはどうすれば良いのか、メモとして書いておきます。 style.xmlでカラーを定義 < style name = " MyAlertDialogStyle " parent = " Theme.AppCompat.Light.Dialog.Alert " > <item name= "colorAccent" >@ android : color/holo_blue_dark</item> <item name= "android:background" >@ android : color/white</item> <item name= "android:textColorPrimary" >@ android : color/holo_blue_light</item> </ style > name どこの色 colorAccent ボタンの文字色とか android:background ダイアログの背景色 android:textColorPrimary タイトル、メッセージの文字色 AlertDialog.BuilderでStyleをセットする AlertDialog . Builder builder = new AlertDialog . Builder ( this , R . style . MyAlertDialogStyle ) ; builder . setTitle ( "確認" ) ; builder . setMessage ( "ほんとにいいの？" ) ;
続きを読む