Recycleview mimics luckin’s menu item list

Hi, you finally come ~ wait for you for a long time ~ like friends welcome to pay attention to, I will regularly share Android knowledge and analysis, and will constantly update the BATJ interview topic, welcome to come to discuss and exchange, if there is a good article also welcome to contribute

preface

But I think Recycleview ItemDecoration is very powerful, you can use it to create listview separations, suspension Windows, and even some very cool animations

rendering

ItemDecoration

• OnDraw (): Similar to a normal View’s onDraw, draw something on a canvas.
• OnDrawOver (): Just draw something again on onDraw, over.
• GetItemOffsets ():Recycleview can get the spacing of each item through it, so you only need to control the spacing, and use onDrawOver in the spacing to draw what you want to draw.

1. Manually format the data as follows

Goods goods1 = new Goods("Sentiment on TOP"."Real Fruit Latte 1"."Y27".Default: large/monosaccharide/hot);
Goods goods99 = new Goods("Sentiment on TOP"."Real Fruit Latte 2"."Y27".Default: large/monosaccharide/hot);
Goods goods91 = new Goods("Sentiment on TOP"."Real Fruit Latte 3"."Y27".Default: large/monosaccharide/hot);
Goods goods2 = new Goods(Master coffee."Latte"."Y27".Default: large/monosaccharide/hot);
Goods goods3 = new Goods(Master coffee.Vanilla latte.."Y24".Default: large/monosaccharide/hot);
Goods goods4 = new Goods(Master coffee."Caramel latte."."Y26"."Default: large/half sugar/hot");
List<Goods> list = new ArrayList<>();Copy the code

2. Write your own ItemDecoration

• Reserve space for getItemOffsets. You only need to reserve a height for the first data in each array, such as the first popular TOP and the first master coffee.

@override public Boolean isParent(int position) {Override public Boolean isParent(int position) {if (position == 0) return true;
        if(! list.get(position).getType().equals(list.get(position - 1).getType()))return true;
    return false; } // Last item protected Boolean lastOneInGroup(int position) {String parentName = mDecorListener.parentName(position); String nextGroupName; try { nextGroupName = mDecorListener.parentName(position + 1); } catch (Exception e) { nextGroupName = null; }if (nextGroupName == null) {
            return false;
        }
        return! TextUtils.equals(parentName, nextGroupName); } return the size of the height you want to reserve, 0 @override public void getItemOffsets(Rect outRect, View View, RecyclerView parent, RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); int position = parent.getChildAdapterPosition(view);if (parent.getLayoutManager() instanceof LinearLayoutManager && mDecorListener.isParent(position)) {
            outRect.top = decorationHeight;
            return;
        }
        outRect.top = 0;
    }
Copy the code

• Draw your view on the reserved space

@Override public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDrawOver(c, parent, state); final int itemCount = state.getItemCount(); Final int childCount = parent.getChildCount(); Final int left = parent.getpaddingLeft (); final int right = parent.getWidth() - parent.getPaddingRight();for(int i = 0; i < childCount; i++) { View childView = parent.getChildAt(i); int position = parent.getChildAdapterPosition(childView); // Is the position that is currently visible on each row, starting from 0. // By default, the first line has a Groupif(mDecorListener isParent (position) | | I = = 0) {/ / in the first place and visible first have this hover / / draw the suspension,  int bottom = Math.max(decorationHeight, (childView.getTop() + parent.getPaddingTop())); // Determine the bottom of the first floating Group on the current top, get the height of the item and the specified height comparison, just select an appropriate height to define the dividing lineifInt viewBottom = childView.getBottom(); (position + 1 < itemCount) {int viewBottom = childView.getBottom();if(lastOneInGroup(position) && viewBottom < bottom) { bottom = viewBottom; // If this is turned off, the effect will be overwritten, and the top effect will be lost. In fact, the viewBottom gradually becomes 0, so that the dynamic position of the vanishing hover bar is placed, DrawDecoration (c, position, left, right, bottom, parent); stickyHeaderPosArray.put(position, bottom); } } } private void drawDecoration(Canvas c, int position, int left, int right, int bottom, RecyclerView parent) { c.drawRect(left, bottom - decorationHeight, right, bottom, mGroutPaint); Paint.FontMetrics fm = mTextPaint.getFontMetrics(); // The text is vertically centeredfloatbaseLine = bottom - (decorationHeight - (fm.bottom - fm.top)) / 2 - fm.bottom; MSideMargin = math.abs (mSideMargin); c.drawText(mDecorListener.parentName(position), left + mSideMargin, baseLine, mTextPaint); // baseLine Rect = new Rect(); / / in order to get the current text attribute mTextPaint getTextBounds (mDecorListener. ParentName (position), and 0, mDecorListener.parentName(position).length(), rect); C.rawline (left + mSideMargin * 2 + rect.width(), baseLine - rect.height() / 2, parent.getWidth() - mSideMargin, baseLine - rect.height() / 2, mTextPaint); }Copy the code

• This article mainly realized Recycleview to imitate Luckin coffee menu item list, think the article is good like friends can pay attention to add share, also welcome to come to discuss exchanges.