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