vlayout的简单使用上篇（如何搭建一个简单的vlayout）

最近在学习vlayout，虽然该框架已经没有在维护了，但是在我们的项目中还是在使用的，但是发现在博客上关于vlayout介绍的文章也比较少，刚接触的时候我也是无从下手，因此在看了官网的例子和属性介绍之后，打算写一篇文章来讲一下vlayout的简单使用。（本文是仿官网demo来进行的，但是官网的不是很好理解，有兴趣的同学也可以直接看官网）

vlayout简介

VirtualLayout 是一个针对 RecyclerView 的 LayoutManager 扩展，主要提供一整套布局方案和布局间的组件复用的问题。怎么说呢，就是可以通过一个RecyclerView来实现一个复杂的布局。如下图所示，就比如淘宝的首页可以滑动的区域就是通过vlayout来实现的。

准备工作

在build.gradle文件中导入依赖，这里的版本号可以去官网找最新的。vlayout官网

implementation 'com.alibaba.android:vlayout:1.3.0@aar'

在gradle.properties文件中加上

android.enableJetifier=true

然后准备好布局文件 activity_main.xml。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/main_view"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#aaaaaa"android:clipToPadding="true"android:paddingLeft="0dp"android:paddingRight="0dp"android:requiresFadingEdge="none"android:scrollbars="vertical"/></androidx.constraintlayout.widget.ConstraintLayout>

vlayout的使用

首先先创建一个简单的viewHolder和adapter：

SubAdapter.java：

public class SubAdapter extends DelegateAdapter.Adapter<SubViewHolder> {private LayoutHelper layoutHelper;private int itemCount;public SubAdapter(LayoutHelper layoutHelper, int itemCount) {this.layoutHelper = layoutHelper;this.itemCount = itemCount;}@Overridepublic LayoutHelper onCreateLayoutHelper() {return layoutHelper;}@NonNull@Overridepublic SubViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());return new SubViewHolder(layoutInflater.inflate(R.layout.item, parent, false));}@Overridepublic void onBindViewHolder(@NonNull SubViewHolder holder, int position) {}@Overrideprotected void onBindViewHolderWithOffset(SubViewHolder holder, int position, int offsetTotal) {super.onBindViewHolderWithOffset(holder, position, offsetTotal);holder.setText(String.valueOf(offsetTotal));VirtualLayoutManager.LayoutParams layoutParams = new VirtualLayoutManager.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);holder.itemView.setLayoutParams(new ViewGroup.LayoutParams(layoutParams));}@Overridepublic int getItemCount() {return itemCount;}
}

SubViewHolder.java:

public  class SubViewHolder extends RecyclerView.ViewHolder {public static volatile int existing = 0;public static int createdTimes = 0;public SubViewHolder(@NonNull View itemView) {super(itemView);createdTimes++;existing++;}public void setText(String title) {((TextView) itemView.findViewById(R.id.title)).setText(title);}@Overrideprotected void finalize() throws Throwable {existing--;super.finalize();}
}

以及他们的布局文件item.xml:

<?xml version="1.0" encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/title"android:layout_width="match_parent"android:layout_height="50dp"android:gravity="center"android:background="#CCCCCC"android:textColor="#999999"android:textSize="22sp"android:textStyle="bold"/>
</FrameLayout>

这个ViewHolder和Adapter的样式可以自定义，这里的话用的是官方demo中的样式。

然后就是activity中进行处理，以下是MainActivity的代码：

public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);RecyclerView recyclerView = findViewById(R.id.main_view);//1.首先创建一个VirtualLayoutManagerVirtualLayoutManager virtualLayoutManager = new VirtualLayoutManager(this);//2.再创建一个DelegateAdapterDelegateAdapter delegateAdapter = new DelegateAdapter(virtualLayoutManager);//3.创建一个adapterListList<DelegateAdapter.Adapter> adapterList = new ArrayList<>();//4.创建对应的layoutHelper并存放在adapterList中，这里创建了一个LinearLayoutHelper，构造函数中的参数为每个子项的间距LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper(20);//SubAdapter中的参数第一个是对应的layoutHelper，第二个是子item个数adapterList.add(new SubAdapter(linearLayoutHelper, 10));//5.将adapterList作为参数传入delegateAdapterdelegateAdapter.addAdapters(adapterList);recyclerView.setLayoutManager(virtualLayoutManager);recyclerView.setAdapter(delegateAdapter);}
}

这样的话我们就搭建好了一个拥有LinearLayoutHelper的容器了。这个时候运行起来：

就可以得到一个有10个item的一个界面了。

如果我们再在adapterList中添加一个拥有5个item并且间距为40的LinearLayoutHelper会是怎样呢？

//该代码要在delegateAdapter.addAdapters(adapterList);这句之前
LinearLayoutHelper linearLayoutHelper2 = new LinearLayoutHelper(40);
adapterList.add(new SubAdapter(linearLayoutHelper2, 5));

结果如下图：

可以看到又创建了5个item，其中序号第10项到序号第14项之间的间距就为40了。

小结

那么以上呢就是vlayout的基本使用方式，但是呢，可以看到第9项和第10项之间的是挨在一起的，这个可以通过改变每个helper的属性来进行布局上的变化。如果想了解更多属性的介绍的，可以提前看这个官方文档去了解更多vlayout的属性。当然下篇的话也是会讲这些属性，有兴趣的同学可以点开主页看下篇哈～

vlayout官方属性方法文档https://github.com/alibaba/vlayout/blob/master/docs/ATTRIBUTES-ch.md