当前位置: 游戏平台 > 互联网科技 > 正文

淘宝开源库VLayout实践

时间:2020-03-01 19:03来源:互联网科技
VirtualLayout是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用的问题。 按照自己之前写简书的习惯,先上效果图:(图片素材来自于淘宝手机客户端) 最
VirtualLayout是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用的问题。

按照自己之前写简书的习惯,先上效果图:(图片素材来自于淘宝手机客户端)

最近淘宝出了vlayout,刚开始看淘宝的文档的时候还是有点懵,后来自己也总结规划了一下,写了一个比较好看的demo,顺便在这里总结一下。

牛逼之处:根布局就一个RecycleView,还是原生的RecycleView,但是实现的效果:

图片 1效果图注意:这里你看到的就一个RecycleView包裹,13号那个控件是可以拖拽的在屏幕范围内,5号控件是可以黏在顶部的,还有很多好东西,就自己去玩demo吧

vLayout.gif

VLayout是什么,说白了就是用一个原生RecycelerView加上VLayout来实现在一个页面上比较复杂的布局并且有一个比较好的复用,在RecyclerView里同时有GridLayout布局,瀑布流布局,浮动布局等VLayout提供的九大布局,这也是淘宝客户端首页加载不同布局的方法。

思路:

通过定制化的LayoutManager,接管整个RecyclerView的布局逻辑;LayoutManager管理了一系列LayoutHelper,LayoutHelper负责具体布局逻辑实现的地方;每一个LayoutHelper负责页面某一个范围内的组件布局;不同的LayoutHelper可以做不同的布局逻辑,因此可以在一个RecyclerView页面里提供异构的布局结构,这就能比系统自带的LinearLayoutManager、GridLayoutManager等提供更加丰富的能力。同时支持扩展LayoutHelper来提供更多的布局能力。

在研究具体的使用的时候,先看看官方对于vLayout 的介绍和使用方法:
vLayout的官方地址: https://github.com/alibaba/vlayout

好了,简单介绍到这里,首先我们先导入VLayout:

主要功能:
  • 默认通用布局实现,解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等。

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

    • 直接在module中build.gradle添加依赖
compile('com.alibaba.android:vlayout:1.0.2@aar') { transitive = true }
  • 使用方法直接参考Demo
  • 我这里就不介绍具体使用方法了,直接参考demo

说说这个框架现在存在的问题吧

  • 1.当我创建多种类型的LayoutHelper在一个RecycleView中使用时,可能导致layoutHelper.setBgColor(0xFFF5A623);这个方法失效,尤其是我在使用StickyLayoutHelper时,我是一直无效的
  • 2.使用StickyLayoutHelper时,会导致界面绘制后显示的界面很脏,但是只要一拖动RecycleView就自动清理了

图片 2开启过度绘制图片 3没有开启过度绘制

文档链接

官方的介绍:

通过定制化的LayoutManager,接管整个RecyclerView的布局逻辑;LayoutManager管理了一系列LayoutHelper,LayoutHelper负责具体布局逻辑实现的地方;每一个LayoutHelper负责页面某一个范围内的组件布局;不同的LayoutHelper可以做不同的布局逻辑,因此可以在一个RecyclerView页面里提供异构的布局结构,这就能比系统自带的LinearLayoutManager、aridLayoutManager等提供更加丰富的能力。同时支持扩展LayoutHelper来提供更多的布局能力。

compile ('com.alibaba.android:vlayout:版本@aar') {
    transitive = true
}

