Vlayout使用详细介绍 1
2024-06-03 22:25:14
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 关于我的博客
好消息
- 博客笔记大汇总【16年3月到至今】，包括Java基础及深入知识点，Android技术博客，Python学习笔记等等，还包括平时开发中遇到的bug汇总，当然也在工作之余收集了大量的面试题，长期更新维护并且修正，持续完善……开源的文件是markdown格式的！同时也开源了生活博客，从12年起，积累共计47篇[近20万字]，转载请注明出处，谢谢！
- 链接地址：https://github.com/yangchong211/YCBlogs
- 如果觉得好，可以star一下，谢谢！当然也欢迎提出建议，万事起于忽微，量变引起质变！
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;}@Overridepublic LayoutHelper onCreateLayoutHelper() {return mLayoutHelper;}@Overridepublic BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {if (viewType == mViewTypeItem) {return new BaseViewHolder(LayoutInflater.from(mContext).inflate(mLayoutId, parent, false));}return null;}@Overridepublic void onBindViewHolder(BaseViewHolder holder, int position) {}/*** 必须重写不然会出现滑动不流畅的情况*/@Overridepublic int getItemViewType(int position) {return mViewTypeItem;}//条目数量@Overridepublic int getItemCount() {return mCount;}
}
3.4 添加模块的LayoutHelper
- 这里代码以LinearLayoutHelper为例子。详细可以参考我的案例
BaseDelegateAdapter titleAdapter = new BaseDelegateAdapter(activity, new LinearLayoutHelper(),R.layout.view_vlayout_title, 1, Constant.viewType.typeTitle) {@Overridepublic 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);//初始化list1BaseDelegateAdapter girdAdapter = presenter.initList1();mAdapters.add(girdAdapter);//初始化标题titleAdapter = presenter.initTitle("热门新闻");mAdapters.add(titleAdapter);//初始化list2BaseDelegateAdapter linearAdapter = presenter.initList2();mAdapters.add(linearAdapter);//初始化标题titleAdapter = presenter.initTitle("新闻导航");mAdapters.add(titleAdapter);//初始化list3BaseDelegateAdapter girdAdapter3 = presenter.initList3();mAdapters.add(girdAdapter3);//初始化标题titleAdapter = presenter.initTitle("为您精选");mAdapters.add(titleAdapter);//初始化list3BaseDelegateAdapter 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。
6.存在的bug
7.源码分析
8.关于其他更多
8.1 关于本篇博客更新日志
- v1.0.0 17年9月19日
- v1.0.1 17年12月11日
8.2 关于我的博客
- 我的个人站点：www.yczbj.org，www.ycbjie.cn
- github：https://github.com/yangchong211
- 知乎：https://www.zhihu.com/people/yang-chong-69-24/pins/posts
- 领英：https://www.linkedin.com/in/chong-yang-049216146/
- 简书：http://www.jianshu.com/u/b7b2c6ed9284
- csdn：http://my.csdn.net/m0_37700275
- 网易博客：http://yangchong211.blog.163.com/
- 新浪博客：http://blog.sina.com.cn/786041010yc
- 喜马拉雅听书：http://www.ximalaya.com/zhubo/71989305/
- 脉脉：yc930211
- 360图书馆：http://www.360doc.com/myfiles.aspx
- 开源中国：https://my.oschina.net/zbj1618/blog
- 泡在网上的日子：http://www.jcodecraeer.com/member/content_list.php?channelid=1
- 邮箱：yangchong211@163.com
- 阿里云博客：https://yq.aliyun.com/users/article?spm=5176.100- 239.headeruserinfo.3.dT4bcV
- 博客园：http://www.cnblogs.com/yc211/
- segmentfault头条：https://segmentfault.com/u/xiangjianyu/articles
Vlayout使用详细介绍 1相关推荐
- Vlayout使用详细介绍
Vlayout使用详细介绍 目录介绍 1.Vlayout简单介绍 2.主要功能介绍 2.1 主要功能的思维导图 2.2 主要功能说明 .使用方法与案例 3.1 初始化 3.2 设置回收复用池 3.3 ...
- HTML页面加载和解析流程详细介绍
浏览器加载和渲染html的顺序.如何加快HTML页面加载速度.HTML页面加载和解析流程等等,在本文将为大家详细介绍下,感兴趣的朋友不要错过 浏览器加载和渲染html的顺序 1. IE下载的顺序是从上 ...
- mysql为什么要压测_mysql集群压测的详细介绍
本篇文章给大家带来的内容是关于mysql集群压测的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. mysql压测 mysql自带就有一个叫mysqlslap的压力测试工具,通 ...
- php比较运算符案列,PHP实例：PHP比较运算符的详细介绍
<PHP实例:PHP比较运算符的详细介绍>要点: 本文介绍了PHP实例:PHP比较运算符的详细介绍,希望对您有用.如果有疑问,可以联系我们. 比拟运算符种类 PHP实战如同它们名称所暗示的 ...
- Tempdb数据库详细介绍
Tempdb数据库详细介绍 一.Tempdb简介 tempdb是SQLServer的系统数据库一直都是SQLServer的重要组成部分,用来存储临时对象.可以简单理解tempdb是SQLServer的 ...
- linux路由介绍,Linux的路由表详细介绍
Linux的路由表详细介绍 一 在Linux下执行route命令[root@localhost backup]# route -nKernel IP routing tableDestination ...
- pythonexcel介绍_Python 中pandas.read_excel详细介绍
Python 中pandas.read_excel详细介绍 #coding:utf-8 import pandas as pd import numpy as np filefullpath = r& ...
- 渡神纪帧数测试软件,渡神纪芬尼斯崛起配置要求高吗 渡神纪配置要求详细介绍_游侠网...
渡神纪芬尼斯崛起配置要求高吗?本作将在12月3日登陆主机和PC,很多玩家比较关心游戏的配置,这里给大家带来了渡神纪配置要求详细介绍,快来了解下吧. 渡神纪配置要求详细介绍 最低要求(720p/30 f ...
- C++11 unordered_map详细介绍
整理的算法模板合集: ACM模板 目录: 1.介绍 1.1 特性 2. 模版 2.1 迭代器 3. 功能函数 3.1 构造函数 3.2 容量操作 3.2.1 size 3.2.2 empty 3.3 ...
最新文章
- UA MATH571A 一元线性回归II 统计推断2
- 成功解决xgboost.core.XGBoostError: b‘[14:48:08] 0 feature is supplied. Are you using raw Booster inter
- Spring for Android 1.0.0发布
- Linux定时任务Crontab详解_定时备份
- 通过实际的例子，介绍 SAP ABAP 里的 Repository Information System 的使用技巧
- 为什么多个线程不可能同时抢到一把锁_并发基础理论：原子性问题、锁、管程...
- 新建站点的mysql数据库_lAMP下新建维护站点全过程
- java 反射 field get方法_JAVA学习之反射getDeclaredField()方法与getField()方法的区别
- MySQL-Proxy实现MySQL读写分离
- 怎样做才是一个独立自主的人？
- 有关判读flex 模板载入是否结束的一些问题。
- 详解测试开发工程师六大能力模型
- 电脑主板报警声音的故障现象对照表
- 中望cad2012专业破解版
- IBM深陷云计算业务欺诈丑闻，遭股东集体诉讼
- c0704 学生记录
- 硅谷中那些潜在的颠覆世界的力量
- 聊一哈，新入如何优雅的跟老板打招呼
- 关于yolov3.weights文件下载地址的分享
- Nginx 源码分析