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