主要功能

  • 默认通用布局实现,解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等。
    • LinearLayoutHelper: 线性布局
    • GridLayoutHelper: Grid布局, 支持横向的colspan
    • FixLayoutHelper: 固定布局,始终在屏幕固定位置显示
    • ScrollFixLayoutHelper: 固定布局,但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等
    • FloatLayoutHelper: 浮动布局,可以固定显示在屏幕上,但用户可以拖拽其位置
    • ColumnLayoutHelper: 栏格布局,都布局在一排,可以配置不同列之间的宽度比值
    • SingleLayoutHelper: 通栏布局,只会显示一个组件View
    • OnePlusNLayoutHelper: 一拖N布局,可以配置1-5个子元素
    • StickyLayoutHelper: stikcy布局, 可以配置吸顶或者吸底
    • StaggeredGridLayoutHelper: 瀑布流布局,可配置间隔高度/宽度
  • 上述默认实现里可以大致分为两类:一是非fix类型布局,像线性、Grid、栏格等,它们的特点是布局在整个页面流里,随页面滚动而滚动;另一类就是fix类型的布局,它们的子节点往往不随页面滚动而滚动。
  • 所有除布局外的组件复用,VirtualLayout将用来管理大的模块布局组合,扩展了RecyclerView,使得同一RecyclerView内的组件可以复用,减少View的创建和销毁过程。

具体的版本请看github里VLayout给出的版本号。现在最新是1.0.6
接着我们就可以开始引用VLayout了,VLayout的通用代码如下:

如何使用

版本请参考mvn repository上的最新版本(目前最新版本是1.2.6),最新的 aar 都会发布到 jcenter 和 MavenCentral 上,确保配置了这两个仓库源,然后引入aar依赖:

compile ('com.alibaba.android:vlayout:1.2.6@aar') {
    transitive = true
}

或者maven:
pom.xml

<dependency>
  <groupId>com.alibaba.android</groupId>
  <artifactId>vlayout</artifactId>
  <version>1.2.6</version>
  <type>aar</type>
</dependency>

初始化LayoutManager

final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
final VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);

recyclerView.setLayoutManager(layoutManager);

设置回收复用池大小,(如果一屏内相同类型的 View 个数比较多,需要设置一个合适的大小,防止来回滚动时重新创建 View):

RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
recyclerView.setRecycledViewPool(viewPool);
viewPool.setMaxRecycledViews(0, 10);

注意:上述示例代码里只针对type=0的item设置了复用池的大小,如果你的页面有多种type,需要为每一种类型的分别调整复用池大小参数。

我相信看到这里,还是一脸懵逼,接下来带你一步步的实现上面的复杂效果,我们按照上面的功能顺序一步步的去介绍如何实现?

VirtualLayoutManager manager = new VirtualLayoutManager(this);
recyclerview.setLayoutManager(manager);
DelegateAdapter adapter =new DelegateAdapter(manager, true);

1. LinearLayoutHelper 线性布局

linear.gif

可以看出和传统的RecycleView的LinearLayoutManager是没有区别的,也就是传统的线性布局管理器。
由于Adapter和正常的RecycleView的Adapter几乎相似,所以只在LinearLayoutHelper 这个的实现去贴出来,其他的代码已上传Github,查看完整代码。

核心代码实现:

  DelegateAdapter adapters = new DelegateAdapter(layoutManager, true);
//Linear 布局
  LinearLayoutHelper linearHelper = new LinearLayoutHelper(10);
  adapters.addAdapter(new LinearAdapter(this,lists, linearHelper));

LinearAdapter的实现:

public class LinearAdapter extends DelegateAdapter.Adapter<RecyclerView.ViewHolder> {

    private Context mContext;
    private LayoutHelper mHelper;
    private List<String> mData;

