Android开源库V - Layout：淘宝、天猫都在用的UI框架，赶紧用起来吧！

前言

• V- Layout 是阿里出品的基础 UI 框架，用于快速实现页面的复杂布局，在手机天猫 Android版 内广泛使用

• 让人激动的是，在上个月V- Layout终于在Github上开源！

  Github - alibaba - vlayout

• 在五一假期我对V- Layout进行了详细分析，我将献上一份 V- Layout的使用攻略 & 源码分析，希望你们会喜欢。

  ---

目录

---

1. 为什么要使用 V - Layout

在讲解 `V - Layout` 前，我们先来搞懂一个问题：为什么要使用 `V - Layout`

1.1 背景

• Android中 UI 性能消耗主要来自于两个方面：

  1. 布局层次嵌套导致多重 measure/layout
  2. View控件的创建和销毁

• 为了解决上述问题，现有的解决方式是：

  1. 少用嵌套布局
  2. 使用 ListView/GirdView/RecyclerView等基础空间来处理View的回收与复用。

但是，很多时候我们需要在一个长列表下做多种类型的布局来分配各种元素,，特别是电商平台首页等页面，布局元素结构更加复杂多样。如下图： {@4}

此时的解决方案有所变化：不采用子View的复用，只采用一个主要的复用容器（如ListView 或 RecyclerView+LinearLayoutManager），然后在其中使用嵌套方式直接用各个组件进行拼接，减少了复用的能力

1.2 问题

这种做法还是会损失Android应用的性能。

1.3 解决方案

• 通过自定义 LayoutManager 管理所有的布局类型
• 即阿里出品的基础 UI 框架项目 VirtualLayout就是采用该方式来解决上述问题

---

2. 简介

• 定义：VirtualLayout是阿里出品的基础 UI 框架项目
• 作用：快速实现复杂的布局格式的混排
  • 基于 RecyclerView & LayoutManager扩展
  • 目前已在Github开源：Github - alibaba - vlayout
  

---

3. 应用场景

• 复杂的布局格式混排，如：浮动布局、栏格布局、通栏布局、一拖N布局、瀑布流布局，还可以组合使用这些布局
• 具体场景是：如电商平台首页、活动页等等

  V - Layout 目前已在手机天猫 & 淘宝 Android 版内广泛使用

---

4. 原理解析

V - Layout的本质原理是：通过自定义一个VirtualLayoutManager（继承自 LayoutManager），用于管理一系列LayoutHelper，将具体的布局能力交给LayoutHelper来完成，从而 快速实现组合布局 的需求。

1. 每个 LayoutHelper负责 页面某一个范围内的布局
2. V - Layout默认实现了10种默认布局：（对应同名的LayoutHelper）

4.1 源码类说明

V - Layout的源码类图如下：

1.RecyclerView

• 定义：页面布局的主体
• 特别注意：在V - layout框架里绑定 VirtualLayoutAdapter（继承Adapter） & VirtualLayoutManager（继承LayoutManager）

2. VirtualLayoutAdapter

• 定义：数据适配器。 继承自系统的Adaper
• 作用：创建组件 & 绑定数据到组件
• 额外：定义了两个接口：
  1. getLayoutHelper()：用于返回某个位置组件对应的一个LayoutHelper
  2. setLayoutHelpers()：调用此方法设置整个页面所需要的一系列LayoutHelper 这两方法的具体实现委托给 VirtualLayoutManager完成

3. VirtualLayoutManager

• 定义：布局管理器 继承自系统的 LinearLayoutManager
• 作用：
  1. 在 RecyclerView加载组件或者滑动时调用VirtualLayoutManager 的layoutChunk（），返回当前还有哪些空白区域可摆放组件
  2. 管理 LayoutHelper列表
• 额外：实现了VirtualLayoutAdapter的 getLayoutHelper() & setLayoutHelpers()

4. LayoutHelperFinder

