Battle of GridLayout with RecyclerView

GridLayout with RecyclerView

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