    public LinearAdapter(Context context, List<String> mData, LayoutHelper helper) {
        this.mContext=context;
        this.mData = mData;
        this.mHelper=helper;
    }

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

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_linear_layout, parent, false);
        return new RecyclerViewItemHolder(view);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        RecyclerViewItemHolder recyclerViewHolder = (RecyclerViewItemHolder) holder;
        recyclerViewHolder.tv_name.setText(mData.get(position) );
        recyclerViewHolder.tv_name.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, "position:" +position, Toast.LENGTH_SHORT).show();
            }
        });

    }

    @Override
    public int getItemCount() {
        return mData.size();
    }

    /**
     * 正常条目的item的ViewHolder
     */
    private class RecyclerViewItemHolder extends RecyclerView.ViewHolder {

        public TextView tv_name;

        public RecyclerViewItemHolder(View itemView) {
            super(itemView);
            tv_name = itemView.findViewById(R.id.tv_name);
        }
    }
}
  • 其中VirtualLayoutManager它继承自LinearLayoutManager;引入了 LayoutHelper 的概念,它负责具体的布局逻辑;VirtualLayoutManager管理了一系列LayoutHelper,将具体的布局能力交给LayoutHelper来完成。
  • DelegateAdapter是VLayout专门为LayoutHelper定制的Adapter,我们把装载有各种布局的LayoutHelper的Adapter放进DelegateAdapter里最后在RecyclerView.setAdapter(DelegateAdapter);就可以加载出复杂的布局。
  • 或许你们会问什么是LayoutHelper,这个问题问得好,就是VLayout提供的九种默认通用布局,解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等具体,名称和功能如下:

2. GridLayoutHelper Grid布局, 支持横向的colspan

grid.gif

这里只需要看上面的网格布局中的东西,即:

image.png

这部分的内容。当然,这里和使用GridLayoutManager的效果是一样不做过多的解释。相信大家都看得懂。
核心代码实现:

//构造中传入相应的列的数量      
  GridLayoutHelper gridHelper = new GridLayoutHelper(5);
        gridHelper.setMarginTop(30);
//        gridHelper.setWeights(new float[]{20.0f,20.0f,20.0f,20.0f,20.0f});
        //设置垂直方向条目的间隔
        gridHelper.setVGap(5);
        //设置水平方向条目的间隔
        gridHelper.setHGap(5);
        gridHelper.setMarginLeft(30);
        gridHelper.setMarginBottom(30);
        //自动填充满布局,在设置完权重,若没有占满,自动填充满布局
        gridHelper.setAutoExpand(true);
        adapters.addAdapter(new GridHelperAdapter(imgSrc, gridHelper));
  1. LinearLayoutHelper: 线性布局
  2. GridLayoutHelper: Grid布局, 支持横向的colspan
  3. StaggeredGridLayoutHelper: 瀑布流布局,可配置间隔高度/宽度
  4. FixLayoutHelper: 固定布局,始终在屏幕固定位置显示
  5. ScrollFixLayoutHelper: 固定布局,但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等
  6. FloatLayoutHelper: 浮动布局,可以固定显示在屏幕上,但用户可以拖拽其位置
  7. ColumnLayoutHelper: 栏格布局,都布局在一排,可以配置不同列之间的宽度比值
  8. SingleLayoutHelper: 通栏布局,只会显示一个组件View
  9. OnePlusNLayoutHelper: 一拖N布局,可以配置1-5个子元素
  10. StickyLayoutHelper: stikcy布局, 可以配置吸顶或者吸底

3. FixLayoutHelper 固定布局,始终在屏幕固定位置显示

fix

在Demo中,最上面的搜索框使用FixLayoutHelper实现的,但是如果只使用FixLayoutHelper的话,这里会将正常的item挡住一部分,所以介绍一种解决方案,即下面提到的ColumnLayoutHelper

fix.png

核心代码实现:

//FixLayoutHelper,构造传入要固定的位置
        FixLayoutHelper fixHelper=new FixLayoutHelper(0,0);
        adapters.addAdapter(new FixLayoutAdapter(this,fixHelper));

这就是九种布局对应的类,我们可以用着九个类实现各种复杂的布局,下面我会一一介绍每个布局和效果,以便更直观的看到效果:

4. ScrollFixLayoutHelper固定布局,但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等

这个效果类似于FixLayoutHelper ,所以介绍一下相关属性:

