Battle of GridLayout with RecyclerView

Battle of GridLayout with RecyclerView

GridLayout with RecyclerView

A445824f9bb334ec104f5c1c7b67fee2?s=128

Kazuki Chigita

March 26, 2019
Tweet

Transcript

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

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

  3. GridLayout

  4. GridLayout جૅ

  5. pulic class GridLayout extends ViewGroup جૅ

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

  7. pulic class GridLayout extends ViewGroup 0 1 2 … ⼦Viewはなんの指定もしなければ

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

    その分だけ広がる GridLayoutManager.SpanSizeLookUp()を使う جૅ
  9. GridLayout

  10. GridLayout with RecyclerView

  11. How to adapt?

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

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

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

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

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

    min
  17. GridLayout (span)

  18. GridLayout (span) ͱ

  19. GridLayout (span) RecyclerView (Itemdecoration) ͱ

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

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

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

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

  24. ͜ΜͳLayoutΛ͘Έ͍ͨ1 spanCount=4のGridLayoutManagerをセットする GridLayoutManager.SpanSizeLookUp() { override fun getSpanSize(position: Int): Int {

    //positionに応じて割り当てるサイズを渡す. } }
  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 } } }
  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
  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 ... } }
  28. ͜ΜͳLayoutΛ͘Έ͍ͨ2

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

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

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

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

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

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

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

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

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

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