_V - Layout：淘宝、天猫都在用的Android UI框架 完全解析(1)

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，显示逻辑如下：

1. 当它包含的组件处于屏幕可见范围内时，像正常的组件一样随页面滚动而滚动
2. 当组件将要被滑出屏幕返回的时候，可以吸到屏幕的顶部或者底部，实现一种吸住的效果

• 示意图（吸在顶部）

• 具体使用

/**
设置吸边布局
*/
StickyLayoutHelper stickyLayoutHelper = new StickyLayoutHelper();

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

// 特有属性
stickyLayoutHelper.setStickyStart(true);
// true = 组件吸在顶部
// false = 组件吸在底部

stickyLayoutHelper.setOffset(100);// 设置吸边位置的偏移量

Adapter_StickyLayout = new MyAdapter(this, stickyLayoutHelper,1, listItem) {
// 设置需要展示的数据总数,此处设置是1
// 为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为Stick
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
if (position == 0) {
holder.Text.setText(“Stick”);
}
}
};

adapters.add(Adapter_StickyLayout) ;
// 将当前的Adapter加入到Adapter列表里

stickyStart、 offset属性说明

• 作用：

1. stickyStart：设置吸边位置

当视图的位置在屏幕范围内时，视图会随页面滚动而滚动；当视图的位置滑出屏幕时，StickyLayoutHelper会将视图固定在顶部（stickyStart = true）或 底部（stickyStart = false）

2. offset：设置吸边的偏移量

• 具体使用

// 接口示意
public void setStickyStart(boolean stickyStart)
public void setOffset(int offset)

// 具体使用
stickyLayoutHelper.setStickyStart(true);
// true = 组件吸在顶部
// false = 组件吸在底部
stickyLayoutHelper.setOffset(100);// 设置吸边位置的偏移量

---

10. 瀑布流布局（StaggeredGridLayoutHelper）

• 布局说明：以网格的形式进行布局。与网格布局类似，区别在于：
• 网格布局每栏的Item高度是相等的；
• 瀑布流布局每栏的Item高度是可以不相等的。

• 具体使用

/**
设置瀑布流布局
*/

StaggeredGridLayoutHelper staggeredGridLayoutHelper = new StaggeredGridLayoutHelper();
// 创建对象

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

// 特有属性
staggeredGridLayoutHelper.setLane(3);// 设置控制瀑布流每行的Item数
staggeredGridLayoutHelper.setHGap(20);// 设置子元素之间的水平间距
staggeredGridLayoutHelper.setVGap(15);// 设置子元素之间的垂直间距

自定义布局（即自定义LayoutHelper）

除了使用系统提供的默认布局 LayoutHelper，开发者还可以通过自定义LayoutHelper从而实现自定义布局样式。有三种方式：

1. 继承BaseLayoutHelper：从上而下排列的顺序 & 内部 View可以按行回收的布局；主要实现layoutViews()、computeAlignOffset()等方法

LinearLayoutHelper、GridLayoutHelper都是采用该方法实现

2. 继承AbstractFullFillLayoutHelper：有些布局内部的 View 并不是从上至下排列的顺序（即 Adatper 里的数据顺序和物理视图顺序不一致，那么可能就不能按数据顺序布局和回收），需要一次性布局 & 回收。主要实现layoutViews()等方法

OnePlusNLayoutHelper采用该方法实现

3. 继承FixAreaLayoutHelper：fix 类型布局，子节点不随页面滚动而滚动。主要实现layoutViews()、beforeLayout()、afterLayout()等方法

FixLayoutHelper采用该方法实现

---

步骤5：将生成的LayoutHelper 交给Adapter，并绑定到RecyclerView 对象

此处的做法会因步骤3中Adapter的设置而有所不同

<-- Adapter继承 自 DelegateAdapter -->

// 步骤1：设置Adapter列表（同时也是设置LayoutHelper列表）
List<DelegateAdapter.Adapter> adapters = new LinkedList<>();

// 步骤2：创建自定义的Adapter对象 & 绑定数据 & 绑定上述对应的LayoutHelper
// 绑定你需要展示的布局LayoutHelper即可，此处仅展示两个。
MyAdapter Adapter_linearLayout = new MyAdapter(this, linearLayoutHelper，ListItem)；
// ListItem是需要绑定的数据（其实取决于你的Adapter如何定义）

MyAdapter Adapter_gridLayoutHelper = new MyAdapter(this, gridLayoutHelper，ListItem)；

// 步骤3：将创建的Adapter对象放入到DelegateAdapter.Adapter列表里
adapters.add（Adapter_linearLayout ) ;
adapters.add（Adapter_gridLayoutHelper ) ;

// 步骤4：创建DelegateAdapter对象 & 将layoutManager绑定到DelegateAdapter
DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager);

// 步骤5：将DelegateAdapter.Adapter列表绑定到DelegateAdapter
delegateAdapter.setAdapters(adapters);

// 步骤6：将delegateAdapter绑定到recyclerView
recyclerView.setAdapter(delegateAdapter);

<-- Adapter继承 自 VirtualLayoutAdapter -->

// 步骤1：设置LayoutHelper列表
List helpers = new LinkedList<>();

// 步骤2：绑定上述对应的LayoutHelper
helpers.add（Adapter_linearLayout ）；
helpers.add（Adapter_gridLayoutHelper ) ;

// 步骤3：创建自定义的MyAdapter对象 & 绑定layoutManager
MyAdapter myAdapter = new MyAdapter(layoutManager);

// 步骤4：将 layoutHelper 列表传递给 adapter
myAdapter.setLayoutHelpers(helpers);

// 步骤5：将adapter绑定到recyclerView
recycler.setAdapter(myAdapter);

至此，使用过程讲解完毕。

---

6. 实例说明

• V-Layout的优点在于快速的组合不同布局
• 下面，我将根据上面的步骤说明，用一个实例来使用 V - Layout快速组合布局

步骤1：在Android - Gradle加入依赖

compile (‘com.alibaba.android:vlayout:1.0.3@aar’) {
transitive = true
}

步骤2：定义主 xml布局

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.RecyclerView
android:id=“@+id/my_recycler_view”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:scrollbars=“horizontal” />

步骤3：定义 RecyclerView每个子元素（ Item ）的xml布局

item.xml

此处定义的 Item 布局是常用的 上字下图

<?xml version="1.0" encoding="utf-8"?>

步骤4：设置Adapter

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

1. 继承 自 DelegateAdapter

此处主要以该方式进行演示

2. 继承 自 VirtualLayoutAdapter

• 具体使用

MyAdapter.java

public class MyAdapter extends DelegateAdapter.Adapter<MyAdapter.MainViewHolder> {

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级安卓工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Android移动开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注Android）

egateAdapter`

此处主要以该方式进行演示

2. 继承 自 VirtualLayoutAdapter

• 具体使用

MyAdapter.java

public class MyAdapter extends DelegateAdapter.Adapter<MyAdapter.MainViewHolder> {

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级安卓工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Android移动开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-Ttm7fDRC-1710929827672)]
[外链图片转存中…(img-hzoFJIAY-1710929827673)]
[外链图片转存中…(img-ZWT5wyTq-1710929827673)]
[外链图片转存中…(img-nWZoHe9Y-1710929827673)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注Android）
[外链图片转存中…(img-5bdNAzpd-1710929827673)]