• 定义：LayoutHelper 寻找器
• 作用：根据页面状态 寻找对应的 LayoutHelper 并返回给 VirtualLayoutManager
  1. VirtualLayoutManager会持有一个LayoutHelperFinder
  2. 当layoutChunck（）被调用时会传入一个位置参数，告诉VirtualLayoutManager当前要布局第几个组件
  3. VirtualLayoutManager通知持有的 LayoutHelperFinder找到传入参数位置对应的 LayoutHelper（每个 LayoutHelper 都会绑定它负责的布局区域的起始位置和结束位置）

5. LayoutHelper

• 定义：布局协助器
• 作用：负责具体的布局逻辑
• 其中定义了一系列接口用于和VirtualLayoutManager通信：

接口	作用
isOutOfRange()	告诉VirtualLayoutManager它所传递过来位置是否在当前LayoutHelper的布局区域内；
setRange()	设置当前LayoutHelper负责的布局区域
doLayout()	真正的布局逻辑接口
beforeLayout()	在布局前做一些前置工作
afterLayout()	在布局完成后做一些后置工作

6. MarginLayoutHelper

• 定义：继承自 LayoutHelper
• 作用：扩展LayoutHelper，提供了布局常用的内边距padding、外边距margin的计算功能

7. BaseLayoutHelper

• 定义：MarginLayoutHelper的第一层具体实现
• 作用：填充 当前LayoutHelper在屏幕范围内的具体区域 背景色、背景图等逻辑

8. 子LayoutHelper

• 定义：MarginLayoutHelper的第二层具体实现
• 作用：负责具体的布局逻辑
  1. 每种子LayoutHelper负责一种布局逻辑
  2. 重点实现了beforeLayout()、doLayout()、afterLayout()
  3. 特别是doLayout()：会获取一组件，并对组件进行尺寸计算、界面布局。
  4. V - Layout默认实现了10种默认布局：（对应同名的LayoutHelper）

下面会进行详细介绍。

• 特别注意：
  1. 每一种LayoutHelper负责布局一批组件范围内的组件，不同组件范围内的组件之间，如果类型相同，可以在滑动过程中回收复用。因此回收粒度比较细，且可以跨布局类型复用。
  2. 支持扩展外部：即注册新的LayoutHelper，实现特殊的布局方式。下面会详细说明

介绍完类之后，我将详细分析 V - Layout的工作流程。

---

4.2 工作流程

• V - Layout的工作流程分为 初始化 & 布局流程。如下图：

• 下面我将对初始化 & 布局流程作详细分析。

4.2.1 初始化

• 在使用 V - layout 快速实现复杂布局前，需要先做一系列的初始化工作。

初始化流程与使用普通的 RecyclerView + LayoutManager 初始化流程基本一致：Vlayout的使用者

此处的初始化 实际上 就是 使用者在使用 V - layout 时需要做的初始化工作，在下面的实例讲解我会进行更加详细的说明。

---

4.2.2 具体布局流程

• 当完成初始化工作后，每当用户刚打开页面第一次渲染布局 或 用户滑动页面时，都会进行一次布局流程
• 布局流程的本质是：自定义 VirtualLayoutManager持续获取页面状态，并通过LayoutHelperFinder找到对应的LayoutHelper从而实现对应的布局逻辑，从而快速实现组合布局 的需求
• 具体流程如下

---

总结

下面用一张图总结 V - Layout 的原理 & 工作流程 {@30}

在讲完原理后，接下来我将如何使用 V - Layout。

---

5. 使用步骤

• V - Layout的使用其实就是上面说的初始化工作
• 使用步骤如下：

下面我将对每个步骤进行详细说明。

步骤1：创建RecyclerView & VirtualLayoutManager 对象并进行绑定

recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
        // 创建RecyclerView对象
        VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
        // 创建VirtualLayoutManager对象
        // 同时内部会创建一个LayoutHelperFinder对象，用来后续的LayoutHelper查找
        recyclerView.setLayoutManager(layoutManager);
        // 将VirtualLayoutManager绑定到recyclerView

步骤2：设置回收复用池大小

如果一屏内相同类型的 View 个数比较多，需要设置一个合适的大小，防止来回滚动时重新创建 View）

// 设置组件复用回收池
        RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
        recyclerView.setRecycledViewPool(viewPool);
        viewPool.setMaxRecycledViews(0, 10);

步骤3：设置Adapter

设置 V - Layout的Adapter有两种方式:

