recylerview 开源库MultiType最简易的用法/recylerview 混排/recylerview 添加边距

带屏烟机项目中有个这样的需求,右侧菜谱步骤是顶部是食材的一些信息,底部是做法的步骤,可以划分为两个区域
但是两个区域是可以连续滚动的.
怎么布局呢,
一个linerlayout,下面一个gridview,外部再套一个scrollview,这样明显是不可行的,因为scrollview 和gridview 嵌套会有冲突,如果偏要这样做,也可以,就必须解决两者的冲突.明显是不可行的.所以可以使用一个recylerview来实现

image.png

一个recylerview 怎么做呢?listView 可以使用addHeaderView ,但是recylerview 不行哦,得扩展recylerview 的功能才行
所以我们使用一个开源库 :MultiType 传送门,很强大的一个库,不过我们只用到了最简单的用法

     mAdapter = new MultiTypeAdapter();
    //header
    mAdapter.register(SmartCookMaterialInfo.class, new SmartCookStepHeadAdapter());
    //下面的列表
    mAdapter.register(NetStepInfo.StepsBean.class, new SmartCookStepAdapter());
    mRvCook.setAdapter(mAdapter);
    Items allItem = new Items();
    //组装header 的数据
    List stepInfoList = new ArrayList<>();
    stepInfoList.add(materialInfo);

    //添加header
    allItem.addAll(stepInfoList);
    //添加下面的列表
    allItem.addAll(netStepInfo);

    mAdapter.setItems(allItem);
    mAdapter.notifyDataSetChanged();

使用方法很简单
1.new 一个 MultiTypeAdapter
2.注册两种不同的类型(之前必须写好两个不同类型的adapter)
3.设置recylerview的adapter
4.分别添加顶部步骤的信息和底部的步骤信息
5.设置数据源
6.notify

就这样就实现效果了吗?
NO NO NO 你会发现顶部的材料信息模块,变成了GridView 的一个Item ,显示在了第一个位置
就时候,我们就使用到另一种方法了,recylerview的混排
使用方法如下:

GridLayoutManager gridLayoutManager = new GridLayoutManager(getActivity(), 2);
    gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            return position == 0 ? 2 : 1; //第一个位置,占用2个宽度
        }
    });

首先定义整个recylerview的布局为网格布局和每行的网格数量2,然后setSpanSizeLookup ,设置第一个Item 占用2个位置即可

就这样就实现了吗?我们仔细看下面的item 之前的间距怎么控制呢?在xml 控制?可以,但是我们也可以在代码里面来控制

public class RecyclerViewSpacesItemDecoration extends RecyclerView.ItemDecoration {
private HashMap mSpaceValueMap;

public static final String TOP_DECORATION = "top_decoration";
public static final String BOTTOM_DECORATION = "bottom_decoration";
public static final String LEFT_DECORATION = "left_decoration";
public static final String RIGHT_DECORATION = "right_decoration";

public RecyclerViewSpacesItemDecoration(HashMap mSpaceValueMap) {
    this.mSpaceValueMap = mSpaceValueMap;
}

@Override
public void getItemOffsets(Rect outRect, View view,
                           RecyclerView parent, RecyclerView.State state) {
    if (mSpaceValueMap.get(TOP_DECORATION) != null)
        outRect.top = mSpaceValueMap.get(TOP_DECORATION);
    if (mSpaceValueMap.get(LEFT_DECORATION) != null)
        outRect.left = mSpaceValueMap.get(LEFT_DECORATION);
    if (mSpaceValueMap.get(RIGHT_DECORATION) != null)
        outRect.right = mSpaceValueMap.get(RIGHT_DECORATION);
    if (mSpaceValueMap.get(BOTTOM_DECORATION) != null)
        outRect.bottom = mSpaceValueMap.get(BOTTOM_DECORATION);

}}

    HashMap stringIntegerHashMap = new HashMap<>();
    stringIntegerHashMap.put(RecyclerViewSpacesItemDecoration.TOP_DECORATION, Utils.dip2px(getActivity(), 20));//top间距
    stringIntegerHashMap.put(RecyclerViewSpacesItemDecoration.BOTTOM_DECORATION, Utils.dip2px(getActivity(), 20));//底部间距
    stringIntegerHashMap.put(RecyclerViewSpacesItemDecoration.LEFT_DECORATION, Utils.dip2px(getActivity(), 20));//左间距
    stringIntegerHashMap.put(RecyclerViewSpacesItemDecoration.RIGHT_DECORATION, Utils.dip2px(getActivity(), 20));//右间距
    mRvCook.addItemDecoration(new RecyclerViewSpacesItemDecoration(stringIntegerHashMap));

直接调用recylerview的addItemDecoration方法即可添加边距信息,这里我们编写一个类 RecyclerViewSpacesItemDecoration 继承 recylerview的 RecyclerView.ItemDecoration ,重写 getItemOffsets 方法,在里面配置相关的上下左右边距信息即可

就这样就可以实现一个recylerview 实现以上的功能啦.