为什么要使用vlayout

[vlayout]是对RecyclerView的LayoutManage的扩展，所以它接管了RecyclerView的整个布局方式，可以通过它实现各种各样的布局方式，非常的灵活。它提供的默认布局方式解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等，大致分为两类：一是非fix类型布局，像线性、Grid、栏格等，它们的特点是布局在整个页面流里，随页面滚动而滚动；另一类就是fix类型的布局，它们的子节点往往不随页面滚动而滚动。除了这个，它用来管理大的模块布局组合，使得同一RecyclerView内的组件可以复用，减少View的创建和销毁过程

通过demo学习

Paste_Image.png

上面这张图是通过运行vlayout提供的demo得到的效果图，看起来挺多view，也挺复杂的，很难相信这只是一个RecyclerView，是不是也间接证明了vLayout的强大。

下面来拆解下这么复杂的布局是如何在一个RecyclerView里实现的。

开始使用

基本用法

final VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);

recyclerView.setLayoutManager(layoutManager);

final DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager, true);

recyclerView.setAdapter(delegateAdapter);

final List adapters = new LinkedList<>();

//需要添加新的布局，就定义一个新的adapter

delegateAdapter.setAdapters(adapters);

需要定义DelegateAdapter.Adapter的子类，如下

static class SubAdapter extends DelegateAdapter.Adapter {

private Context mContext;

private LayoutHelper mLayoutHelper;

private LayoutParams mLayoutParams;

private int mCount = 0;

public SubAdapter(Context context, LayoutHelper layoutHelper, int count) {

this(context, layoutHelper, count, new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 300));

}

public SubAdapter(Context context, LayoutHelper layoutHelper, int count, @NonNull LayoutParams layoutParams) {

this.mContext = context;

this.mLayoutHelper = layoutHelper;

this.mCount = count;

this.mLayoutParams = layoutParams;

}

@Override

public LayoutHelper onCreateLayoutHelper() {

return mLayoutHelper;

}

@Override

public MainViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

return new MainViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item, parent, false));

}

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

// only vertical

holder.itemView.setLayoutParams(

new LayoutParams(mLayoutParams));

}

@Override

protected void onBindViewHolderWithOffset(MainViewHolder holder, int position, int offsetTotal) {

((TextView) holder.itemView.findViewById(R.id.title)).setText(Integer.toString(offsetTotal));

}

@Override

public int getItemCount() {

return mCount;

}

}

添加一个普通的布局:adapter

adapters.add(new SubAdapter(this, new LinearLayoutHelper(), 1) {

@Override

public void onViewRecycled(MainViewHolder holder) {

if (holder.itemView instanceof ViewPager) {

((ViewPager) holder.itemView).setAdapter(null);

}

}

@Override

public MainViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

if (viewType == 1)

return new MainViewHolder(

LayoutInflater.from(VLayoutActivity.this).inflate(R.layout.view_pager, parent, false));

return super.onCreateViewHolder(parent, viewType);

}

@Override

public int getItemViewType(int position) {

return 1;

}

@Override

protected void onBindViewHolderWithOffset(MainViewHolder holder, int position, int offsetTotal) {

}

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

if (holder.itemView instanceof ViewPager) {

ViewPager viewPager = (ViewPager) holder.itemView;

viewPager.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 200));

// from position to get adapter

viewPager.setAdapter(new PagerAdapter(this, viewPool));

}

}

});

看下效果图

Paste_Image.png

添加一个悬浮的布局：adapter

FloatLayoutHelper layoutHelper = new FloatLayoutHelper();

layoutHelper.setAlignType(FixLayoutHelper.BOTTOM_LEFT);

layoutHelper.setDefaultLocation(100, 400);

LayoutParams layoutParams = new LayoutParams(150, 150);

adapters.add(new SubAdapter(this, layoutHelper, 1, layoutParams));

效果图：

Paste_Image.png

分析：

FloatLayoutHelper是悬浮布局的实现类

setAlignType 有四种: TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT

setDefaultLocation: x, y 代表与边界的距离，和alignType有关系，比如：TOP_LEFT, x 是与左边的距离，y是与上边的距离

可以随手势拖动

添加 宽比高为2的布局

LinearLayoutHelper layoutHelper1 = new LinearLayoutHelper();

layoutHelper1.setAspectRatio(2.0f);