• 方式1：继承 自 DelegateAdapter
• 方式2：继承 自 VirtualLayoutAdapter 下面会进行详细说明：

方式1：继承 自 DelegateAdapter

• 定义：DelegateAdapter是V - Layout专门为管理 LayoutHelper定制的 Adapter

  继承自VirtualLayoutAdapter

• 作用：通过管理不同布局的Adapter，继而管理不同的 LayoutHelper，从而实现使用不同组合布局

  1. 特别注意：虽不可直接绑定LayoutHelper，但是它内部有一个继承自RecyclerView.Adapter的内部类Adapter可以绑定LayoutHelper；
  2. 即通过一个List把绑定好的Adapter打包起来，再放去DelegateAdapter，这样就可以实现组合使用不同的布局

• 具体做法：

  1. 写法与复写系统自带的Adapter非常类似：只比系统自带的RecyclerAdapter需要多重载onCreateLayoutHelper方法，其余类似
  2. 关于Android系统自带的RecyclerAdapter的使用具体请看我写的文章Android开发：ListView、AdapterView、RecyclerView全面解析

public class MyAdapter extends DelegateAdapter.Adapter<MyAdapter.MainViewHolder> {
// 比系统自带的RecyclerAdapter需要多重载onCreateLayoutHelper（）
    @Override
    public LayoutHelper onCreateLayoutHelper() {
        return layoutHelper;
    }
... // 其余写法与复写系统自带的Adapter相同
}

方式2：继承 自 VirtualLayoutAdapter

• 定义：当需要实现复杂需求时， 可以通过继承VirtualLayoutAdapter从而实现自定义Adapter

• 具体使用

public class MyAdapter extends VirtualLayoutAdapter {
   ...// 自定义Adapter逻辑
}

步骤4：根据数据列表，创建对应的LayoutHelper

• 系统以封装好以下布局类型（对应同名的LayoutHelper）

• 具体使用如下：

1. 线性布局（LinearLayoutHelper）

• 布局说明：布局子元素（Item）以线性排布的布局

• 具体使用

/**
    设置线性布局
       */
        LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper();
        // 创建对应的LayoutHelper对象
 // 所有布局的公共属性（属性会在下面详细说明）
        linearLayoutHelper.setItemCount(4);// 设置布局里Item个数
        linearLayoutHelper.setPadding(10,10,10,10);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
        linearLayoutHelper.setMargin(10,10,10,10);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离
        linearLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
        linearLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比
 // linearLayoutHelper特有属性
        linearLayoutHelper.setDividerHeight(1); // 设置每行Item的距离

1. 所有布局的共有属性说明：

a. setItemCount属性

• 作用：设置整个布局里的Item数量

  如设置的Item总数如与Adapter的getItemCount()方法返回的数量不同，会取决于后者

• 具体使用

// 接口示意
    public void setItemCount(int Count)
// 具体使用
        linearLayoutHelper.setItemCount(4);

b. Adding & Margin属性

• 定义：都是边距的含义，但二者边距的定义不同：

  1. Padding：是 LayoutHelper 的子元素相对 LayoutHelper 边缘的距离；
  2. Margin：是 LayoutHelper 边缘相对父控件（即RecyclerView）的距离。具体如下图： 

• 具体使用

// 接口示意
    public void setPadding(int leftPadding, int topPadding, int rightPadding, int bottomPadding)
    public void setMargin(int leftMargin, int topMargin, int rightMargin, int bottomMargin)
// 具体使用
        linearLayoutHelper.setPadding(10,10,10,10);
        // 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
        linearLayoutHelper.setMargin(10,10,10,10);
        // 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离

---

c. bgColor属性

• 作用：设置布局背景颜色
• 具体使用：

// 接口示意
public void setBgColor(int bgColor)
// 具体使用
linearLayoutHelper.setBgColor(Color.YELLOW);

d. aspectRatio属性

• 作用：设置布局内每行布局的宽与高的比。如下图

• 具体使用

