前不久,阿里新开源了 2 个东西,Atlas 和 vlayout。今天我来介绍下 vlayout 的使用。在介绍前,先抱怨两句,阿里放开源出来,感觉就是让我们这群人给他们找 bug~~ 我曾遇到一个奇怪的问题,然后一直以为自己写的有问题,结果去 down 了官方 demo 跑了一下,结果官方的 demo 居然并没有做这个效果~ 不解!! 好了,话不多说,我会通过官方的介绍以及自己的写的 demo 一一介绍。先放上官方的 github 地址:https://github.com/alibaba/vlayout
vlayout 全称 VirtualLayout,它是一个针对 RecyclerView 的 LayoutManager 扩展, 主要提供一整套布局方案和布局间的组件复用的问题。它通过定制化的 LayoutManager,接管整个 RecyclerView 的布局逻辑;LayoutManager 管理了一系列 LayoutHelper,LayoutHelper 负责具体布局逻辑实现的地方;每一个 LayoutHelper 负责页面某一个范围内的组件布局;不同的 LayoutHelper 可以做不同的布局逻辑,因此可以在一个 RecyclerView 页面里提供异构的布局结构,这就能比系统自带的 LinearLayoutManager、GridLayoutManager 等提供更加丰富的能力。同时支持扩展 LayoutHelper 来提供更多的布局能力。
版本请参考 mvn repository 上的最新版本(目前最新版本是 1.0.3),最新的 aar 都会发布到 jcenter 和 MavenCentral 上,确保配置了这两个仓库源,然后引入 aar 依赖:
- compile('com.alibaba.android:vlayout:1.0.3@aar') {transitive=true}
或者 maven
- <dependency>
- <groupId>
- com.alibaba.android
- </groupId>
- <artifactId>
- vlayout
- </artifactId>
- <version>
- 1.0.3
- </version>
- <type>
- aar
- </type>
- </dependency>
Margin, padding 就是外边距、内边距,概念与 Android 系统的 margin, padding 一样,但也有不同的地方:
对于 LayoutHelper,调用
- public void setPadding(intleftPadding,inttopPadding,intrightPadding,intbottomPadding)public void setMargin(intleftMargin,inttopMargin,intrightMargin,intbottomMargin)
背景颜色或者背景图,这其实不是布局属性,但是由于在 vlayout 对视图进行了直接布局,不同区域的视图的父节点都是 RecyclerView,如果想要针对某一块区域单独绘制背景,就很难做到了。vlayout 框架对此做了特殊处理,对于非 fix、非 float 类型的 LayoutHelper,支持配置背景色或背景图。同样目前主要针对非 fix 类型的 LayoutHelper 实现这个特性。
使用背景色
- public void setBgColor(intbgColor)
使用背景图 首先为 LayoutManager 提供一个 ImageView 简单工厂
- this.mLayoutManager.setLayoutViewFactory(newLayoutViewFactory() {@Override
- publicopiniongenerateLayoutView(@NonNull Context context) {return newXXImageView(context);
- }
- });
再为 LayoutHelper 提设置图片加载的 Listener
- baseHelper.setLayoutViewBindListener(newBindListener(imgUrl));
- baseHelper.setLayoutViewUnBindListener(newUnbindListener(imgUrl));private static class BindListener implements BaseLayoutHelper.LayoutViewBindListener{
- privateString imgUrl;public BindListener(String imgUrl) {this.imgUrl = imgUrl;
- }@Override
- public void onBind(View layoutView, BaseLayoutHelper baseLayoutHelper) {//loading image}
- }private static class UnbindListener implements BaseLayoutHelper.LayoutViewUnBindListener{
- privateString imgUrl;public UnbindListener(String imgUrl) {this. imgUrl = imgUrl;
- }@Override
- public void onUnbind(View layoutView, BaseLayoutHelper baseLayoutHelper) {//cancel loading image}
- }
为了保证布局过程中视图的高度一致,我们设计了 aspectRatio 属性,它是宽与高的比例,LayoutHelper 里有 aspectRatio 属性,通过 vlayout 添加的视图的 LayoutParams 也有 aspectRatio 属性,后者的优先级比前者高,但含义不一样。
对于 LayoutHelper,调用
- public void setAspectRatio(floataspectRatio)
对于 LayoutParams,调用
- ((VirutalLayoutManager.LayoutParams) layoutParams).mAspectRatio
LinearLayoutHelper 的属性,LinearLayoutHelper 是像 ListView 一样的线性布局,dividerHeight 就是每个组件之间的间距。
对于 LinearLayoutHelper,调用
- public void setDividerHeight(intdividerHeight)
ColumnLayoutHelper, GridLayoutHelper 的属性,它们都是提供网格状的布局能力,建议使用 GridLayoutHelper,它的能力更加强大,参考下文介绍。默认情况下,每个网格中每一列的宽度是一样的,通过 weights 属性,可以指定让每一列的宽度成比例分配,就像 LinearLayout 的 weight 属性一样。 weights 属性是一个 float 数组,每一项代表某一列占父容器宽度的百分比,总和建议是 100,否则布局会超出容器宽度;如果布局中有 4 列,那么 weights 的长度也应该是 4;长度大于 4,多出的部分不参与宽度计算;如果小于 4,不足的部分默认平分剩余的空间。
对于 ColumnLayoutHelper, GridLayoutHelper,调用
- public void setWeights(float[] weights)
GridLayoutHelper 与 StaggeredGridLayoutHelper 都有这两个属性,分别控制视图之间的垂直间距和水平间距。
对于 GridLayoutHelper, StaggeredGridLayoutHelper,调用
- public void setHGap(inthGap)public void setVGap(intvGap)
GridLayoutHelper 的属性,参考于系统的 GridLayoutManager,spanCount 表示网格的列数,默认情况下每一个视图都占用一个网格区域,但通过提供自定义的 spanSizeLookUp,可以指定某个位置的视图占用多个网格区域。
使用 spanCount 调用
- public void setSpanCount(intspanCount)
使用 spanSizeLookup
- public void setSpanSizeLookup(SpanSizeLookup spanSizeLookup)
GridLayoutHelper 的属性,当一行里视图的个数少于 spanCount 值的时候,如果 autoExpand 为 true,视图的总宽度会填满可用区域;否则会在屏幕上留空白区域。
接口:
- public void setAutoExpand(booleanisAutoExpand)
StaggeredGridLayoutHelper 中有这个属性,与 GridLayoutHelper 里的 spanCount 类似,控制瀑布流的列数。
接口:
- public void setLane(intlane)
fix 类型的 LayoutHelper,在可能需要设置一个相对父容器四个边的偏移量,比如整个页面里有一个固定的标题栏添加在 vlayout 容器上,vlayout 内部的 fix 类型视图不希望与外部的标题有所重叠,那么就可以设置一个 fixAreaAdjuster 来做偏移。
接口:
- public void setAdjuster(FixAreaAdjuster adjuster)
FixLayoutHelper, ScrollFixLayoutHelper, FloatLayoutHelper 的属性,表示吸边时的基准位置,有四个取值,分别是 TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT。x 和 y 是相对这四个位置的偏移量,最终的偏移量还要受上述的 fixAreaAdjuster 影响。
设置基准调用
- public void setAlignType(intalignType)
设置偏移量调用
- public void setX(intx)public void setY(inty)
ScrollFixLayoutHelper 的属性,取值有 SHOW_ALWAYS, SHOW_ON_ENTER, SHOW_ON_LEAVE。
接口:
- public void setShowType(intshowType)
StickyLayoutHelper 的属性,当视图的位置在屏幕范围内时,视图会随页面滚动而滚动;当视图的位置滑出屏幕时,StickyLayoutHelper 会将视图固定在顶部(stickyStart = true)或者底部(stickyStart = false),固定的位置支持设置偏移量 offset。
接口:
- public void setStickyStart(booleanstickyStart)public void setOffset(intoffset)
上面我们已经详细介绍的各种 LayoutHelper 以及它的各种属性,现在,我们通过 demo 来进行实例演示。
我们 activity 只要进行一些简单的配置就可以了:
- VirtualLayoutManager manager =newVirtualLayoutManager(this);
- recycler.setLayoutManager(manager);
- DelegateAdapter adapter =newDelegateAdapter(manager,true);
- adapter.addAdapter(newDelegateRecyclerAdapter(this,newLinearLayoutHelper()));
- recycler.setAdapter(adapter);
对于 adapter ,我们继承 DelegateAdapter 来实现,代码很简单,如下:
- publicLayoutHelperonCreateLayoutHelper() {returnhelper;
- }publicRecyclerView.ViewHolderonCreateViewHolder(ViewGroup parent,intviewType) {return newMyViewholder(inflater.inflate(R.layout.item, parent,false));
- }public void onBindViewHolder(RecyclerView.ViewHolder holder,intposition) {
- ((MyViewholder) holder).text.setText(position +1+"");
- }public int getItemCount() {return 60;
- }public class MyViewholder extends RecyclerView.ViewHolder{
- privateTextView text;public MyViewholder(View view) {super(view);
- text = (TextView) view.findViewById(R.id.text);
- }
- }
效果图:
我们只要把 LinearLayouthelper 改成 Gridlayouthelper 就可以了:
- VirtualLayoutManager manager =newVirtualLayoutManager(this);
- recycler.setLayoutManager(manager);
- DelegateAdapter adapter =newDelegateAdapter(manager,true);
- adapter.addAdapter(newDelegateRecyclerAdapter(this,newGridLayoutHelper(3)));
- recycler.setAdapter(adapter);
效果图:
还是直接修改 LayoutHelper 就可以了:
- VirtualLayoutManager manager =newVirtualLayoutManager(this);
- recycler.setLayoutManager(manager);
- DelegateAdapter adapter =newDelegateAdapter(manager,true);//StaggeredGridLayoutHelper(int num,int gap)
- //num为每行显示数目,gap为两个item的边距adapter.addAdapter(newStaggeredAdapter(this,newStaggeredGridLayoutHelper(3,20)));
- recycler.setAdapter(adapter);
为了做成瀑布流的效果,我们对每个 item 进行一个随机高度的设置:
- public void onBindViewHolder(RecyclerView.ViewHolderholder, int position) {
- ViewGroup.LayoutParamslayoutParams = ((MyViewholder) holder).text.getLayoutParams();layoutParams.height=260+ position %7*20;((MyViewholder) holder).text.setLayoutParams(layoutParams);((MyViewholder) holder).text.setText(position +1+"");}
效果图:
对于 fixlayout 类型的,我们需要先后添加一次 LinearLayoutHelper 和 FixLayoutHelper。
- VirtualLayoutManager manager =newVirtualLayoutManager(this);
- recycler.setLayoutManager(manager);
- DelegateAdapter adapter =newDelegateAdapter(manager,true);
- adapter.addAdapter(newDelegateRecyclerAdapter(this,newLinearLayoutHelper()));
- adapter.addAdapter(newScrollFixAdapter(this,newFixLayoutHelper(FixLayoutHelper.BOTTOM_LEFT,200,200), recycler));
- recycler.setAdapter(adapter);
效果图:
同上,代码是差不多的,不过官方所说的标签,置顶等功能。并不能实现。官方 demo 也并没有实现此功能。虽然我们可以通过点击图片来进行置顶。但是具体功能感觉和 fixlayout 无异。文末有 demo。博友们自己下载试试就知道了。
代码如下:
- VirtualLayoutManager manager =newVirtualLayoutManager(this);
- recycler.setLayoutManager(manager);
- DelegateAdapter adapter =newDelegateAdapter(manager,true);
- adapter.addAdapter(newDelegateRecyclerAdapter(this,newColumnLayoutHelper()));
- recycler.setAdapter(adapter);
效果图:
- VirtualLayoutManager manager =newVirtualLayoutManager(this);
- recycler.setLayoutManager(manager);
- DelegateAdapter adapter =newDelegateAdapter(manager,true);
- adapter.addAdapter(newDelegateRecyclerAdapter(this,newSingleLayoutHelper()));
- recycler.setAdapter(adapter);
效果图:
一拖 N 布局,听起来感觉高大上,不过我并不知道这玩意能用在什么地方…..
- VirtualLayoutManager manager =newVirtualLayoutManager(this);
- recycler.setLayoutManager(manager);
- DelegateAdapter adapter =newDelegateAdapter(manager,true);
- OnePlusNLayoutHelper helper =newOnePlusNLayoutHelper(3);
- adapter.addAdapter(newOnePlusNRecyclerAdapter(this,helper));
- recycler.setAdapter(adapter);
效果图:
- VirtualLayoutManager manager =newVirtualLayoutManager(this);
- recycler.setLayoutManager(manager);
- DelegateAdapter adapter =newDelegateAdapter(manager,true);
- adapter.addAdapter(newFloatAdapter(this,newFloatLayoutHelper()));
- adapter.addAdapter(newDelegateRecyclerAdapter(this,newLinearLayoutHelper()));
- recycler.setAdapter(adapter);
效果图:
这个吸顶和吸底效果还是比较强大,自我感觉可以深入研究的就这个和 FloatLayoutHelper 了。具体代码如下:
- VirtualLayoutManager manager =newVirtualLayoutManager(this);
- recycler.setLayoutManager(manager);
- DelegateAdapter adapter =newDelegateAdapter(manager,true);//在顶部时需先添加sticklayout,在底部时最后添加sticklayout
- StickyLayoutHelper helper =newStickyLayoutHelper(true);//adapter.addAdapter(newStickRecyclerAdapter(this, helper, recycler));//adapter.addAdapter(newDelegateRecyclerAdapter(this,newLinearLayoutHelper()));//顶部和实体合二为一
- adapter.addAdapter(newDelegateRecyclerAdapter(this, helper));
- adapter.addAdapter(newDelegateRecyclerAdapter(this,newLinearLayoutHelper()));//底部//StickyLayoutHelper helper =newStickyLayoutHelper(false);//adapter.addAdapter(newDelegateRecyclerAdapter(this,newLinearLayoutHelper()));//adapter.addAdapter(newStickRecyclerAdapter(this, helper));
- recycler.setAdapter(adapter);
效果图: 顶部: 实体和顶部合二为一:
对于这个开源,我的总结就是,每个开源都有它的强大之处,至于我们会不会发现就看我们如何去理解了。而且这个开源可以多个 LayoutHelper 进行结合,比之前那些 LinearLayoutmanager、 Gridlayoutmanager 之类的强大太多。我感觉有了这个。我之前那个 SWPullRecyclerLayout 可以在精炼,进行多方面布局的结合来使用。现在,我们已经学会如何使用它的。之后我想我们就应该试着去看它的源码来了解它是如何实现的。因为我看了下源码,这个开源 15 年就开始做的。我记得 recyclerview 也是 15 年 4 月才发布出来。可想而知,阿狸团队的强大。
demo 的源码我已上传到 csdn:点击下载 demo
来源: http://blog.csdn.net/sw950729/article/details/67634747