Recycler View (5) - Custom Layout Manager (Layout, Reuse)

Keywords: github


Recently, the video has not been recorded because of the busy time and fragmentation. so, it has been a long time since the last recyclerView series articles. Sorry, I'm going to enter our theme custom LayoutManager.
Remember Recycler View (3) - Layout Magager source code parsing, Linear Layout Manager Among them, we know how to call recyler class recycling / reuse method to reduce the creation and reuse of view, know the layout view principle of layoutManage loading layout view on demand, and summarize the reason why recyler view is so efficient.

We will use the knowledge of the previous chapters to build a custom Layout Manager, which reuses view, loads layout on demand, and loads view recovery view on demand when sliding.

The results are as follows:


Maybe some of you sneer at it. You need to customize the LayoutManager. I just need to customize a VIew myself. Why bother to inherit Layout Manager?

Let me explain why:
1. This section is the product of the knowledge summary of the previous chapters, that is to say, this chapter is the after-school exercises of the knowledge of the previous chapters, so we should take Layout Manager to do things.
2. Considering the performance, careful students here may find that the color of itemView changes every time it slides out of the screen and in again, which indirectly indicates that at least the view is recycled and the layout is loaded on demand (showing only the view of one page layout).
3. We need to use recycler VIew's recycling mechanism to create high-performance custom controls.

1. Analysis of Layout

1.1. Normal layout

1. According to the line label, we divide it into single and double lines, which show three elements and two elements.



2. Items with subscripts of 0 have vertex positions of 0,0.

3. Location of item in two rows
Table header position: as shown below


Paste_Image.png

The item position of the non-header in the two rows is better determined; the coordinate position shifts the width of the item from the previous item x axis.


4. Single-line itemView Location Relations
All items in a single line are determined based on the location of the previous item VIew


Paste_Image.png

1.2. Sliding Layout


1.2.1. Layout when sliding up

As shown in the figure above: When I slide up, I need to reclaim the content in Layout 1, add the content in Layout 2, and then move up as a whole.

1.2.2. Layout when sliding

As shown in the figure above, when I slide down, I need to recycle the content in Layout 2, add the content in Layout 1, and then move down as a whole.

2. Retrospective knowledge

Combination Linear LayoutManager source code parsing Extract the key methods we need to use

// 1. Entry: on Layout Children
 // 2. Recycle all views: remover Recycler Allviews
 // Recycle one or more views: remote AndRecycleViewAt (i, recycler);
// Get view: recycler.getviewForPositon
//
// 3. allow sliding canScrollerVertically () return true;  
// 4. Consumption of sliding distance scroller Vertically (dy...)    

3. Construction of Main Line Frame


public class MyLayoutManager extends LayoutManager {
    LayoutState layoutState = new LayoutState();

    int rowCount = 4;     //Number of double rows
    public MyLayoutManager(int rowCount) {
        this.rowCount = rowCount;
    }

    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
    }

    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {


        //Recycle all view s

        // Computing the various data needed for layout:
        // Layout view recycling view
              fill()
  }
    /**
     * Fill in view recovery view
     *
     * @param layoutState
     * @param recycler
     * @param state
     * @return Actual consumption of offset/actual movement distance
     */
    private int fill(LayoutState layoutState, RecyclerView.Recycler recycler, RecyclerView.State state) {
        //  Recovery of view 
       //Add view
            // Top-down filling
          
                //      Double row
                    //   Fill in view with subscript 0
                    //   Fill in the two-line header view
                    //   Fill in the view of the non-line header
                //     Single row
                    .// Fill in a single line header
                     //Fill in the view of the non-line header

            // Bottom-up filling
                //      Double row
                    //   Fill in double-line end view
                    //   Fill in the view at the end of a non-line
                //     Single row
                    .// Fill in the end of a single line
                     //Fill in the view at the end of a non-line
        
      //Calculate the amount of offset consumed to return
        return ;
    }


    @Override
    public boolean canScrollVertically() {
        return true;
    }

    @Override
    public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
        // Calculate all kinds of data of coordinate points of starting layout according to offset
        // Layout view recycling view
        // Calculating the offset of actual consumption
        // Translating children
         //Returns the offset actually consumed
        return super.scrollVerticallyBy(dy, recycler, state);
    }


    /**
     * Helper class that keeps temporary state while {LayoutManager} is filling out the empty
     * space.
     */
    static class LayoutState {
        //Direction of layout
        int mItemDirection;   // 1: From top to bottom - 1: from bottom to top
        static final int downDirection = 1; //Slide up and fill down
        static final int upDirection = -1;    // Slide down and fill up.

        // The origin of view to start filling
        Point startPoint = new Point(0, 0);

        // Available height
        int mAvailable;
        /**
         * Pixel offset where layout should start
         */
        int mOffset;
        /**
         * Current position on the adapter to get the next item.
         */
        public int mCurrentPosition;

        public void initAndClear() {
            startPoint.set(0, 0);
            mAvailable = 0;
            mOffset = 0;
            mCurrentPosition = 0;
            mItemDirection = downDirection;
        }
    }
}

Okay, the pseudo code is ready. Let's get to work.~~~
The video address of the article is below

· RecyclerView (1) - Decoration source code parsing
· Recycler View (2) - Customize Decoration to Create Time Axis Effect
· Recycler View (3) - Layout Magager source code parsing, Linear Layout Manager
· Recycler View (4) - Core, Recycler Multiplexing Mechanism _1
· Recycler View (4) - Core, Recycler Multiplexing Mechanism _2
· Recycler View (5) - Custom Layout Manager (Layout, Reuse)
· Recycler View (6) - Custom Item Animator
· RecyclerView(7)- ItemTouchHelper
· RecyclerView(8)- MultiType Adapter article,MultiType Adapter Github address

Article Video Address: Links: http://pan.baidu.com/s/1hssvXC4 Password: 18v1
Code address in video notes

I hope my article will not mislead you in watching, if there is any objection, welcome to discuss and correct.
If it can bring you something to watch, that's the best.

Peach Blossom Temple in Peach Blossom Wood
Take a look. Yes, don't believe you order it?

Posted by plsanders on Fri, 31 May 2019 17:17:29 -0700