vlayout阿里巴巴开源淘宝多布局LayoutManager库, a powerfull LayoutManager extension for RecyclerView
68747471.gif
可以实现上面的效果，多布局，recyclerview实现。
下面是简单的使用。
compile ('com.alibaba.android:vlayout:1.2.6@aar') {
transitive = true
}
在gradle 里面配置就可以了
使用：
//开始
DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager, false);
mRecyclerView.setAdapter(delegateAdapter);
//这里先不管，后面再添加
// GridLayoutHelper gridHelper = new GridLayoutHelper(5);
// gridHelper.setMarginTop(30);
//// gridHelper.setWeights(new float[]{20.0f,20.0f,20.0f,20.0f,20.0f});
// //设置垂直方向条目的间隔
// gridHelper.setVGap(5);
// //设置水平方向条目的间隔
// gridHelper.setHGap(5);
// gridHelper.setMarginLeft(30);
// gridHelper.setMarginBottom(30);
// //自动填充满布局，在设置完权重，若没有占满，自动填充满布局
// gridHelper.setAutoExpand(true);
// delegateAdapter.addAdapter(new GridHelperAdapter(imgSrc, gridHelper));
//
// //Linear 布局
// LinearLayoutHelper linearHelper1 = new LinearLayoutHelper(5);
// delegateAdapter.addAdapter(new LinearAdapter(this, linearHelper1));
LinearLayoutHelper linearHelper = new LinearLayoutHelper(5);
delegateAdapter.addAdapter(new RVAdapter(this, linearHelper));
上面四行是必备的，RVAdapter是我们自己的adapter,实现如下：
public class RVAdapter extends DelegateAdapter.Adapter<RecyclerView.ViewHolder>{
Context mContext;
private LayoutHelper mHelper;
private VirtualLayoutManager.LayoutParams mLayoutParams;
public RVAdapter(Context context, LayoutHelper mHelper) {
this(context, mHelper,new VirtualLayoutManager.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 300));
}
public RVAdapter(Context context, LayoutHelper layoutHelper, @NonNull VirtualLayoutManager.LayoutParams layoutParams) {
this.mContext = context;
this.mHelper = layoutHelper;
this.mLayoutParams = layoutParams;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View inflate = LayoutInflater.from(mContext).inflate(R.layout.item_1, null);
return new MyHolder(inflate);
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
// only vertical
holder.itemView.setLayoutParams(
new VirtualLayoutManager.LayoutParams(mLayoutParams));
}
@Override
public int getItemCount() {
return 1;
}
@Override
public LayoutHelper onCreateLayoutHelper() {
return mHelper;
}
class MyHolder extends RecyclerView.ViewHolder {
public MyHolder(View itemView) {
super(itemView);
}
}
}
这里其实啥也没有
holder.itemView.setLayoutParams(
new VirtualLayoutManager.LayoutParams(mLayoutParams));
上面这句，添加布局，其实就是之后我们的每一个item，每一个item都不一样。
在mainactivity里
//item_1
GridLayoutHelper gridHelper = new GridLayoutHelper(5);
gridHelper.setMarginTop(30);
// gridHelper.setWeights(new float[]{20.0f,20.0f,20.0f,20.0f,20.0f});
//设置垂直方向条目的间隔
gridHelper.setVGap(5);
//设置水平方向条目的间隔
gridHelper.setHGap(5);
gridHelper.setMarginLeft(30);
gridHelper.setMarginBottom(30);
//自动填充满布局，在设置完权重，若没有占满，自动填充满布局
gridHelper.setAutoExpand(true);
delegateAdapter.addAdapter(new GridHelperAdapter(imgSrc, gridHelper));
//item_1
//Linear 布局
LinearLayoutHelper linearHelper1 = new LinearLayoutHelper(5);
delegateAdapter.addAdapter(new LinearAdapter(this, linearHelper1));
上面的代码其实就是在两个item,GridLayoutHelper,LinearLayoutHelper,一个表格，一个列表。
有两个adapter这个其实就是每一个item的列表数据，两个adapter没啥特别的，这里贴出来
-GridHelperAdapter
public class GridHelperAdapter extends DelegateAdapter.Adapter<RecyclerView.ViewHolder> {
private LayoutHelper mHelper;
private List<Integer> mData;
public GridHelperAdapter(List<Integer> mData, LayoutHelper helper) {
this.mData = mData;
this.mHelper=helper;
}
@Override
public LayoutHelper onCreateLayoutHelper() {
return mHelper;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.item_grid_layout, parent, false);
return new RecyclerViewItemHolder(view);
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
((RecyclerViewItemHolder) holder).iv_icon.setBackgroundResource(mData.get(position));
}
@Override
public int getItemCount() {
return 5;
}
/**
* 正常条目的item的ViewHolder
*/
private class RecyclerViewItemHolder extends RecyclerView.ViewHolder {
public ImageView iv_icon;
public RecyclerViewItemHolder(View itemView) {
super(itemView);
iv_icon = (ImageView) itemView.findViewById(R.id.iv);
}
}
-LinearAdapter
public class LinearAdapter extends DelegateAdapter.Adapter<RecyclerView.ViewHolder> {
private Context mContext;
private LayoutHelper mHelper;
public LinearAdapter(Context context, LayoutHelper helper) {
this.mContext=context;
this.mHelper=helper;
}
@Override
public LayoutHelper onCreateLayoutHelper() {
return mHelper;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.item_linear_layout, parent, false);
return new RecyclerViewItemHolder(view);
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
RecyclerViewItemHolder recyclerViewHolder = (RecyclerViewItemHolder) holder;
recyclerViewHolder.tv_name.setText((position+"") );
recyclerViewHolder.tv_name.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext, "position:" +position, Toast.LENGTH_SHORT).show();
}
});
}
@Override
public int getItemCount() {
return 10;
}
/**
* 正常条目的item的ViewHolder
*/
private class RecyclerViewItemHolder extends RecyclerView.ViewHolder {
public TextView tv_name;
public RecyclerViewItemHolder(View itemView) {
super(itemView);
tv_name = (TextView) itemView.findViewById(R.id.tv_name);
}
}
}
如上，我们的代码就完了，可以做一个简单的测试
S80110-10511659.jpg
在上图中可以看到，两个item,每一个item又是一个adapter所添加出来的数据，这样就可以实现多种布局
官方提供了几种实用的类
默认通用布局实现，解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等。
LinearLayoutHelper: 线性布局
GridLayoutHelper: Grid布局， 支持横向的colspan
FixLayoutHelper: 固定布局，始终在屏幕固定位置显示
ScrollFixLayoutHelper: 固定布局，但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等
FloatLayoutHelper: 浮动布局，可以固定显示在屏幕上，但用户可以拖拽其位置
ColumnLayoutHelper: 栏格布局，都布局在一排，可以配置不同列之间的宽度比值
SingleLayoutHelper: 通栏布局，只会显示一个组件View
OnePlusNLayoutHelper: 一拖N布局，可以配置1-5个子元素
StickyLayoutHelper: stikcy布局， 可以配置吸顶或者吸底
StaggeredGridLayoutHelper: 瀑布流布局，可配置间隔高度/宽度