adapters.add(new SubAdapter(this, layoutHelper1, 1));

效果图：

Paste_Image.png

分析：

setAspectRatio(2.0f)设置宽比高比例为2的布局

添加子列表

LinearLayoutHelper layoutHelper2 = new LinearLayoutHelper();

layoutHelper2.setAspectRatio(4.0f);

layoutHelper2.setDividerHeight(10);

layoutHelper2.setMargin(10, 30, 10, 10);

layoutHelper2.setPadding(10, 30, 10, 10);

layoutHelper2.setBgColor(0xFFF5A623);

adapters.add(new SubAdapter(this, layoutHelper2, 6) {

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

if (position % 2 == 0) {

LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 300);

layoutParams.mAspectRatio = 5;

holder.itemView.setLayoutParams(layoutParams);

}

}

});

Paste_Image.png

分析：

我们看到的是一个垂直方向的列表，如果想要变成一个水平方向上的列表，需要修改VirtualLayoutManager的orientation

layoutManager.setOrientation(VirtualLayoutManager.HORIZONTAL);

效果图：

Paste_Image.png

添加一个sticky布局，黏住但不固定，手势之后会变化

StickyLayoutHelper layoutHelper = new StickyLayoutHelper();

layoutHelper.setOffset(100);

layoutHelper.setAspectRatio(4);

adapters.add(new SubAdapter(this, layoutHelper, 1, new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 100)));

Paste_Image.png

添加只有一个view的布局

SingleLayoutHelper singleLayoutHelper = new SingleLayoutHelper();

singleLayoutHelper.setBgColor(Color.rgb(135, 225, 90));

singleLayoutHelper.setAspectRatio(4);

singleLayoutHelper.setMargin(10, 20, 10, 20);

singleLayoutHelper.setPadding(10, 10, 10, 10);

adapters.add(new SubAdapter(this, singleLayoutHelper, 2, new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 100)));

Paste_Image.png

分析：

当你使用SingleLayoutHelper时，如果SubAdapter的数量是多少，界面上只有显示一个view.

添加一个表格布局

ColumnLayoutHelper layoutHelper = new ColumnLayoutHelper();

layoutHelper.setBgColor(0xff00f0f0);

layoutHelper.setWeights(new float[]{40.0f, Float.NaN, 40});

adapters.add(new SubAdapter(this, layoutHelper, 5) {

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

if (position == 0) {

LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 300);

layoutParams.mAspectRatio = 4;

holder.itemView.setLayoutParams(layoutParams);

} else {

LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 300);

layoutParams.mAspectRatio = Float.NaN;

holder.itemView.setLayoutParams(layoutParams);

}

}

});

Paste_Image.png

分析：

setWeights(new float[]{40.0f, Float.NaN, 40})确定了每列的比重权值，默认总权值是100，第一列和第三列是40，其他都是任意。我们看第一行为什么是这样的一个高度，因为下面的代码layoutParams.mAspectRatio = 4限制了宽高比是4。

添加一个OnePlusNLayoutHelper(数量为2)

需要先了解下它支持的布局方式有下面几种

* 1 + 0

* -------------------------

* | 1 |

* -------------------------

*

* 1 + 1

* -------------------------

* | | |

* | 1 | 2 |

* | | |

* -------------------------

*

* 1 + 2

* -------------------------

* | | 2 |

* | 1 |-----------|

* | | 3 |

* -------------------------

*

* 1 + 3

* -------------------------

* | | 2 |

* | 1 |-----------|

* | | 3 | 4 |

* -------------------------

* 1 + 4

* -------------------------

* | | 2 |

* | 1 |-----------|

* | | 3 | 4 | 5 |

* -------------------------

比如下面

OnePlusNLayoutHelper helper = new OnePlusNLayoutHelper();

helper.setBgColor(0xff876384);

helper.setAspectRatio(4.0f);

helper.setColWeights(new float[]{40f, 45f});

helper.setMargin(10, 20, 10, 20);

helper.setPadding(10, 10, 10, 10);

adapters.add(new SubAdapter(this, helper, 2));

Paste_Image.png

分析：

setAspectRatio(4.0f)设置整体布局的宽高比,setColWeights(new float[]{40f, 45f})设置列的权重，总权重是100，这里设置了第一列权重是40，第二列权重是45

添加一个OnePlusNLayoutHelper(数量为4)

OnePlusNLayoutHelper helper = new OnePlusNLayoutHelper();