// 接口示意
public void setAspectRatio(float aspectRatio);
// LayoutHelper定义的aspectRatio
((VirutalLayoutManager.LayoutParams) layoutParams).mAspectRatio
// 视图的LayoutParams定义的aspectRatio
// 在LayoutHelper计算出视图宽度之后，用来确定视图高度时使用的，它会覆盖通过LayoutHelper的aspectRatio计算出来的视图高度，因此具备更高优先级。
// 具体使用
        linearLayoutHelper.setAspectRatio(6);

2. LinearLayoutHelper布局的特有属性说明

a. dividerHeight属性

• 作用：设置每行Item之间的距离

  设置的间隔会与RecyclerView的addItemDecoration（）添加的间隔叠加

• 具体使用

// 接口示意
public void setDividerHeight(int dividerHeight)
// 具体使用
 linearLayoutHelper.setDividerHeight(1);

---

2. 网格布局（GridLayout）

• 布局说明：布局里的Item以网格的形式进行排列

• 具体使用

/**
        设置Grid布局
        */
GridLayoutHelper gridLayoutHelper = new GridLayoutHelper(3);
// 在构造函数设置每行的网格个数
// 公共属性
gridLayoutHelper.setItemCount(6); // 设置布局里Item个数
gridLayoutHelper.setPadding(20, 20, 20, 20); // 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
gridLayoutHelper.setMargin(20, 20, 20, 20); // 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离
gridLayoutHelper.setBgColor(Color.GRAY); // 设置背景颜色
gridLayoutHelper.setAspectRatio(6); // 设置设置布局内每行布局的宽与高的比
// gridLayoutHelper特有属性（下面会详细说明）
gridLayoutHelper.setWeights(new float[] {
    40,
    30,
    30
}); //设置每行中 每个网格宽度 占 每行总宽度 的比例
gridLayoutHelper.setVGap(20); // 控制子元素之间的垂直间距
gridLayoutHelper.setHGap(20); // 控制子元素之间的水平间距
gridLayoutHelper.setAutoExpand(false); //是否自动填充空白区域
gridLayoutHelper.setSpanCount(3); // 设置每行多少个网格
// 通过自定义SpanSizeLookup来控制某个Item的占网格个数
gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() {@Override public int getSpanSize(int position) {
        if (position > 7) {
            return 3;
            // 第7个位置后,每个Item占3个网格
        } else {
            return 2;
            // 第7个位置前,每个Item占2个网格
        }
    }
});

GridLayoutHelper布局的特有属性说明

a. weights属性

• 作用：设置每行中每个网格宽度占每行总宽度的比例
  1. 默认情况下，每行中每个网格中的宽度相等
  2. weights属性是一个float数组，每一项代表当个网格占每行总宽度的百分比；总和是100，否则布局会超出容器宽度；
  3. 如果布局中有4列，那么weights的长度也应该是4；长度大于4，多出的部分不参与宽度计算；如果小于4，不足的部分默认平分剩余的空间。

• 具体使用

// 接口示意
public void setWeights(float[] weights)
// 具体使用
gridLayoutHelper.setWeights(new float[] {
    40,
    30,
    30
});

b. vGap、hGap属性

• 作用：分别控制子元素之间的垂直间距 和 水平间距。

• 具体使用

// 接口示意
    public void setHGap(int hGap)
    public void setVGap(int vGap)
// 具体使用
    gridLayoutHelper.setVGap(20);// 控制子元素之间的垂直间距
    gridLayoutHelper.setHGap(20);// 控制子元素之间的水平间距

c. spanCount、spanSizeLookup属性

• 作用：
  1. spanCount：设置每行多少个网格
  2. spanSizeLookup：设置每个 Item占用多少个网格（默认= 1）

• 具体使用

// 接口示意
public void setSpanCount(int spanCount)
public void setSpanSizeLookup(SpanSizeLookup spanSizeLookup)
// 具体使用
        gridLayoutHelper.setSpanCount(5);// 设置每行多少个网格
        // 通过自定义SpanSizeLookup来控制某个Item的占网格个数
        gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                if (position > 7 ) {
                    return 3;
                    // 第7个位置后,每个Item占3个网格
                }else {
                    return 2;
                    // 第7个位置前,每个Item占2个网格
                }
            }
        });

d. autoExpand属性

