Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Battle of GridLayout with RecyclerView

Battle of GridLayout with RecyclerView

GridLayout with RecyclerView

Kazuki Chigita

March 26, 2019
Tweet

More Decks by Kazuki Chigita

Other Decks in Technology

Transcript

  1. Battle of GridLayout
    with RecyclerView
    chigichan24 @ CA.apk #7 5 min

    View Slide

  2. $whoami
    Kazuki Chigita (chigichan24)
    AbemaTV でインターン中
    takahiromさんのもとAndroid開発のいろはを学んでいる

    View Slide

  3. GridLayout

    View Slide

  4. GridLayout
    جૅ

    View Slide

  5. pulic class GridLayout extends ViewGroup
    جૅ

    View Slide

  6. pulic class GridLayout extends ViewGroup
    N+1本の線でN個の等分領域に分けられる
    جૅ

    View Slide

  7. pulic class GridLayout extends ViewGroup
    0 1 2 …
    ⼦Viewはなんの指定もしなければ
    各領域に広がる
    N+1本の線でN個の等分領域に分けられる
    جૅ

    View Slide

  8. pulic class GridLayout extends ViewGroup
    0 1 2
    N+1本の線でN個の等分領域に分けられる
    ⼦Viewに専有したい数を渡せば
    その分だけ広がる
    GridLayoutManager.SpanSizeLookUp()を使う
    جૅ

    View Slide

  9. GridLayout

    View Slide

  10. GridLayout
    with
    RecyclerView

    View Slide

  11. How to adapt?

    View Slide

  12. How to adapt?
    binding.recyclerView.layoutManager
    = GridLayoutManager(context, spanCount)

    View Slide

  13. How to adapt?
    binding.recyclerView.layoutManager
    = GridLayoutManager(context, spanCount)

    View Slide

  14. How to adapt?
    binding.recyclerView.layoutManager
    = GridLayoutManager(context, spanCount)
    N+1本の線でN個の等分領域に分けられる

    View Slide

  15. Battle of GridLayout
    with RecyclerView
    chigichan24 @ CA.apk #7 5 min

    View Slide

  16. Battle of GridLayout
    with RecyclerView
    chigichan24 @ CA.apk #7 5 min

    View Slide

  17. GridLayout (span)

    View Slide

  18. GridLayout (span)
    ͱ

    View Slide

  19. GridLayout (span)
    RecyclerView (Itemdecoration)
    ͱ

    View Slide

  20. GridLayout (span)
    RecyclerView (Itemdecoration)
    ͱ
    ͍ΖΜͳLayout͕૊ΊΔ

    View Slide

  21. ͜ΜͳLayoutΛ͘Έ͍ͨ1

    View Slide

  22. ͜ΜͳLayoutΛ͘Έ͍ͨ1

    View Slide

  23. ͜ΜͳLayoutΛ͘Έ͍ͨ1
    spanCount=4のGridLayoutManagerをセットする

    View Slide

  24. ͜ΜͳLayoutΛ͘Έ͍ͨ1
    spanCount=4のGridLayoutManagerをセットする
    GridLayoutManager.SpanSizeLookUp() {
    override fun getSpanSize(position: Int): Int {
    //positionに応じて割り当てるサイズを渡す.
    }
    }

    View Slide

  25. ͜ΜͳLayoutΛ͘Έ͍ͨ1
    spanCount=4のGridLayoutManagerをセットする
    GridLayoutManager.SpanSizeLookUp() {
    override fun getSpanSize(position: Int): Int {
    //positionに応じて割り当てるサイズを渡す.
    return when {
    position == 0 -> 4
    position <= 2 -> 2
    else -> 1
    }
    }
    }

    View Slide

  26. ͜ΜͳLayoutΛ͘Έ͍ͨ1
    spanCount=4のGridLayoutManagerをセットする
    GridLayoutManager.SpanSizeLookUp() {
    override fun getSpanSize(position: Int): Int {
    //positionに応じて割り当てるサイズを渡す.
    return when {
    position == 0 -> 4
    position <= 2 -> 2
    else -> 1
    }
    }
    }
    RecyclerViewのItemDecorationのうちgetItemOffestsをoverride

    View Slide

  27. ͜ΜͳLayoutΛ͘Έ͍ͨ1
    spanCount=4のGridLayoutManagerをセットする
    GridLayoutManager.SpanSizeLookUp() {
    override fun getSpanSize(position: Int): Int {
    //positionに応じて割り当てるサイズを渡す.
    return when {
    position == 0 -> 4
    position <= 2 -> 2
    else -> 1
    }
    }
    }
    RecyclerView. ItemDecoration() {
    override fun getItemOffests(
    outRect: Rect,
    view: View,
    parent: RecyclerView,
    state: RecylerView.State
    ) {
    outRect.left = margin
    ...
    }
    }

    View Slide

  28. ͜ΜͳLayoutΛ͘Έ͍ͨ2

    View Slide

  29. ͜ΜͳLayoutΛ͘Έ͍ͨ2
    SpanCountは何分割にすればよいのか?

    View Slide

  30. ͜ΜͳLayoutΛ͘Έ͍ͨ2
    SpanCountは何分割にすればよいのか?
    等幅 & センタリング
    にしないといけない

    View Slide

  31. ͜ΜͳLayoutΛ͘Έ͍ͨ2
    SpanCountは何分割にすればよいのか?
    等幅 & センタリング
    にしないといけない
    8

    View Slide

  32. ͜ΜͳLayoutΛ͘Έ͍ͨ2

    View Slide

  33. ͜ΜͳLayoutΛ͘Έ͍ͨ2

    View Slide

  34. ͜ΜͳLayoutΛ͘Έ͍ͨ2
    SpaceItemを導⼊する

    View Slide

  35. ͜ΜͳLayoutΛ͘Έ͍ͨ2
    SpaceItemを導⼊する
    (複数のItemが必要になってくるとGroupieが便利です)

    View Slide

  36. ҰൠԽ
    ここに⼊るViewの数は
    可変にしたい

    View Slide

  37. ҰൠԽ
    最⼤幅になりうる数の集合の最⼩公倍数×2
    (多分)
    ここに⼊るViewの数は
    可変にしたい

    View Slide

  38. ·ͱΊ
    GridLayoutとRecyclerViewはいろいろできる
    いい感じのLayoutを作るには算数⼒が必要

    View Slide