淘宝开源库VLayout实践

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

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

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

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

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

VirtualLayoutManager manager = new VirtualLayoutManager(this);
recyclerview.setLayoutManager(manager);
DelegateAdapter adapter =new DelegateAdapter(manager, true);
  • 其中VirtualLayoutManager它继承自LinearLayoutManager；引入了 LayoutHelper 的概念，它负责具体的布局逻辑；VirtualLayoutManager管理了一系列LayoutHelper，将具体的布局能力交给LayoutHelper来完成。
  • DelegateAdapter是VLayout专门为LayoutHelper定制的Adapter，我们把装载有各种布局的LayoutHelper的Adapter放进DelegateAdapter里最后在RecyclerView.setAdapter(DelegateAdapter);就可以加载出复杂的布局。
  • 或许你们会问什么是LayoutHelper，这个问题问得好，就是VLayout提供的九种默认通用布局，解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等具体,名称和功能如下:
  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布局， 可以配置吸顶或者吸底

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

  • LinearLayoutHelper: 线性布局，就是实现ListView的效果很简单，直接看代码:
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;
    }
}

而DelegateRecyclerAdapter的代码如下:

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);
        }
    }

}

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


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
  • FixLayoutHelper: 固定布局，始终在屏幕固定位置显示,代码如下：
public static FixLayoutAdapter initFixLayoutHelper(Context context){
    FixLayoutHelper fixLayoutHelper=new FixLayoutHelper(FixLayoutHelper.BOTTOM_LEFT, 200, 200);
    FixLayoutAdapter fixLayoutAdapter=new FixLayoutAdapter(context,fixLayoutHelper,"fixlayouthelp");
    return fixLayoutAdapter;
}

除了有FixLayoutHelper.BOTTOM_LEFT之外，还有FixLayoutHelper.TOP_LEFT，FixLayoutHelper.BOTTOM_RIGHT，FixLayoutHelper.TOP_RIGHT, 200,200分别对应偏移量x,y，效果如下:


img4.PNG

fixlayouthelp区域块就是FixLayoutHelper了。

  • ScrollFixLayoutHelper: 固定布局，但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等，代码如下:
public static FixLayoutAdapter initScrollFixLayout(Context context){
    ScrollFixLayoutHelper scrollFixLayoutHelper = new ScrollFixLayoutHelper(15,15);
    //show_always:总是显示
    //show_on_enter:当页面滚动到这个视图的位置的时候，才显示
    //show_on_leave:当页面滚出这个视图的位置的时候显示
    scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);
    return new FixLayoutAdapter(context, scrollFixLayoutHelper,"scrollfixlayouthelper");
}

代码很简单，看效果：


img5.PNG

ScrollFixLayoutHelper继承自FixLayoutHelper，不同的是showType来决定这个布局的Item是否显示，可以用来做一些返回顶部之类的按钮，

  1. SHOW_ALWAYS：与FixLayoutHelper的行为一致，固定在某个位置；
  2. SHOW_ON_ENTER：默认不显示视图，当页面滚动到这个视图的位置的时候，才显示；
  3. SHOW_ON_LEAVE：默认不显示视图，当页面滚出这个视图的位置的时候显示；

这里效果不明显，等集合所有布局之后大家就可以看很直观的效果

  • FloatLayoutHelper: 浮动布局，可以固定显示在屏幕上，但用户可以拖拽其位置，代码如下：
public static FixLayoutAdapter initFloatLayoutHelper(Context context){
    FloatLayoutHelper floatLayoutHelper=new FloatLayoutHelper();
    floatLayoutHelper.setDefaultLocation(20,250);
    FixLayoutAdapter fixLayoutAdapter=new FixLayoutAdapter(context,floatLayoutHelper,"floatlayouthelper");
    return  fixLayoutAdapter;
}

效果如下：

img6.gif

其中setDefaultLocation()使用来设置他的初始位置的，setAlignType（表示吸边时的基准位置，默认左上角，有四个取值，分别是TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT）

  • ColumnLayoutHelper: 栏格布局，都布局在一排，可以配置不同列之间的宽度比值，代码如下:
 public static ColumnLayoutAdapter initColumnLayout(Context context){
    ColumnLayoutHelper columnLayoutHelper=new ColumnLayoutHelper();
    columnLayoutHelper.setWeights(new float[]{20,20,20,20,20});
    columnLayoutHelper.setMarginBottom(20);
    ColumnLayoutAdapter columnLayoutAdapter=new ColumnLayoutAdapter(context,columnLayoutHelper,"ColumnLayoutHelper");
    return columnLayoutAdapter;
}