helper.setBgColor(0xffef8ba3);

helper.setAspectRatio(2.0f);

helper.setColWeights(new float[]{40f});

helper.setRowWeight(30f);

helper.setMargin(10, 20, 10, 20);

helper.setPadding(10, 10, 10, 10);

adapters.add(new SubAdapter(this, helper, 4) {

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

LayoutParams lp = (LayoutParams) holder.itemView.getLayoutParams();

if (position == 0) {

lp.rightMargin = 1;

} else if (position == 1) {

} else if (position == 2) {

lp.topMargin = 1;

lp.rightMargin = 1;

}

}

});

Paste_Image.png

分析：

当数量为4，为什么是这样一个展示页面，参考上面的(1+3)

setAspectRatio(2.0f)设置整个布局宽高比是2，setColWeights(new float[]{40f})设置第一列权重是40,

setRowWeight(30f)设置第一行的权重是30，行总权重是100

添加一个固定布局

FixLayoutHelper layoutHelper = new FixLayoutHelper(FixLayoutHelper.TOP_RIGHT, 20, 20);

adapters.add(new SubAdapter(this, layoutHelper, 1) {//29

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

LayoutParams layoutParams = new LayoutParams(200, 200);

holder.itemView.setLayoutParams(layoutParams);

}

});

Paste_Image.png

分析：

固定类型(alignType)有四种：TOP_LEFT(左上角)，TOP_RIGHT(右上角)，BOTTOM_LEFT(左下角)，BOTTOM_RIGHT(右下角)

固定的边距，如上x=20, y=20, 所以就得到上面的固定样式

LayoutParams layoutParams = new LayoutParams(200, 200); 设置固定布局的子view的宽高尺寸

添加一个方格

GridLayoutHelper layoutHelper = new GridLayoutHelper(4);

layoutHelper.setWeights(new float[]{20f, 26.665f});

layoutHelper.setMargin(7, 0, 7, 0);

layoutHelper.setHGap(3);

adapters.add(new SubAdapter(this, layoutHelper, 8));

Paste_Image.png

分析：

GridLayoutHelper(4)类似于GridView,设置列数量位4

setWeights(new float[]{20f, 26.665f})设置第一列和第二列的权重分别是20,26.665，其他列均分，列总权重是100，计算一下，第三列和第四列的权重是26.6675

setHGap(3)类似于GridView,设置水平间距是3像素

new SubAdapter(this, layoutHelper, 8) 设置方格总数量是8

添加一个Staggered布局

final StaggeredGridLayoutHelper helper = new StaggeredGridLayoutHelper(2, 10);

helper.setMargin(20, 10, 10, 10);

helper.setPadding(10, 10, 20, 10);

helper.setBgColor(0xFF86345A);

adapters.add(new SubAdapter(this, helper, 27) {

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 200);

if (position % 2 == 0) {

layoutParams.mAspectRatio = 1.0f;

} else {

layoutParams.height = 340 + position % 7 * 20;

}

holder.itemView.setLayoutParams(layoutParams);

}

});

Paste_Image.png

分析：

StaggeredGridLayoutHelper(2, 10)设置列数量为2，间距为10像素

new SubAdapter(this, helper, 27) 设置子view总数量为27

下面这段代码是设置每个子view的宽高尺寸，所以才形成了Staggered

LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 200);

if (position % 2 == 0) {

layoutParams.mAspectRatio = 1.0f;

} else {

layoutParams.height = 340 + position % 7 * 20;

}

vLayout提供的默认布局

Paste_Image.png

一般情况下，这些都是够用的，如果出现不够的情况，可以参考上面的布局来实现自己的。

源码分析其实现的原理

因为篇幅有限，这里就直接定位到其实现的最底层代码，定位到VirtualLayoutManager的public void setLayoutHelpers(@Nullable List helpers)方法，通过这个方法我们注意到上面我们所调用的helper,都已经转换成配置信息了，最后一段代码requestLayout();重新刷新布局，接下来会调用public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state)，然后就会调用public void layoutChild(View child, int left, int top, int right, int bottom)对每个子view进行布局

下面是我画的简单的调用示意图

vlayout.jpg

有兴趣交流和讨论的，请在下面发评论。

有兴趣一起学习和讨论kotlin，请加Q群：248445350

[vlayout]:https://github.com/alibaba/vlayout