最近水掘金的次数大幅度增长,毕竟日推的文章部分还是有很多含金量的。比如前两天看到的来自阿里巴巴开源的UI框架V-layout。
V-Layout,全称VirtualLayout,是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用的问题,更多应用于商城类首页复杂的界面,比如淘宝、天猫 ……
默认通用布局实现,包括网格布局、列表布局、悬浮布局等
- LinearLayoutHelper: 线性布局
- GridLayoutHelper: Grid布局, 支持横向的colspan
- FixLayoutHelper: 固定布局,始终在屏幕固定位置显示
- ScrollFixLayoutHelper: 固定布局,但之后当页面滑动到该图片区域才显示, 可以用来做 返回顶部或其他书签等
- FloatLayoutHelper: 浮动布局,可以固定显示在屏幕上,但用户可以拖拽其位置
- ColumnLayoutHelper: 栏格布局,都布局在一排,可以配置不同列之间的宽度比值
- SingleLayoutHelper: 通栏布局,只会显示一个组件View
- OnePlusNLayoutHelper: 一拖N布局,可以配置1-5个子元素
- StickyLayoutHelper: stikcy布局, 可以配置吸顶或者吸底
- 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;
}
简单运行下:
感谢阿里巴巴的开源,让我们轻轻松松打造复杂列表页面,向阿里程序猿致敬~