阿里Ui框架Vlayout使用详细介绍

转载于：www.jcodecraeer.com/a/anzhuokaifa/2018/0108/9088.html

Vlayout使用详细介绍

目录介绍

• 1.Vlayout简单介绍
• 2.主要功能介绍
• 2.1 主要功能的思维导图
• 2.2 主要功能说明
• .使用方法与案例
• 3.1 初始化
• 3.2 设置回收复用池
• 3.3 设置RecycleView适配器
• 3.4 添加模块的adapter
• 3.5 将所有adapter绑定到RecycleView
• 4.相关代码说明
• 4.1 VirtualLayoutAdapter
• 4.2 VirtualLayoutManager
• 4.3 LayoutHelper
• 4.4 LayoutHelperFinder
• 4.5 MarginLayoutHelper
• 4.6 BaseLayoutHelper
• 4.7 子LayoutHelper
• 5.相关属性介绍
• 5.1 LayoutHelper方法说明
• 5.1.1 margin, padding
• 5.1.2 dividerHeight
• 5.1.3 aspectRatio
• 5.1.4 bgColor, bgImg
• 5.1.5 weights
• 5.1.6 vGap, hGap
• 5.1.7 spanCount, spanSizeLookup
• 5.1.8 autoExpand
• 5.1.9 lane
• 5.2 fix类型的LayoutHelper方法说明
• 5.2.1 fixAreaAdjuster
• 5.2.2 alignType, x, y
• 5.2.3 showType
• 5.2.4 stickyStart, offset
• 6.存在的bug
• 7.源码分析
• 8.关于其他更多
• 8.1 关于版本更新说明
• 8.2 关于我的博客

0.本人写的综合案例

• 案例
• 说明及截图
• 模块：新闻，音乐，视频，图片，唐诗宋词，快递，天气，记事本，阅读器等等
• 接口：七牛，阿里云，天行，干货集中营，极速数据，追书神器等等
• 持续更新目录说明

• 关于目前使用Vlayout框架的案例有

• https://github.com/yangchong211/YCVideoPlayer
• https://github.com/yangchong211/LifeHelper
• 关于截图如下所示，如果觉得好，请star。
• 

1.Vlayout简单介绍

• 阿里的开源框架，地址是：https://github.com/alibaba/vlayout/
• VirtualLayout是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用的问题。

2.主要功能介绍

2.1 主要功能思维导图

2.2 主要功能说明

• 默认通用布局实现，解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等
• 1：LinearLayoutHelper: 线性布局
• 2：GridLayoutHelper: Grid布局， 支持横向的colspan
• 3：FixLayoutHelper: 固定布局，始终在屏幕固定位置显示
• 4：ScrollFixLayoutHelper: 固定布局，但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等
• 5：FloatLayoutHelper: 浮动布局，可以固定显示在屏幕上，但用户可以拖拽其位置
• 6：ColumnLayoutHelper: 栏格布局，都布局在一排，可以配置不同列之间的宽度比值
• 7：SingleLayoutHelper: 通栏布局，只会显示一个组件View
• 8：OnePlusNLayoutHelper: 一拖N布局，可以配置1-5个子元素
• 9：StickyLayoutHelper: stikcy布局， 可以配置吸顶或者吸底
• 10：StaggeredGridLayoutHelper: 瀑布流布局，可配置间隔高度/宽度

3.使用方法与案例

3.0 具体可以参考我的实际案例：https://github.com/yangchong211/LifeHelper

3.1 初始化

• 创建VirtualLayoutManager对象，与RecycleView绑定
  1. //创建VirtualLayoutManager对象
  2. VirtualLayoutManager layoutManager = new VirtualLayoutManager(activity);
  3. recyclerView.setLayoutManager(layoutManager);

  3.2 设置回收复用池

• 设置回收复用池大小
  1. //设置回收复用池大小，（如果一屏内相同类型的 View 个数比较多，需要设置一个合适的大小，防止来回滚动时重新创建 View）
  2. RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
  3. recyclerView.setRecycledViewPool(viewPool);
  4. viewPool.setMaxRecycledViews(0, 20);

  3.3 设置RecycleView适配器

• 设置 V - Layout的Adapter有两种方式:
  • 方式1：继承 自 DelegateAdapter
  • 方式2：继承 自 VirtualLayoutAdapter
• 目前只讨论方式1：继承 自 DelegateAdapter
  • 定义：DelegateAdapter是V - Layout专门为管理 LayoutHelper定制的 Adapter
  • 继承自VirtualLayoutAdapter
  • 作用：通过管理不同布局的Adapter，继而管理不同的 LayoutHelper，从而实现使用不同组合布局
  • 特别注意：虽不可直接绑定LayoutHelper，但是它内部有一个继承自RecyclerView.Adapter的内部类Adapter可以绑定LayoutHelper；
  • 即通过一个List把绑定好的Adapter打包起来，再放去DelegateAdapter，这样就可以实现组合使用不同的布局

