Deep Dive Into LayoutManager for RecyclerView
3 likes10,217 views
This document presents a deep dive into creating custom LayoutManagers for RecyclerViews by Takeshi Hagikura, highlighting important methods and considerations such as onLayoutChildren, fill, and scroll logic. It emphasizes the complexity of building custom layouts compared to custom views, and discusses the recycling mechanism along with item decorations and predictive animations. Additional resources and a thank you note are included at the end.
Deep Dive Into LayoutManager for RecyclerView
- 1. thagikura Deep Dive Into LayoutManager for RecyclerView
- 2. $ whoami Takeshi Hagikura @thagikura Developer Relations @Google
- 3. RecyclerView
- 8. Is it possible to add a custom LayoutManager?
- 11. Ports Flexbox in CSS to Android
- 12. How to create a custom LayoutManager?
- 13. Think before you build it Much harder than custom view Gives you much flexibility on top of RecyclerView features
- 15. At the bare minimum, need to override…
- 16. onLayoutChildren Called on: - initial layout - adapter changes Lay out all relevant child views
- 19. If this isViewGroup (except RecyclerView) All child views on memory
- 20. In RecyclerView + LayoutManager Only visible views should be on memory
- 21. onLayoutChildren 1. Find the anchor position
- 22. Anchor position Starting position to put views. Start with 0 on initial layout. Remember the first visible view to restore the state
- 23. onLayoutChildren 1. Find the anchor position 2. Calculate how many items should be in visible portion
- 24. onLayoutChildren 1. Find the anchor position 2. Calculate how many items should be in visible portion 3. Fill toward end
- 25. private int fill(RecyclerView.Recycler recycler, RecyclerView.State state, LayoutState layoutState) { int start = layoutState.mAvailable; int remainingSpace = layoutState.mAvailable; int consumed = 0; while (remainingSpace > 0 && layoutState.hasMore(state, mFlexLines)) { FlexLine flexLine = mFlexLines.get(layoutState.mFlexLinePosition); layoutState.mPosition = flexLine.mFirstIndex; consumed += layoutFlexLine(flexLine, layoutState); remainingSpace -= flexLine.getCrossSize(); } layoutState.mAvailable -= consumed; return start - layoutState.mAvailable; } Simplified version of fill
- 26. private int fill(RecyclerView.Recycler recycler, RecyclerView.State state, LayoutState layoutState) { int start = layoutState.mAvailable; int remainingSpace = layoutState.mAvailable; int consumed = 0; while (remainingSpace > 0 && layoutState.hasMore(state, mFlexLines)) { FlexLine flexLine = mFlexLines.get(layoutState.mFlexLinePosition); layoutState.mPosition = flexLine.mFirstIndex; consumed += layoutFlexLine(flexLine, layoutState); remainingSpace -= flexLine.getCrossSize(); } layoutState.mAvailable -= consumed; return start - layoutState.mAvailable; } mAvailable: Amount of pixels need to be filled mDirection: START | END
- 27. private int fill(RecyclerView.Recycler recycler, RecyclerView.State state, LayoutState layoutState) { int start = layoutState.mAvailable; int remainingSpace = layoutState.mAvailable; int consumed = 0; while (remainingSpace > 0 && layoutState.hasMore(state, mFlexLines)) { FlexLine flexLine = mFlexLines.get(layoutState.mFlexLinePosition); layoutState.mPosition = flexLine.mFirstIndex; consumed += layoutFlexLine(flexLine, layoutState); remainingSpace -= flexLine.getCrossSize(); } layoutState.mAvailable -= consumed; return start - layoutState.mAvailable; } Put views and loop until mAvailable < 0
- 28. onLayoutChildren 1. Find the anchor position 2. Calculate how many items should be in visible portion 3. Fill toward end 4. Fill toward start
- 29. Why fill toward both directions?
- 30. In some cases anchor position may be at the bottom
- 31. 1 2 3 4 5 6 7 8 9 10 11 scrollToPosition(50) 42 43 44 45 46 47 48 49 50 Anchor position
- 32. scrollVerticallyBy Interact with scroll by the user
- 33. @Override public boolean canScrollVertically() { return true; } Could be false depending on attributes. E.g. Orientation in LinearLayoutManager
- 34. @Override public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) { if (isMainAxisDirectionHorizontal()) { int scrolled = handleScrollingCrossAxis(dy, recycler, state); mViewCache.clear(); return scrolled; } else { int scrolled = handleScrollingMainAxis(dy); mAnchorInfo.mPerpendicularCoordinate += scrolled; mSubOrientationHelper.offsetChildren(-scrolled); return scrolled; } }
- 35. @Override public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) { if (isMainAxisDirectionHorizontal()) { int scrolled = handleScrollingCrossAxis(dy, recycler, state); mViewCache.clear(); return scrolled; } else { int scrolled = handleScrollingMainAxis(dy); mAnchorInfo.mPerpendicularCoordinate += scrolled; mSubOrientationHelper.offsetChildren(-scrolled); return scrolled; } } Distance to scroll in pixels
- 36. @Override public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) { if (isMainAxisDirectionHorizontal()) { int scrolled = handleScrollingCrossAxis(dy, recycler, state); mViewCache.clear(); return scrolled; } else { int scrolled = handleScrollingMainAxis(dy); mAnchorInfo.mPerpendicularCoordinate += scrolled; mSubOrientationHelper.offsetChildren(-scrolled); return scrolled; } } The actual distance scrolled
- 37. Small dy Only shift existing views mRecyclerView.offsetChildrenVertical(dy);
- 38. Large dy
- 39. Large dy Recycle views no longer visible
- 40. Large dy Fill appearing views
- 41. What does Recycle mean?
- 42. Two types of cache in RecyclerView 1. Recycle 2. Scrap
- 45. Recycler RecycledViewPool LayoutManager recycler.recycleView(View) 1. Recycle Considered as dirty
- 46. RecyclerRecycler RecycledViewPool Can be shared across multiple RecyclerViews
- 50. How to retrieve aView?
- 52. Case1. Found in scrap Case2. Found in Recycled Pool Case3. Not found in cache
- 53. LayoutManager Adapter Recycler Case1. Found in scrap
- 54. LayoutManager Adapter Recycler Case2. Found in Recycled Pool adapter.bindViewHolder
- 55. LayoutManager Adapter Recycler Case2. Found in Recycled Pool
- 56. LayoutManager Adapter Recycler Case3. Not found in cache adapter.createViewHolder
- 57. LayoutManager Adapter Recycler Case3. Not found in cache
- 58. Use scrap if you re-attach in a same layout pass Use recycle for views no longer needed
- 59. scrollHorizontallyBy Same with vertical except for the direction
- 60. Now you implement basic functions. Is it enough?
- 61. Could be useable... but NO.
- 62. scrollTo(position) smoothScrollTo(position) Fast Scrolling Item Decorations Item prefetch Predictive Animations There are a lot more…
- 63. scrollTo(position) smoothScrollTo(position) Fast Scrolling Item Decorations Item prefetch Predictive Animations There are a lot more…
- 65. Off OnAdd aView
- 67. @Override public boolean supportsPredictiveItemAnimations() { return true; }
- 69. In pre-layout Lay out all the views currently visible and additional views that are appearing (or disappearing) after the animation
- 70. Pre-layout Remaining Appearing Disappearing To be inserted at this positionVisible area
- 74. Now you know the basics of building a custom LayoutManager
- 75. Resources Source of default LayoutManagers github.com/google/flexbox-layout wiresareobsolete.com/2014/09/building-a-recyclerview- layoutmanager-part-1/