Vlayout使用详细介绍-阿里云开发者社区

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绑定

//创建VirtualLayoutManager对象
VirtualLayoutManager layoutManager = new VirtualLayoutManager(activity);
recyclerView.setLayoutManager(layoutManager);

3.2 设置回收复用池

设置回收复用池大小

//设置回收复用池大小，（如果一屏内相同类型的 View 个数比较多，需要设置一个合适的大小，防止来回滚动时重新创建 View）
RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
recyclerView.setRecycledViewPool(viewPool);
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，这样就可以实现组合使用不同的布局
具体做法：

//设置适配器
DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager, true);
recyclerView.setAdapter(delegateAdapter

/**
 * ================================================
 * 作    者：杨充
 * 版    本：1.0
 * 创建日期：2017/9/18
 * 描    述：Vlayout框架基类适配器
 * 修订历史：
 * ================================================
 */
public class BaseDelegateAdapter extends DelegateAdapter.Adapter<BaseViewHolder> {

    private LayoutHelper mLayoutHelper;
    private int mCount = -1;
    private int mLayoutId = -1;
    private Context mContext;
    private int mViewTypeItem = -1;

    protected BaseDelegateAdapter(Context context, LayoutHelper layoutHelper, int layoutId, int count, int viewTypeItem) {
        this.mContext = context;
        this.mCount = count;
        this.mLayoutHelper = layoutHelper;
        this.mLayoutId = layoutId;
        this.mViewTypeItem = viewTypeItem;
    }

    @Override
    public LayoutHelper onCreateLayoutHelper() {
        return mLayoutHelper;
    }

    @Override
    public BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == mViewTypeItem) {
            return new BaseViewHolder(LayoutInflater.from(mContext).inflate(mLayoutId, parent, false));
        }
        return null;
    }

    @Override
    public void onBindViewHolder(BaseViewHolder holder, int position) {

    }

    /**
     * 必须重写不然会出现滑动不流畅的情况
     */
    @Override
    public int getItemViewType(int position) {
        return mViewTypeItem;
    }

    //条目数量
    @Override
    public int getItemCount() {
        return mCount;
    }
}

3.4 添加模块的LayoutHelper

这里代码以LinearLayoutHelper为例子。详细可以参考我的案例

BaseDelegateAdapter titleAdapter = new BaseDelegateAdapter(activity, new LinearLayoutHelper(),
    R.layout.view_vlayout_title, 1, Constant.viewType.typeTitle) {
    @Override
    public void onBindViewHolder(BaseViewHolder holder, int position) {
        super.onBindViewHolder(holder, position);
        holder.setText(R.id.tv_title, title);
    }
};

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

相关代码如下所示：

private void initRecyclerView() {
    DelegateAdapter delegateAdapter = presenter.initRecyclerView(recyclerView);
    //把轮播器添加到集合
    BaseDelegateAdapter bannerAdapter = presenter.initBannerAdapter();
    mAdapters.add(bannerAdapter);

    //初始化九宫格
    BaseDelegateAdapter menuAdapter = presenter.initGvMenu();
    mAdapters.add(menuAdapter);

    //初始化
    BaseDelegateAdapter marqueeAdapter = presenter.initMarqueeView();
    mAdapters.add(marqueeAdapter);

    //初始化标题
    BaseDelegateAdapter titleAdapter = presenter.initTitle("猜你喜欢");
    mAdapters.add(titleAdapter);
    //初始化list1
    BaseDelegateAdapter girdAdapter = presenter.initList1();
    mAdapters.add(girdAdapter);


    //初始化标题
    titleAdapter = presenter.initTitle("热门新闻");
    mAdapters.add(titleAdapter);
    //初始化list2
    BaseDelegateAdapter linearAdapter = presenter.initList2();
    mAdapters.add(linearAdapter);

    //初始化标题
    titleAdapter = presenter.initTitle("新闻导航");
    mAdapters.add(titleAdapter);
    //初始化list3
    BaseDelegateAdapter girdAdapter3 = presenter.initList3();
    mAdapters.add(girdAdapter3);

    //初始化标题
    titleAdapter = presenter.initTitle("为您精选");
    mAdapters.add(titleAdapter);
    //初始化list3
    BaseDelegateAdapter plusAdapter = presenter.initList4();
    mAdapters.add(plusAdapter);

    //初始化折叠式指示器控件
    //initSticky();
    //mAdapters.add(stickyAdapter);

    //初始化list控件
    titleAdapter = presenter.initTitle("优质新闻");
    mAdapters.add(titleAdapter);
    linearAdapter = presenter.initList5();
    mAdapters.add(linearAdapter);

    //设置适配器
    delegateAdapter.setAdapters(mAdapters);
}

