$30 off During Our Annual Pro Sale. View Details »

RecyclerViewにリストカードを表示する

syarihu
January 11, 2018

 RecyclerViewにリストカードを表示する

RecyclerViewにリストカードを表示するViewを作成したお話です。

syarihu

January 11, 2018
Tweet

More Decks by syarihu

Other Decks in Technology

Transcript

  1. RecyclerViewに
    リストカードを
    表示する
    shibuya.apk #21
    2018/01/11 (Thu)
    @syarihu

    View Slide

  2. Taichi Sato (@syarihu)
    ● Money Forward, Inc.
    ○ Android Engineer
    ● TechBooster

    View Slide

  3. TechBooster

    View Slide

  4. 本題

    View Slide

  5. ことの発端

    View Slide

  6. これどうやって作るんだろう

    View Slide

  7. 考えたこと
    ● ViewGroupにaddViewする
    ● ListViewをスクロールさせなくし
    て使う

    View Slide

  8. ViewGroupにaddViewする
    ● 実装したいと思ったときに
    これを毎回やるのつらそう
    ● 汎用的に使えない

    View Slide

  9. ListViewをスクロール
    させなくして使う
    ● ViewGroupにaddViewするより
    は汎用的に使えそう
    ● 必要のない機能までついてくるの
    で、なんだか微妙

    View Slide

  10. もっと良い感じにできないだろうか

    View Slide

  11. 自分で作ってみよう

    View Slide

  12. カスタムビューを
    作ってみる

    View Slide

  13. 最低限欲しい機能
    ● Viewを使いまわしたい
    ○ リストアイテムのViewを生成・保持
    ● 簡単にアイテムを操作したい
    ○ リストアイテムの追加・変更・削除
    ● もっと見るしたい
    ○ リストアイテムの表示数を制限

    View Slide

  14. 基礎となるViewを作る

    View Slide

  15. 基礎となるViewを作る

    View Slide

  16. Adapterを作る

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. リストの変更をViewに反映する
    ● このObservableはRxJavaやDataBindingのObservableではな
    く、android.database.Observable

    View Slide

  22. リストの変更をViewに反映する
    ● このObservableはRxJavaやDataBindingのObservableではな
    く、android.database.Observable
    ● RecyclerViewで利用されているものと同じ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. サンプルコード

    View Slide

  36. RecyclerListViewの
    Adapterを作る

    View Slide

  37. RecyclerListViewの
    Adapterを作る

    View Slide

  38. RecyclerListViewの
    Adapterを作る

    View Slide

  39. RecyclerListViewの
    Adapterを作る

    View Slide

  40. RecyclerViewの
    Adapterを実装する

    View Slide

  41. 実行する

    View Slide

  42. View Slide

  43. View Slide

  44. せっかく作ったので

    View Slide

  45. ライブラリ化してみた

    View Slide

  46. RecyclerListView
    ● syarihu/RecyclerListView
    https://github.com/syarihu/RecyclerLi
    stView

    View Slide

  47. RecyclerListView
    net.syarihu.android.library:RecyclerListView:0.1.0

    View Slide

  48. 宣伝

    View Slide

  49. View Slide

  50. DroidKaigi 2018
    ● Android WearのWatch Faceを
    作ろう 〜時計の盤面に小さな情
    報を添えて〜
    ○ 2018/02/09 17:40-18:10
    ○ Room 5

    View Slide

  51. 家計簿アプリ『マネーフォワード』の
    Androidアプリエンジニア募集中!
    ご興味があれば @syarihu まで

    View Slide

  52. ご清聴ありがとうございました

    View Slide