Battle of GridLayout with RecyclerView

GridLayout with RecyclerView

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を作るには算数⼒が必要