4.相关代码说明

4.1 VirtualLayoutAdapter

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

4.2 VirtualLayoutManager

* 定义：布局管理器。继承自系统的 LinearLayoutManager
* 作用：

    * 在 RecyclerView 加载组件或者滑动时调用 VirtualLayoutManager 的 layoutChunk()，返回当前还有哪些空白区域可摆放组件
    * 管理 LayoutHelper 列表
* 额外：实现了 VirtualLayoutAdapter 的 getLayoutHelper() & setLayoutHelpers()

4.3 LayoutHelper

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

4.4 LayoutHelperFinder

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

4.5 MarginLayoutHelper

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

4.6 BaseLayoutHelper

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

4.7 子LayoutHelper

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

5.相关属性介绍

5.1 LayoutHelper方法说明

* 5.1.1 margin, padding
    * Margin, padding就是外边距、内边距
    * 它不是整个RecyclerView页面的margin和padding，它是每一块LayoutHelper所负责的区域的margin和padding。
    * 一个页面里可以有多个LayoutHelper，意味着不同LayoutHelper可以设置不同的margin和padding。
    * LayoutHelper的margin和padding与页面RecyclerView的margin和padding可以共存。
    * 目前主要针对非fix类型的LayoutHelper实现了margin和padding，fix类型LayoutHelper内部没有相对位置关系，不处理边距。

* 5.1.2 dividerHeight
    * LinearLayoutHelper的属性，LinearLayoutHelper是像ListView一样的线性布局，dividerHeight就是每个组件之间的间距。

* 5.1.3 aspectRatio
    * 为了保证布局过程中视图的高度一致，我们设计了aspectRatio属性，它是宽与高的比例，LayoutHelper里有aspectRatio属性，通过vlayout添加的视图的LayoutParams也有aspectRatio属性，后者的优先级比前者高，但含义不一样。
        * LayoutHelper定义的aspectRatio，指的是一行视图整体的宽度与高度之比，当然整体的宽度是减去了RecyclerView和对应的LayoutHelper的margin, padding。
        * 视图的LayoutParams定义的aspectRatio，指的是在LayoutHelper计算出视图宽度之后，用来确定视图高度时使用的，它会覆盖通过LayoutHelper的aspectRatio计算出来的视图高度，因此具备更高优先级。

* 5.1.4 bgColor, bgImg
    * 背景颜色或者背景图，这其实不是布局属性，但是由于在vlayout对视图进行了直接布局，不同区域的视图的父节点都是RecyclerView，如果想要针对某一块区域单独绘制背景，就很难做到了。vlayout框架对此做了特殊处理，对于非fix、非float类型的LayoutHelper，支持配置背景色或背景图。同样目前主要针对非fix类型的LayoutHelper实现这个特性。

* 5.1.5 weights
    * ColumnLayoutHelper, GridLayoutHelper的属性，它们都是提供网格状的布局能力，建议使用GridLayoutHelper，它的能力更加强大，参考下文介绍。默认情况下，每个网格中每一列的宽度是一样的，通过weights属性，可以指定让每一列的宽度成比例分配，就像LinearLayout的weight属性一样。 weights属性是一个float数组，每一项代表某一列占父容器宽度的百分比，总和建议是100，否则布局会超出容器宽度；如果布局中有4列，那么weights的长度也应该是4；长度大于4，多出的部分不参与宽度计算；如果小于4，不足的部分默认平分剩余的空间。
    * 比如，setweights(0.6 , 0.2 , 0.2);那么分配比例是3：1：1
    