• 具体做法：

  1. //设置适配器
  2. DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager, true);
  3. recyclerView.setAdapter(delegateAdapter
  4. /**
  5. * ================================================
  6. * 作 者：杨充
  7. * 版 本：1.0
  8. * 创建日期：2017/9/18
  9. * 描 述：Vlayout框架基类适配器
  10. * 修订历史：
  11. * ================================================
  12. */
  13. public class BaseDelegateAdapter extends DelegateAdapter.Adapter<BaseViewHolder> {
  14. private LayoutHelper mLayoutHelper;
  15. private int mCount = -1;
  16. private int mLayoutId = -1;
  17. private Context mContext;
  18. private int mViewTypeItem = -1;
  19. protected BaseDelegateAdapter(Context context, LayoutHelper layoutHelper, int layoutId, int count, int viewTypeItem) {
  20. this.mContext = context;
  21. this.mCount = count;
  22. this.mLayoutHelper = layoutHelper;
  23. this.mLayoutId = layoutId;
  24. this.mViewTypeItem = viewTypeItem;
  25. }
  27. @Override
  28. public LayoutHelper onCreateLayoutHelper() {
  29. return mLayoutHelper;
  30. }
  32. @Override
  33. public BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  34. if (viewType == mViewTypeItem) {
  35. return new BaseViewHolder(LayoutInflater.from(mContext).inflate(mLayoutId, parent, false));
  36. }
  37. return null;
  38. }
  40. @Override
  41. public void onBindViewHolder(BaseViewHolder holder, int position) {
  43. }
  45. /**
  46. * 必须重写不然会出现滑动不流畅的情况
  47. */
  48. @Override
  49. public int getItemViewType(int position) {
  50. return mViewTypeItem;
  51. }
  53. //条目数量
  54. @Override
  55. public int getItemCount() {
  56. return mCount;
  57. }
  58. }

3.4 添加模块的LayoutHelper

• 这里代码以LinearLayoutHelper为例子。详细可以参考我的案例
  1. BaseDelegateAdapter titleAdapter = new BaseDelegateAdapter(activity, new LinearLayoutHelper(),
  2. R.layout.view_vlayout_title, 1, Constant.viewType.typeTitle) {
  3. @Override
  4. public void onBindViewHolder(BaseViewHolder holder, int position) {
  5. super.onBindViewHolder(holder, position);
  6. holder.setText(R.id.tv_title, title);
  7. }
  8. };

  3.5 将生成的LayoutHelper 交给Adapter，并绑定到RecyclerView 对象

• 相关代码如下所示：

1. private void initRecyclerView() {
2. DelegateAdapter delegateAdapter = presenter.initRecyclerView(recyclerView);
3. //把轮播器添加到集合
4. BaseDelegateAdapter bannerAdapter = presenter.initBannerAdapter();
5. mAdapters.add(bannerAdapter);
7. //初始化九宫格
8. BaseDelegateAdapter menuAdapter = presenter.initGvMenu();
9. mAdapters.add(menuAdapter);
11. //初始化
12. BaseDelegateAdapter marqueeAdapter = presenter.initMarqueeView();
13. mAdapters.add(marqueeAdapter);
15. //初始化标题
16. BaseDelegateAdapter titleAdapter = presenter.initTitle("猜你喜欢");
17. mAdapters.add(titleAdapter);
18. //初始化list1
19. BaseDelegateAdapter girdAdapter = presenter.initList1();
20. mAdapters.add(girdAdapter);
22. //初始化标题
23. titleAdapter = presenter.initTitle("热门新闻");
24. mAdapters.add(titleAdapter);
25. //初始化list2
26. BaseDelegateAdapter linearAdapter = presenter.initList2();
27. mAdapters.add(linearAdapter);
29. //初始化标题
30. titleAdapter = presenter.initTitle("新闻导航");
31. mAdapters.add(titleAdapter);
32. //初始化list3
33. BaseDelegateAdapter girdAdapter3 = presenter.initList3();
34. mAdapters.add(girdAdapter3);
36. //初始化标题
37. titleAdapter = presenter.initTitle("为您精选");
38. mAdapters.add(titleAdapter);
39. //初始化list3
40. BaseDelegateAdapter plusAdapter = presenter.initList4();
41. mAdapters.add(plusAdapter);
43. //初始化折叠式指示器控件
44. //initSticky();
45. //mAdapters.add(stickyAdapter);
47. //初始化list控件
48. titleAdapter = presenter.initTitle("优质新闻");
49. mAdapters.add(titleAdapter);
50. linearAdapter = presenter.initList5();
51. mAdapters.add(linearAdapter);
53. //设置适配器
54. delegateAdapter.setAdapters(mAdapters);
55. }

