粘性头部 + 流式布局

1、依赖

// 侧滑菜单、TabLayout
implementation 'com.android.support:design:28.0.0'
// 粘性头部/悬浮头部
implementation 'com.github.qdxxxx:StickyHeaderDecoration:1.0.1'

2、在 Project 的 build.gradle 文件里

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

3、Activity 中

private void initData() {
    mCars = new ArrayList<>();
    mCars.add(new Car("奥迪",  "A"));
    mCars.add(new Car("阿尔法罗密欧",  "A"));
    mCars.add(new Car("阿斯顿马丁",  "A"));
    mCars.add(new Car("ALPINA",  "A"));
    mCars.add(new Car("安凯客车",  "A"));

    mCars.add(new Car("本田", "B"));
    mCars.add(new Car("别克", "B"));
    mCars.add(new Car("奔驰",  "B"));
    mCars.add(new Car("宝马", "B"));
    mCars.add(new Car("保时捷",  "B"));
    mCars.add(new Car("比亚迪", "B"));
    mCars.add(new Car("北京", "B"));
    mCars.add(new Car("宾利",  "B"));
    mCars.add(new Car("巴博斯",  "B"));
    mCars.add(new Car("布加迪威龙", "B"));

    mCars.add(new Car("长安", "C"));
    mCars.add(new Car("长城",  "C"));

    mCars.add(new Car("大众", "D"));
    mCars.add(new Car("东南",  "D"));
    mCars.add(new Car("东风", "D"));
    mCars.add(new Car("DS", "D"));
    mCars.add(new Car("道奇", "D"));
    mCars.add(new Car("东风小康", "D"));
}

private void initView() {
    final LayoutInflater inflater = LayoutInflater.from(this);
    mRlv = (RecyclerView) findViewById(R.id.rlv);
    mRlv.setLayoutManager(new LinearLayoutManager(this));
    RlvAdapter rlvAdapter = new RlvAdapter(mCars);
    // 返回头布局的内容
    final NormalDecoration decoration = new NormalDecoration() {
        @Override
        public String getHeaderName(int i) {
            return mCars.get(i).headerName;
        }
    };
    // 自定义头布局，可不设置
    decoration.setOnDecorationHeadDraw(new NormalDecoration.OnDecorationHeadDraw() {
        @Override
        public View getHeaderView(final int i) {
            View inflate = inflater.inflate(R.layout.item_header, null);
            TextView tv = inflate.findViewById(R.id.tv);
            tv.setText(mCars.get(i).headerName);

            return inflate;
        }
    });
    mRlv.addItemDecoration(decoration);
    // 头布局的点击事件
    decoration.setOnHeaderClickListener(new NormalDecoration.OnHeaderClickListener() {
        @Override
        public void headerClick(int i) {
            Toast.makeText(MainActivity.this, mCars.get(i).headerName, Toast.LENGTH_SHORT).show();
            startActivity(new Intent(MainActivity.this,FlowActivity.class));
        }
    });
    mRlv.setAdapter(rlvAdapter);
}

粘性头部相当于是 RecyclerView 中两个条目之间的分割线，在数据如下情况下就可以使用粘性头部

import java.util.ArrayList;

public class NodeBean {
    String header;
    ArrayList<String> list;

    public NodeBean() {
    }

    public NodeBean(String header, ArrayList<String> list) {
        this.header = header;
        this.list = list;
    }

    public String getHeader() {

        return header;
    }

    public void setHeader(String header) {
        this.header = header;
    }

    public ArrayList<String> getList() {
        return list;
    }

    public void setList(ArrayList<String> list) {
        this.list = list;
    }
}

如果 item 条目中是简短的 String 类型的数据的时候还可以使用流式布局

流式布局.gif

流式布局里的内容就是每一个粘性头部下的数据放到了一起

1、FlowLayout（自定义 View，直接复制就可以，在 RecyclerView 的 item 布局里引用就可以）

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

public class FlowLayout extends ViewGroup {

    private List<Line> mLines = new ArrayList<Line>(); // 用来记录描述有多少行 View
    private Line mCurrrenLine;  // 用来记录当前已经添加到了哪一行
    private int mHorizontalSpace    = 40;
    private int mVerticalSpace = mHorizontalSpace;
    private int mMaxLines = -1;

    public int getMaxLines() {
        return mMaxLines;
    }

    public void setMaxLines(int maxLines) {
        mMaxLines = maxLines;
    }