SHOW_ALWAYS:与FixLayoutHelper的行为一致,固定在某个位置;
SHOW_ON_ENTER:默认不显示视图,当页面滚动到这个视图的位置的时候,才显示;
SHOW_ON_LEAVE:默认不显示视图,当页面滚出这个视图的位置的时候显示;

  • LinearLayoutHelper: 线性布局,就是实现ListView的效果很简单,直接看代码:

5. FloatLayoutHelper 浮动布局,可以固定显示在屏幕上,但用户可以拖拽其位置

悬浮按钮可以任意拖拽,但是会停留在屏幕的边上,暂时还没有找到可以任意拖动的api,后期更新,在使用的过程中如果添加了点击事件,会出现有时候拖动不了的bug,和adapters中初始化的位置和顺序有关系,建议早加入到adapters集合中,优先初始化。

float.gif

代码实现:

        //floatLayoutHelper
        FloatLayoutHelper layoutHelper = new FloatLayoutHelper();
        layoutHelper.setAlignType(FixLayoutHelper.BOTTOM_RIGHT);
        layoutHelper.setDefaultLocation(100, 400);

        adapters.addAdapter(new FloatLayoutAdapter(this,layoutHelper));

6. ColumnLayoutHelper 栏格布局,都布局在一排,可以配置不同列之间的宽度比值

Column.png

代码实现:

//        //ColumnLayoutHelper
        ColumnLayoutHelper columnLayoutHelper=new ColumnLayoutHelper();
        adapters.addAdapter(new FixLayoutAdapter(this,columnLayoutHelper));
public class LinearLayoutHelperActivity extends Activity{
    public static RecyclerView recyclerview;
    public static DelegateRecyclerAdapter delegateRecyclerAdapter;
    public DelegateAdapter adapter;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_main);
        recyclerview=(RecyclerView)findViewById(R.id.recyclerview);
        VirtualLayoutManager manager = new VirtualLayoutManager(this);
        recyclerview.setLayoutManager(manager);
        adapter =new DelegateAdapter(manager, true);

        adapter.addAdapter(init(this));
        recyclerview.setAdapter(adapter);
    }

    public static DelegateRecyclerAdapter init(Context context){
        LinearLayoutHelper linearLayoutHelper=new LinearLayoutHelper();
        //设置间隔高度
        linearLayoutHelper.setDividerHeight(5);
        //设置布局底部与下个布局的间隔
        linearLayoutHelper.setMarginBottom(20);
        //设置间距
        linearLayoutHelper.setMargin(20,20,20,20);
        delegateRecyclerAdapter=new DelegateRecyclerAdapter(context,linearLayoutHelper,"LinearLayoutHelper");
        return delegateRecyclerAdapter;
    }
}

7. SingleLayoutHelper 通栏布局,只会显示一个组件View

single.gif

在这个演示图中,我们使用的Banner是使用的SingleLayoutHelper 去实现。

而DelegateRecyclerAdapter的代码如下:

8. OnePlusNLayoutHelper 一拖N布局,可以配置1-5个子元素

one3.gif

这个Helper的实现偶尔会出现图片错位的bug,个人感觉和缓存池有关系(带后期更新)
代码实现:

        //onePlusNHelper
        OnePlusNLayoutHelper helper = new OnePlusNLayoutHelper();
        helper.setBgColor(R.color.colorPrimary);
        helper.setPadding(5, 5, 5, 5);
//设置相关的图片展示权重,最好总和加起来是1
        helper.setColWeights(new float[]{50f});
        helper.setMargin(10, 20, 10, 10);
        adapters.addAdapter(new OneToNAdapter(goodSrc.subList(0, 2), helper));
public class DelegateRecyclerAdapter extends DelegateAdapter.Adapter{
    public Context context;
    private LayoutHelper helper;
    private LayoutInflater inflater;
    private String name;

    public DelegateRecyclerAdapter(Context context,LayoutHelper helper,String name){
        this.inflater = LayoutInflater.from(context);
        this.helper = helper;
        this.context=context;
        this.name=name;
    }