4.相关代码说明

4.1 VirtualLayoutAdapter

1. * 定义：数据适配器。继承自系统的Adaper
2. * 作用：创建组件 & 绑定数据到组件
3. * 额外：定义了两个接口：
4. * getLayoutHelper()：用于返回某个位置组件对应的一个 LayoutHelper
5. * setLayoutHelpers()：调用此方法设置整个页面所需要的一系列 LayoutHelper
6. * 这两方法的具体实现委托给 VirtualLayoutManager 完成

4.2 VirtualLayoutManager

1. * 定义：布局管理器。继承自系统的 LinearLayoutManager
2. * 作用：
4. * 在 RecyclerView 加载组件或者滑动时调用 VirtualLayoutManager 的 layoutChunk()，返回当前还有哪些空白区域可摆放组件
5. * 管理 LayoutHelper 列表
6. * 额外：实现了 VirtualLayoutAdapter 的 getLayoutHelper() & setLayoutHelpers()

4.3 LayoutHelper

1. * 定义：LayoutHelper 寻找器
2. * 作用：根据页面状态 寻找对应的 LayoutHelper 并返回给 VirtualLayoutManager
3. * VirtualLayoutManager 会持有一个 LayoutHelperFinder
4. * 当 layoutChunck() 被调用时会传入一个位置参数，告诉 VirtualLayoutManager 当前要布局第几个组件
5. * VirtualLayoutManager 通知持有的 LayoutHelperFinder 找到传入参数位置对应的 LayoutHelper（每个 LayoutHelper 都会绑定它负责的布局区域的起始位置和结束位置）

4.4 LayoutHelperFinder

1. * 定义：布局协助器
2. * 作用：负责具体的布局逻辑

4.5 MarginLayoutHelper

1. * 定义：继承自 LayoutHelper
2. * 作用：扩展 LayoutHelper，提供了布局常用的 内边距padding、外边距margin 的计算功能

4.6 BaseLayoutHelper

1. * 定义：MarginLayoutHelper 的第一层具体实现
2. * 作用：填充 当前LayoutHelper 在屏幕范围内的具体区域 背景色、背景图等逻辑

4.7 子LayoutHelper

1. * 定义：MarginLayoutHelper 的第二层具体实现
2. * 作用：负责具体的布局逻辑
3. * 每种 子LayoutHelper 负责一种布局逻辑
4. * 重点实现了 beforeLayout()、doLayout()、afterLayout()
5. * 特别是 doLayout()：会获取一组件，并对组件进行尺寸计算、界面布局
6. * V - Layout 默认实现了10种默认布局：（对应同名的LayoutHelper）
7. * 特别注意：
8. * 每一种 LayoutHelper 负责布局一批组件范围内的组件，不同组件范围内的组件之间，如果类型相同，可以在滑动过程中回收复用。因此回收粒度比较细，且可以跨布局类型复用.
9. * 支持扩展外部：即注册新的 LayoutHelper，实现特殊的布局方式。下面会详细说明

5.相关属性介绍

5.1 LayoutHelper方法说明