    public FlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public FlowLayout(Context context) {
        super(context);
    }

    public void setSpace(int horizontalSpace, int verticalSpace) {
        this.mHorizontalSpace = horizontalSpace;
        this.mVerticalSpace = verticalSpace;
    }

    public void clearAll(){
        mLines.clear();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 清空
        mLines.clear();
        mCurrrenLine = null;

        int layoutWidth = MeasureSpec.getSize(widthMeasureSpec);

        // 获取行最大的宽度
        int maxLineWidth = layoutWidth - getPaddingLeft() - getPaddingRight();

        // 测量孩子
        int count = getChildCount();
        for (int i = 0; i < count; i++)
        {
            View view = getChildAt(i);

            // 如果孩子不可见
            if (view.getVisibility() == View.GONE)
            {
                continue;
            }

            // 测量孩子
            measureChild(view, widthMeasureSpec, heightMeasureSpec);

            // 往 lines 添加孩子
            if (mCurrrenLine == null)
            {
                // 说明还没有开始添加孩子
                mCurrrenLine = new Line(maxLineWidth, mHorizontalSpace);

                // 添加到 Lines 中
                mLines.add(mCurrrenLine);

                // 行中一个孩子都没有
                mCurrrenLine.addView(view);
            }
            else
            {
                // 行不为空，行中有孩子了
                boolean canAdd = mCurrrenLine.canAdd(view);
                if (canAdd) {
                    // 可以添加
                    mCurrrenLine.addView(view);
                }
                else {
                    // 不可以添加，装不下去
                    // 换行
                    if (mMaxLines >0){
                        if (mLines.size()<mMaxLines){
                            // 新建行
                            mCurrrenLine = new Line(maxLineWidth, mHorizontalSpace);
                            // 添加到 lines 中
                            mLines.add(mCurrrenLine);
                            // 将 view 添加到 line
                            mCurrrenLine.addView(view);
                        }
                    } else {
                        // 新建行
                        mCurrrenLine = new Line(maxLineWidth, mHorizontalSpace);
                        // 添加到 lines 中
                        mLines.add(mCurrrenLine);
                        // 将 view 添加到 line
                        mCurrrenLine.addView(view);
                    }
                }
            }
        }

        // 设置自己的宽度和高度
        int measuredWidth = layoutWidth;
        // paddingTop + paddingBottom + 所有的行间距 + 所有的行的高度

        float allHeight = 0;
        for (int i = 0; i < mLines.size(); i++)
        {
            float mHeigth = mLines.get(i).mHeigth;

            // 加行高
            allHeight += mHeigth;
            // 加间距
            if (i != 0)
            {
                allHeight += mVerticalSpace;
            }
        }

        int measuredHeight = (int) (allHeight + getPaddingTop() + getPaddingBottom() + 0.5f);
        setMeasuredDimension(measuredWidth, measuredHeight);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b)
    {
        // 给 Child 布局 ---> 给 Line 布局

        int paddingLeft = getPaddingLeft();
        int offsetTop = getPaddingTop();
        for (int i = 0; i < mLines.size(); i++)
        {
            Line line = mLines.get(i);

            // 给行布局
            line.layout(paddingLeft, offsetTop);

            offsetTop += line.mHeigth + mVerticalSpace;
        }
    }

    class Line
    {
        // 属性
        private List<View> mViews = new ArrayList<View>(); // 用来记录每一行有几个 View
        private float mMaxWidth; // 行最大的宽度
        private float mUsedWidth; // 已经使用了多少宽度
        private float mHeigth; // 行的高度
        private float mMarginLeft;
        private float mMarginRight;
        private float mMarginTop;
        private float mMarginBottom;
        private float mHorizontalSpace; // View 和 view 之间的水平间距

        // 构造
        public Line(int maxWidth, int horizontalSpace) {
            this.mMaxWidth = maxWidth;
            this.mHorizontalSpace = horizontalSpace;
        }

        // 方法
        /**
         * 添加 view，记录属性的变化
         * 
         * @param view
         */
        public void addView(View view)
        {
            // 加载 View 的方法

            int size = mViews.size();
            int viewWidth = view.getMeasuredWidth();
            int viewHeight = view.getMeasuredHeight();
            // 计算宽和高
            if (size == 0)
            {
                // 说明还没有添加 View
                if (viewWidth > mMaxWidth)
                {
                    mUsedWidth = mMaxWidth;
                }
                else
                {
                    mUsedWidth = viewWidth;
                }
                mHeigth = viewHeight;
            }
            else
            {
                // 多个 view 的情况
                mUsedWidth += viewWidth + mHorizontalSpace;
                mHeigth = mHeigth < viewHeight ? viewHeight : mHeigth;
            }

            // 将 View 记录到集合中
            mViews.add(view);
        }