    @Override
    public LayoutHelper onCreateLayoutHelper() {
        return this.helper;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new MyViewHolder(inflater.inflate(R.layout.layout_item,parent,false));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
            if(position%2==0){
                holder.itemView.setBackgroundColor(0xaa3F51B5);
            }else{
                holder.itemView.setBackgroundColor(0xccFF4081);
            }
        MyViewHolder myViewHolder=(MyViewHolder)holder;
        myViewHolder.name.setText(name+position+"");
    }

    @Override
    public int getItemCount() {
        return 9;
    }

    public class MyViewHolder extends RecyclerView.ViewHolder{
        public TextView name;
        public MyViewHolder(View itemView) {
            super(itemView);
            name=(TextView)itemView.findViewById(R.id.item_name);
        }
    }

}

9. StickyLayoutHelper 可以配置吸顶或者吸底

stick.gif

即:

women

这里的悬浮的tablayout使用的是StickyLayoutHelper ,去实现的这种效果。
代码实现:

        //吸顶的Helper
        StickyLayoutHelper stickyHelper = new StickyLayoutHelper();
        adapters.addAdapter(new StickyLayoutAdapter(stickyHelper));

这里需要说的就是在Adapter类里我们需要继承Vlayout的DelegateAdapter.Adapter类,然后多回调onCreateLayoutHelper()方法,返回我们传进去的LayoutHelper类,其他的和普通的RecyclerView是一个样的。DelegateRecyclerAdapter在我们后面也有多次引用。其他要说的就是我们初始完LinearLayoutHelper后生产DelegateAdapter.Adapter类再赋给DelegateAdapter,然后然后RecyclerView在setAdapter()就这样。

10. StaggeredGridLayoutHelper 瀑布流布局,可配置间隔高度/宽度

stag.png

代码实现:

        //StaggerGridLayoutHelper
        initStagData();
        StaggeredGridLayoutHelper stagHelp=new StaggeredGridLayoutHelper(2);
        stagHelp.setHGap(5);
        stagHelp.setVGap(5);
        adapters.addAdapter(new StaggeredGridLayoutAdapter(this,stagSrc,stagHelp));

好了,到这里vLayout的使用介绍完毕,相信你也有一个大致的了解和认识,代码已上传到Github https://github.com/OnexZgj/VlayoutTest 如果你有相关的问题可以留言,愿与你一起探讨!

image.png

  • GridLayoutHelper: Grid布局, 支持横向的colspan,也很简单,代码如下:
public static DelegateRecyclerAdapter init(Context context){
        GridLayoutHelper gridLayoutHelper=new GridLayoutHelper(4);
        //自定义设置某些位置的Item的占格数
        gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                if (position >5) {
                    return 2;
                }else {
                    return 1;
                }
            }
        });
        //是否填满可用区域
        gridLayoutHelper.setAutoExpand(false);
        delegateRecyclerAdapter=new DelegateRecyclerAdapter(context,gridLayoutHelper,"GridLayoutHelper");
        return delegateRecyclerAdapter;
    }

其他代码很上面的一样。

img2.PNG

  • StaggeredGridLayoutHelper: 瀑布流布局,可配置间隔高度/宽度,代码如下:
 public static StaggeredAdapter init(Context context){
    StaggeredGridLayoutHelper staggeredGridLayoutHelper=new StaggeredGridLayoutHelper(3,20);
    staggeredAdapter=new StaggeredAdapter(context,staggeredGridLayoutHelper,"StaggeredGridLayoutHelper");
    return staggeredAdapter;
 }

在StaggeredAdapter里我们在onBindViewHolder里用

ViewGroup.LayoutParams layoutParams = ((MyViewholder) holder).text.getLayoutParams();
layoutParams.height = 260 + position % 7 * 20;
((MyViewholder) holder).text.setLayoutParams(layoutParams);

来实现高度不一致,效果如下:

img3.PNG

编辑:互联网科技 本文来源:淘宝开源库VLayout实践

关键词:

  • 上一篇:没有了
  • 下一篇:没有了