1. * 5.1.1 margin, padding
2. * Margin, padding就是外边距、内边距
3. * 它不是整个RecyclerView页面的margin和padding，它是每一块LayoutHelper所负责的区域的margin和padding。
4. * 一个页面里可以有多个LayoutHelper，意味着不同LayoutHelper可以设置不同的margin和padding。
5. * LayoutHelper的margin和padding与页面RecyclerView的margin和padding可以共存。
6. * 目前主要针对非fix类型的LayoutHelper实现了margin和padding，fix类型LayoutHelper内部没有相对位置关系，不处理边距。
8. * 5.1.2 dividerHeight
9. * LinearLayoutHelper的属性，LinearLayoutHelper是像ListView一样的线性布局，dividerHeight就是每个组件之间的间距。
11. * 5.1.3 aspectRatio
12. * 为了保证布局过程中视图的高度一致，我们设计了aspectRatio属性，它是宽与高的比例，LayoutHelper里有aspectRatio属性，通过vlayout添加的视图的LayoutParams也有aspectRatio属性，后者的优先级比前者高，但含义不一样。
13. * LayoutHelper定义的aspectRatio，指的是一行视图整体的宽度与高度之比，当然整体的宽度是减去了RecyclerView和对应的LayoutHelper的margin, padding。
14. * 视图的LayoutParams定义的aspectRatio，指的是在LayoutHelper计算出视图宽度之后，用来确定视图高度时使用的，它会覆盖通过LayoutHelper的aspectRatio计算出来的视图高度，因此具备更高优先级。
16. * 5.1.4 bgColor, bgImg
17. * 背景颜色或者背景图，这其实不是布局属性，但是由于在vlayout对视图进行了直接布局，不同区域的视图的父节点都是RecyclerView，如果想要针对某一块区域单独绘制背景，就很难做到了。vlayout框架对此做了特殊处理，对于非fix、非float类型的LayoutHelper，支持配置背景色或背景图。同样目前主要针对非fix类型的LayoutHelper实现这个特性。
19. * 5.1.5 weights
20. * ColumnLayoutHelper, GridLayoutHelper的属性，它们都是提供网格状的布局能力，建议使用GridLayoutHelper，它的能力更加强大，参考下文介绍。默认情况下，每个网格中每一列的宽度是一样的，通过weights属性，可以指定让每一列的宽度成比例分配，就像LinearLayout的weight属性一样。 weights属性是一个float数组，每一项代表某一列占父容器宽度的百分比，总和建议是100，否则布局会超出容器宽度；如果布局中有4列，那么weights的长度也应该是4；长度大于4，多出的部分不参与宽度计算；如果小于4，不足的部分默认平分剩余的空间。
21. * 比如，setweights(0.6 , 0.2 , 0.2);那么分配比例是3：1：1
23. * 5.1.6 vGap, hGap
24. * GridLayoutHelper与StaggeredGridLayoutHelper都有这两个属性，分别控制视图之间的垂直间距和水平间距。
26. * 5.1.7 spanCount, spanSizeLookup
27. * GridLayoutHelper的属性，参考于系统的GridLayoutManager，spanCount表示网格的列数，默认情况下每一个视图都占用一个网格区域，但通过提供自定义的spanSizeLookUp，可以指定某个位置的视图占用多个网格区域
29. * 5.1.8 autoExpand
30. * GridLayoutHelper的属性，当一行里视图的个数少于spanCount值的时候，如果autoExpand为true，视图的总宽度会填满可用区域；否则会在屏幕上留空白区域。
32. * 5.1.9 lane
33. * StaggeredGridLayoutHelper中有这个属性，与GridLayoutHelper里的spanCount类似，控制瀑布流的列数。

5.2 fix类型的LayoutHelper方法说明

1. * 5.2.1 fixAreaAdjuster
2. * fix类型的LayoutHelper，在可能需要设置一个相对父容器四个边的偏移量，比如整个页面里有一个固定的标题栏添加在vlayout容器上，vlayout内部的fix类型视图不希望与外部的标题有所重叠，那么就可以设置一个fixAreaAdjuster来做偏移。
4. * 5.2.2 alignType, x, y
5. * FixLayoutHelper, ScrollFixLayoutHelper, FloatLayoutHelper的属性，表示吸边时的基准位置，有四个取值，分别是TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT。x和y是相对这四个位置的偏移量，最终的偏移量还要受上述的fixAreaAdjuster影响。
6. * TOP_LEFT：基准位置是左上角，x是视图左边相对父容器的左边距偏移量，y是视图顶边相对父容器的上边距偏移量；
7. * TOP_RIGHT：基准位置是右上角，x是视图右边相对父容器的右边距偏移量，y是视图顶边相对父容器的上边距偏移量；
8. * BOTTOM_LEFT：基准位置是左下角，x是视图左边相对父容器的左边距偏移量，y是视图底边相对父容器的下边距偏移量；
9. * BOTTOM_RIGHT：基准位置是右下角，x是视图右边相对父容器的右边距偏移量，y是视图底边相对父容器的下边距偏移量；
11. * 5.2.3 showType
12. * ScrollFixLayoutHelper的属性，取值有SHOW_ALWAYS, SHOW_ON_ENTER, SHOW_ON_LEAVE。
13. * SHOW_ALWAYS：与FixLayoutHelper的行为一致，固定在某个位置；
14. * SHOW_ON_ENTER：默认不显示视图，当页面滚动到这个视图的位置的时候，才显示；
15. * SHOW_ON_LEAVE：默认不显示视图，当页面滚出这个视图的位置的时候显示；
17. * 5.2.4 stickyStart, offset
18. * StickyLayoutHelper的属性，当视图的位置在屏幕范围内时，视图会随页面滚动而滚动；当视图的位置滑出屏幕时，StickyLayoutHelper会将视图固定在顶部（stickyStart = true）或者底部（stickyStart = false），固定的位置支持设置偏移量offset。

6.存在的bug

7.源码分析

8.关于其他更多