        /**
         * 用来判断是否可以将 View 添加到 line 中
         * 
         * @param view
         * @return
         */
        public boolean canAdd(View view)
        {
            // 判断是否能添加 View

            int size = mViews.size();

            if (size == 0) { return true; }

            int viewWidth = view.getMeasuredWidth();

            // 预计使用的宽度
            float planWidth = mUsedWidth + mHorizontalSpace + viewWidth;

            if (planWidth > mMaxWidth)
            {
                // 加不进去
                return false;
            }

            return true;
        }

        /**
         * 给孩子布局
         * 
         * @param offsetLeft
         * @param offsetTop
         */
        public void layout(int offsetLeft, int offsetTop)
        {
            // 给孩子布局

            int currentLeft = offsetLeft;

            int size = mViews.size();
            // 判断已经使用的宽度是否小于最大的宽度
            float extra = 0;
            float widthAvg = 0;
            if (mMaxWidth > mUsedWidth)
            {
                extra = mMaxWidth - mUsedWidth;
                widthAvg = extra / size;
            }

            for (int i = 0; i < size; i++)
            {
                View view = mViews.get(i);
                int viewWidth = view.getMeasuredWidth();
                int viewHeight = view.getMeasuredHeight();

                // 判断是否有富余
                if (widthAvg != 0)
                {
                    // 改变宽度，变为不改变，避免最后一行因 label 不足,单个 label 变宽
                    // int newWidth = (int) (viewWidth + widthAvg + 0.5f);
                    int newWidth = viewWidth;
                    int widthMeasureSpec = MeasureSpec.makeMeasureSpec(newWidth, MeasureSpec.EXACTLY);
                    int heightMeasureSpec = MeasureSpec.makeMeasureSpec(viewHeight, MeasureSpec.EXACTLY);
                    view.measure(widthMeasureSpec, heightMeasureSpec);

                    viewWidth = view.getMeasuredWidth();
                    viewHeight = view.getMeasuredHeight();
                }

                // 布局
                int left = currentLeft;
                int top = (int) (offsetTop + (mHeigth - viewHeight) / 2 +
                            0.5f);
                // int top = offsetTop;
                int right = left + viewWidth;
                int bottom = top + viewHeight;
                view.layout(left, top, right, bottom);

                currentLeft += viewWidth + mHorizontalSpace;
            }
        }
    }

}

2、RecyclerView 的 item 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.lenovo.day04.widget.FlowLayout
        android:id="@+id/fl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </com.example.lenovo.day04.widget.FlowLayout>

</LinearLayout>

3、在 RecyclerView 的适配器的 onBindViewHolder() 方法里

NodeBean 就是上面提到的数据的 bean 类

    @Override
    public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {

        NodeBean nodeBean = recyclerviewList.get(i);

        ArrayList<String> list = nodeBean.getList();
        // 清空 fl 里的数据，不然会把其他集合里的数据添加进来
        viewHolder.fl.removeAllViews();
        for (int j = 0; j < list.size(); j++) {
            // 获取视图，视图可以自定义，可以添加自己想要的效果
            TextView label = (TextView) View.inflate(context, R.layout.item_label, null);
            // 获取数据
            final String data = list.get(j);
            // 绑定数据
            label.setText(data);
            
            // 监听方法
            label.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    
                }
            });

            // 加到容器中，parent 是 FlowLayout
            viewHolder.fl.addView(label);
        }

    }

item_label.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text=""
    android:maxLines="1"
    android:ellipsize="end"
    android:gravity="center"
    android:paddingLeft="12dp"
    android:paddingRight="12dp"
    android:background="@drawable/bg_e7e7e7_r30"
    android:paddingTop="2dp"
    android:paddingBottom="2dp"
    android:textColor="@color/c_636363"
    android:textSize="14sp"/>

流式布局相当于一个容器，把一堆数据放到一个容器中，它会自动把数据隔开

Activtiy 所有代码

public class FadeActivity extends AppCompatActivity {

    private static final String TAG = "FadeActivity";