• 作用：当一行里item的个数 < （每行网格列数 - spanCount值/ 每个Item占有2个网格-setSpanSizeLookup ）时，是否自动填满空白区域
  1. 若autoExpand=true，那么视图的总宽度会填满可用区域；
  2. 否则会在屏幕上留空白区域。

• 具体使用

// 接口示意
public void setAutoExpand(boolean isAutoExpand)
// 具体使用
gridLayoutHelper.setAutoExpand(false);

---

3. 固定布局（FixLayoutHelper）

• 布局说明：布局里的Item 固定位置

  固定在屏幕某个位置，且不可拖拽 & 不随页面滚动而滚动。如下图：（左上角）

• 具体使用

/**
         设置固定布局
         */
        FixLayoutHelper fixLayoutHelper = new FixLayoutHelper(FixLayoutHelper.TOP_LEFT,40,100);
        // 参数说明:
        // 参数1:设置吸边时的基准位置(alignType) - 有四个取值:TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT
        // 参数2:基准位置的偏移量x
        // 参数3:基准位置的偏移量y
        // 公共属性
        fixLayoutHelper.setItemCount(1);// 设置布局里Item个数
        // 从设置Item数目的源码可以看出，一个FixLayoutHelper只能设置一个
//        @Override
//        public void setItemCount(int itemCount) {
//            if (itemCount > 0) {
//                super.setItemCount(1);
//            } else {
//                super.setItemCount(0);
//            }
//        }
        fixLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
        fixLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离
        fixLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
        fixLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比
        // fixLayoutHelper特有属性
        fixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);// 设置吸边时的基准位置(alignType)
        fixLayoutHelper.setX(30);// 设置基准位置的横向偏移量X
        fixLayoutHelper.setY(50);// 设置基准位置的纵向偏移量Y

FixLayoutHelper特有属性说明

a. AlignType、x、y属性

• 作用：
  1. alignType：吸边基准类型

     共有4个取值：TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT，具体请看下面示意图

  2. x：基准位置的横向偏移量
  3. y：基准位置的纵向偏移量

• 作用对象：FixLayoutHelper, ScrollFixLayoutHelper, FloatLayoutHelper的属性

// 接口示意
public void setAlignType(int alignType)
public void setX(int x)
public void setY(int y)
// 具体使用
fixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);
fixLayoutHelper.setX(30);
fixLayoutHelper.setY(50);

---

4. 可选显示的固定布局（ScrollFixLayoutHelper）

• 布局说明：布局里的Item 固定位置
  1. 固定在屏幕某个位置，且不可拖拽 & 不随页面滚动而滚动（继承自固定布局（FixLayoutHelper））
  2. 唯一不同的是，可以自由设置该Item什么时候显示（到顶部显示 / 到底部显示），可如下图：（左上角）
  3. 需求场景：到页面底部显示”一键到顶部“的按钮功能

以下示意图为：滑动到底部，布局才在左上角显示

• 具体使用

/**
         设置可选固定布局
         */
        ScrollFixLayoutHelper scrollFixLayoutHelper = new ScrollFixLayoutHelper(ScrollFixLayoutHelper.TOP_RIGHT,0,0);
        // 参数说明:
        // 参数1:设置吸边时的基准位置(alignType) - 有四个取值:TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT
        // 参数2:基准位置的偏移量x
        // 参数3:基准位置的偏移量y
        // 公共属性
        scrollFixLayoutHelper.setItemCount(1);// 设置布局里Item个数
        // 从设置Item数目的源码可以看出，一个FixLayoutHelper只能设置一个
//        @Override
//        public void setItemCount(int itemCount) {
//            if (itemCount > 0) {
//                super.setItemCount(1);
//            } else {
//                super.setItemCount(0);
//            }
//        }
        scrollFixLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
        scrollFixLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离
        scrollFixLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
        scrollFixLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比
        // fixLayoutHelper特有属性
     scrollFixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);// 设置吸边时的基准位置(alignType)
        scrollFixLayoutHelper.setX(30);// 设置基准位置的横向偏移量X
        scrollFixLayoutHelper.setY(50);// 设置基准位置的纵向偏移量Y
        scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);// 设置Item的显示模式

