Alibaba开源UI框架V-Layout

最近水掘金的次数大幅度增长，毕竟日推的文章部分还是有很多含金量的。比如前两天看到的来自阿里巴巴开源的UI框架V-layout。

V-Layout，全称VirtualLayout，是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用的问题，更多应用于商城类首页复杂的界面，比如淘宝、天猫 ……

默认通用布局实现，包括网格布局、列表布局、悬浮布局等

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: 瀑布流布局，可配置间隔高度/宽度

根据文档做了一个简单的入门，主要功能就是一个RecyclerView设置多个Adapter，打造多功能多样式的列表。

在gradle文件中加入

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

建一个普通的Activity并在该布局文件中只添加一个RecyclerView控件：
activity_xlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcv_xlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

XLayoutActivity.java

public class XLayoutActivity extends Activity {

    RecyclerView recyclerView;
    DelegateAdapter.Adapter singleAdapter, gridAdapter, lindearAdapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_alibabaxlayout);

        recyclerView = findViewById(R.id.rcv_xlayout);
        //初始化
        VirtualLayoutManager manager = new VirtualLayoutManager(this);
        recyclerView.setLayoutManager(manager);
        //设置组件复用回收池
        RecyclerView.RecycledViewPool recycledViewPool = new RecyclerView.RecycledViewPool();
        recycledViewPool.setMaxRecycledViews(0, 10);

        //初始化数据
        ArrayList<String> list = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            list.add("test === " + i);
        }

        final GridLayoutHelper gridLayoutHelper = new GridLayoutHelper(3);//spanCount=每行多少列
        gridLayoutHelper.setAutoExpand(false);//是否为自动填充
        final LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper(2);

        singleAdapter = new XLinearAdapter(this, DefaultLayoutHelper.newHelper(1), 1, list);//itemCount=当前样式布局的总个数（针对单行布局）
        gridAdapter = new XGridAdapter(this, gridLayoutHelper, 6, list);//count=列的总个数
        lindearAdapter = new XLinearAdapter(this, linearLayoutHelper, list.size(), list);
        ArrayList<DelegateAdapter.Adapter> adapters = new ArrayList<>();
        adapters.add(singleAdapter);
        adapters.add(gridAdapter);
        adapters.add(lindearAdapter);

        DelegateAdapter delegateAdapter = new DelegateAdapter(manager);
        delegateAdapter.setAdapters(adapters);
        recyclerView.setAdapter(delegateAdapter);
    }

所有的Adapter都必须继承DelegateAdapter.Adapter，重写onCreateLayoutHelper()，其他方法使用与RecyclerView.Adapter无异

public LayoutHelper onCreateLayoutHelper() {
        return layoutHelper;
    }

简单运行下：

感谢阿里巴巴的开源，让我们轻轻松松打造复杂列表页面，向阿里程序猿致敬～

掘金分享：https://juejin.im/entry/59104f6961ff4b006257ec78