    private String mUrl="https://www.v2ex.com/?tab=creative";

    private RecyclerView recyclerview;
    private ArrayList<NodeBean> recyclerviewList;
    private V2exNodeRecyclerViewAdapter v2exNodeRecyclerViewAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fade);
        initView();
        initData();
    }

    private void initView() {
        // 系统自带的返回箭头
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setTitle("节点导航");

        recyclerview = (RecyclerView) findViewById(R.id.recyclerview);
        recyclerviewList = new ArrayList<>();

        setData();
    }

    private void setData() {
        recyclerview.setLayoutManager(new LinearLayoutManager(FadeActivity.this));
        v2exNodeRecyclerViewAdapter = new V2exNodeRecyclerViewAdapter(recyclerviewList, FadeActivity.this);
        // 返回头布局的内容
        final NormalDecoration decoration = new NormalDecoration() {
            @Override
            public String getHeaderName(int i) {
                return recyclerviewList.get(i).getHeader();
            }
        };
        // 自定义头布局，可不设置
//        decoration.setOnDecorationHeadDraw(new NormalDecoration.OnDecorationHeadDraw() {
//            @Override
//            public View getHeaderView(final int i) {
//                View inflate = LayoutInflater.from(getContext()).inflate(R.layout.item_header, null);
//                TextView tv = inflate.findViewById(R.id.tv);
//                tv.setText(mCars.get(i).header);
//
//                return inflate;
//            }
//        });

        recyclerview.addItemDecoration(decoration);
        // 头布局的点击事件
//        decoration.setOnHeaderClickListener(new NormalDecoration.OnHeaderClickListener() {
//            @Override
//            public void headerClick(int i) {
//                Toast.makeText(getContext(), mCars.get(i).header, Toast.LENGTH_SHORT).show();
//                //startActivity(new Intent(getContext(), FlowActivity.class));
//                startActivity(new Intent(getContext(), MaterialActivity.class));
//            }
//        });
        recyclerview.setAdapter(v2exNodeRecyclerViewAdapter);
    }

    private void initData() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Document doc = Jsoup.connect(mUrl).get();
                    Elements elements = doc.select("div#Main div.box");
                    Element element1 = elements.get(1);

                    final ArrayList<String> titles = new ArrayList<>();
                    final ArrayList<ArrayList<String>> arrayLists = new ArrayList<>();
                    Elements cells = element1.select("div.cell");
                    for (int i = 1; i < cells.size(); i++) {

                        // 分享与探索、V2EX、iOS、Geek、游戏、Apple、生活、Internet、城市
                        String title = cells.get(i).select("table tr td span").text();
                        titles.add(title);

                        ArrayList<String> arrayList = new ArrayList<>();
                        Elements articles = cells.get(i).select("table tr td a");
                        for (int j = 0; j < articles.size(); j++) {
                            String text = articles.get(j).text();
                            arrayList.add(text);
                        }
                        arrayLists.add(arrayList);
                    }

                    // 品牌
                    String title = element1.select("div.inner table tr td span").text();
                    titles.add(title);

                    ArrayList<String> arrayList = new ArrayList<>();
                    Elements select = element1.select("div.inner table tr td a");
                    for (int i = 0; i < select.size(); i++) {
                        String text = select.get(i).text();
                        arrayList.add(text);
                    }
                    arrayLists.add(arrayList);

                    runOnUiThread(new Runnable() {

                        private NodeBean nodeBean;
                        private ArrayList<String> list;
                        private String title;

                        @Override
                        public void run() {
                            ArrayList<NodeBean> nodeBeans = new ArrayList<>();
                            for (int i = 0; i < titles.size(); i++) {
                                title = titles.get(i);
                                nodeBean = new NodeBean();
                                nodeBean.setHeader(title);
                                nodeBeans.add(nodeBean);
                            }
                            for (int j = 0; j < arrayLists.size(); j++) {
                                list = arrayLists.get(j);
                                nodeBean.setList(list);
                                NodeBean nodeBean = nodeBeans.get(j);
                                nodeBean.setList(list);
                            }
                            Log.e(TAG, "run: " +arrayLists.size());
                            recyclerviewList.addAll(nodeBeans);
                            v2exNodeRecyclerViewAdapter.notifyDataSetChanged();
                        }
                    });

                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }).start();
    }
    
    // 返回箭头的监听
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                break;
        }
        return true;
    }
}

一步一步使用自定义 ViewGroup 实现流式布局