ScrollFixLayoutHelper特有属性说明

a. AlignType、x、y属性

• 作用：
  1. alignType：吸边基准类型

     共有4个取值：TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT，具体请看下面示意图

  2. x：基准位置的横向偏移量
  3. y：基准位置的纵向偏移量

• 具体使用

// 接口示意
public void setAlignType(int alignType)
public void setX(int x)
public void setY(int y)
// 具体使用
ScrollFixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);
ScrollFixLayoutHelper.setX(30);
ScrollFixLayoutHelper.setY(50);

b. ShowType属性

• 作用：设置Item的显示模式

  共有三种显示模式

  1. SHOW_ALWAYS：永远显示(即效果同固定布局)
  2. SHOW_ON_ENTER：默认不显示视图，当页面滚动到该视图位置时才显示；
  3. SHOW_ON_LEAVE：默认不显示视图，当页面滚出该视图位置时才显示

• 具体使用

// 接口示意
public void setShowType(int showType)
// 具体使用
scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);

---

5. 浮动布局（FloatLayoutHelper）

• 布局说明：布局里的Item只有一个
  1. 可随意拖动，但最终会被吸边到两侧
  2. 不随页面滚动而移动

• 具体使用

/**
         设置浮动布局
         */
        FloatLayoutHelper floatLayoutHelper = new FloatLayoutHelper();
        // 创建FloatLayoutHelper对象
        // 公共属性
        floatLayoutHelper.setItemCount(1);// 设置布局里Item个数
        // 从设置Item数目的源码可以看出，一个FixLayoutHelper只能设置一个
//        @Override
//        public void setItemCount(int itemCount) {
//            if (itemCount > 0) {
//                super.setItemCount(1);
//            } else {
//                super.setItemCount(0);
//            }
//        }
        floatLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
        floatLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离
        floatLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
        floatLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比
        // floatLayoutHelper特有属性
        floatLayoutHelper.setDefaultLocation(300,300);// 设置布局里Item的初始位置

6. 栏格布局（ColumnLayoutHelper）

• 布局说明：该布局只设有一栏（该栏设置多个Item）

  可理解为只有一行的线性布局

/**
         设置栏格布局
         */
ColumnLayoutHelper columnLayoutHelper = new ColumnLayoutHelper();
// 创建对象
// 公共属性
columnLayoutHelper.setItemCount(3); // 设置布局里Item个数
columnLayoutHelper.setPadding(20, 20, 20, 20); // 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
columnLayoutHelper.setMargin(20, 20, 20, 20); // 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离
columnLayoutHelper.setBgColor(Color.GRAY); // 设置背景颜色
columnLayoutHelper.setAspectRatio(6); // 设置设置布局内每行布局的宽与高的比
// columnLayoutHelper特有属性
columnLayoutHelper.setWeights(new float[] {
    30,
    40,
    30
}); // 设置该行每个Item占该行总宽度的比例
// 同上面Weigths属性讲解

---

7. 通栏布局（SingleLayoutHelper）

• 布局说明：布局只有一栏，该栏只有一个Item

• 具体使用

/**
         设置通栏布局
         */
        SingleLayoutHelper singleLayoutHelper = new SingleLayoutHelper();
        // 公共属性
        singleLayoutHelper.setItemCount(3);// 设置布局里Item个数
        singleLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
        singleLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离
        singleLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
        singleLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比

---

8. 一拖N布局 （OnePlusNLayoutHelper）

• 布局说明：将布局分为不同比例，最多是1拖4。具体如下图

• 具体使用

/**
         设置1拖N布局
         */
        OnePlusNLayoutHelper onePlusNLayoutHelper = new OnePlusNLayoutHelper(5);
        // 在构造函数里传入显示的Item数
        // 最多是1拖4,即5个
        // 公共属性
        onePlusNLayoutHelper.setItemCount(3);// 设置布局里Item个数
        onePlusNLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
        onePlusNLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离
        onePlusNLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
        onePlusNLayoutHelper.setAspectRatio(3);// 设置设置布局内每行布局的宽与高的比

---

9. 吸边布局（StickyLayoutHelper）

• 布局说明：布局只有一个Item，显示逻辑如下：