ColumnLayoutHelper需要设置Weights，是一个float数组，总和为100，否则超出布局。效果图如下：


img7.PNG
  • SingleLayoutHelper: 通栏布局，只会显示一个组件View，这里建议设置Adapter个数为1，因为他就只会显示一栏，假如有多个可能会出现一些问题，本人实测个数多时会出点问题。代码如下：
public static SingleLayoutAdapter initSingleLayout(Context context){
    SingleLayoutHelper singleLayoutHelper=new SingleLayoutHelper();
    //设置间距
    singleLayoutHelper.setMargin(20,20,20,20);
    SingleLayoutAdapter singleLayoutAdapter=new SingleLayoutAdapter(context,singleLayoutHelper,"SingleLayoutHelper");
    return singleLayoutAdapter;
}

效果图如下:

img8.PNG
  • OnePlusNLayoutHelper: 一拖N布局，可以配置1-5个子元素,根据个数的不同所呈现的界面也是不一样的,不同个数效果如下：

//个数为1

个数为1.PNG

//个数为2

个数为2.PNG

//个数为3

个数为3.PNG

//个数为4

个数为4.PNG

//个数为5

个数为5.PNG

代码如下：

 public static OnePlusNLayoutAdapter initOnePlusNLayout(Context context){
    OnePlusNLayoutHelper onePlusNLayoutHelper=new OnePlusNLayoutHelper();
    //设置布局底部与下个布局的间隔
    onePlusNLayoutHelper.setMarginBottom(20);
    OnePlusNLayoutAdapter onePlusNLayoutAdapter=new OnePlusNLayoutAdapter(context,onePlusNLayoutHelper,"OnePlusNLayoutHelper");
    return onePlusNLayoutAdapter;
}
  • StickyLayoutHelper: stikcy布局， 可以配置吸顶或者吸底，代码如下:
public static StickyLayoutAdapter initStickyLayoutHelper(Context context){
    StickyLayoutHelper stickyLayoutHelper=new StickyLayoutHelper();
    return new StickyLayoutAdapter(context,stickyLayoutHelper);
}

效果图如下：

img10.gif
  • 最后假如只是单单加载其中的一个布局其实意义不大，VLayout只最大的意义在于加载多个布局并且保持一个很好的复用，所以我们把上面的所有布局一起加载起来，代码如下：
public class AllActivity extends Activity{

    private RecyclerView recyclerview;
    private DelegateAdapter delegateAdapter ;
    final List<DelegateAdapter.Adapter> adapters = new LinkedList<>();

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_main);
        recyclerview=(RecyclerView)findViewById(R.id.recyclerview);

        initView();
    }

    public void initView(){
        RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
        recyclerview.setRecycledViewPool(viewPool);
        viewPool.setMaxRecycledViews(0,10);

        adapters.add(LinearLayoutHelperActivity.init(this));
        adapters.add(ColumnLayoutHelperActivity.initColumnLayout(this));
        adapters.add(GridLayoutHelperActivity.init(this));
        adapters.add(FixLayoutHelperActivity.initFixLayoutHelper(this));
        adapters.add(ScrollFixLayoutHelperActivity.initScrollFixLayout(this));
        adapters.add(SingleLayoutHelperActivity.initSingleLayout(this));
        adapters.add(OnePlusNLayoutHelperActivity.initOnePlusNLayout(this));
        adapters.add(FloatLayoutHelperActivity.initFloatLayoutHelper(this));
        adapters.add(StickyLayoutHelperActivity.initStickyLayoutHelper(this));
        adapters.add(StaggeredGridLayoutHelperActivity.init(this));

        VirtualLayoutManager manager = new VirtualLayoutManager(this);
        recyclerview.setLayoutManager(manager);
        delegateAdapter = new DelegateAdapter(manager);

        delegateAdapter.setAdapters(adapters);
        recyclerview.setAdapter(delegateAdapter);
    }

}

要注意的是DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager, hasConsistItemType);里当hasConsistItemType=true的时候，不论是不是属于同一个子adapter，相同类型的item都能复用。表示它们共享一个类型。 当hasConsistItemType=false的时候，不同子adapter之间的类型不共享。

效果如下图：

img11.gif

最后源码demo,代码都在这https://github.com/jack921/ProjectVLayout

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,716评论 4赞 364
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,558评论 1赞 294
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 109,431评论 0赞 244
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,127评论 0赞 209
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,511评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,692评论 1赞 222
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,915评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,664评论 0赞 202
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,412评论 1赞 246
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2赞 245
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,424评论 2赞 254
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,098评论 3赞 238
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0赞 197
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2赞 276
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2赞 271

推荐阅读更多精彩内容