* 5.1.6 vGap, hGap
    * GridLayoutHelper与StaggeredGridLayoutHelper都有这两个属性，分别控制视图之间的垂直间距和水平间距。
    
* 5.1.7 spanCount, spanSizeLookup
    * GridLayoutHelper的属性，参考于系统的GridLayoutManager，spanCount表示网格的列数，默认情况下每一个视图都占用一个网格区域，但通过提供自定义的spanSizeLookUp，可以指定某个位置的视图占用多个网格区域
    
    
* 5.1.8 autoExpand
    * GridLayoutHelper的属性，当一行里视图的个数少于spanCount值的时候，如果autoExpand为true，视图的总宽度会填满可用区域；否则会在屏幕上留空白区域。
    
* 5.1.9 lane
    * StaggeredGridLayoutHelper中有这个属性，与GridLayoutHelper里的spanCount类似，控制瀑布流的列数。

5.2 fix类型的LayoutHelper方法说明

* 5.2.1 fixAreaAdjuster
    * fix类型的LayoutHelper，在可能需要设置一个相对父容器四个边的偏移量，比如整个页面里有一个固定的标题栏添加在vlayout容器上，vlayout内部的fix类型视图不希望与外部的标题有所重叠，那么就可以设置一个fixAreaAdjuster来做偏移。

* 5.2.2 alignType, x, y
    * FixLayoutHelper, ScrollFixLayoutHelper, FloatLayoutHelper的属性，表示吸边时的基准位置，有四个取值，分别是TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT。x和y是相对这四个位置的偏移量，最终的偏移量还要受上述的fixAreaAdjuster影响。
        * TOP_LEFT：基准位置是左上角，x是视图左边相对父容器的左边距偏移量，y是视图顶边相对父容器的上边距偏移量；
        * TOP_RIGHT：基准位置是右上角，x是视图右边相对父容器的右边距偏移量，y是视图顶边相对父容器的上边距偏移量；
        * BOTTOM_LEFT：基准位置是左下角，x是视图左边相对父容器的左边距偏移量，y是视图底边相对父容器的下边距偏移量；
        * BOTTOM_RIGHT：基准位置是右下角，x是视图右边相对父容器的右边距偏移量，y是视图底边相对父容器的下边距偏移量；

* 5.2.3 showType
    * ScrollFixLayoutHelper的属性，取值有SHOW_ALWAYS, SHOW_ON_ENTER, SHOW_ON_LEAVE。
        * SHOW_ALWAYS：与FixLayoutHelper的行为一致，固定在某个位置；
        * SHOW_ON_ENTER：默认不显示视图，当页面滚动到这个视图的位置的时候，才显示；
        * SHOW_ON_LEAVE：默认不显示视图，当页面滚出这个视图的位置的时候显示；

* 5.2.4 stickyStart, offset
    * StickyLayoutHelper的属性，当视图的位置在屏幕范围内时，视图会随页面滚动而滚动；当视图的位置滑出屏幕时，StickyLayoutHelper会将视图固定在顶部（stickyStart = true）或者底部（stickyStart = false），固定的位置支持设置偏移量offset。

Vlayout使用详细介绍

目录介绍

0.本人写的综合案例

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

1.Vlayout简单介绍

2.主要功能介绍

2.1 主要功能思维导图

2.2 主要功能说明

3.使用方法与案例

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

3.1 初始化

3.2 设置回收复用池

3.3 设置RecycleView适配器

3.4 添加模块的LayoutHelper

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

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.2 fix类型的LayoutHelper方法说明

6.存在的bug

7.源码分析

8.关于其他更多

8.1 关于本篇博客更新日志

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vlayout使用详细介绍

目录介绍

0.本人写的综合案例

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

1.Vlayout简单介绍

2.主要功能介绍

2.1 主要功能思维导图

2.2 主要功能说明

3.使用方法与案例

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

3.1 初始化

3.2 设置回收复用池

3.3 设置RecycleView适配器

3.4 添加模块的LayoutHelper

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

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.2 fix类型的LayoutHelper方法说明

6.存在的bug

7.源码分析

8.关于其他更多

8.1 关于本篇博客更新日志

热门文章

最新文章

相关电子书