阿里布局

还需整理

1. 线性布局（LinearLayoutHelper）

/** 设置线性布局 */

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()方法返回的数量不同，会取决于后者

b. Adding & Margin属性

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

Padding：是 LayoutHelper 的子元素相对 LayoutHelper 边缘的距离；

Margin：是 LayoutHelper 边缘相对父控件（即RecyclerView）的距离。

// 具体使用 linearLayoutHelper.setPadding(10,10,10,10);

// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离

linearLayoutHelper.setMargin(10,10,10,10);

// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离

c. bgColor属性

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

// 具体使用 linearLayoutHelper.setBgColor(Color.YELLOW);

d. aspectRatio属性

  • 作用：设置布局内每行布局的宽与高的比。
  • 具体使用

((VirutalLayoutManager.LayoutParams) layoutParams).mAspectRatio

// 视图的LayoutParams定义的aspectRatio

// 在LayoutHelper计算出视图宽度之后，用来确定视图高度时使用的，它会覆盖通过LayoutHelper的aspectRatio计算出来的视图高度，因此具备更高优先级。

// 具体使用

linearLayoutHelper.setAspectRatio(6);

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

a. dividerHeight属性

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

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

  • // 具体使用 linearLayoutHelper.setDividerHeight(1);
  • 布局说明：布局里的Item以网格的形式进行排列
  • 具体使用

2. 网格布局（GridLayout）

/** 设置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个网格

}

}

});

1.GridLayoutHelper布局的特有属性说明

a. weights属性

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

// 具体使用 gridLayoutHelper.setWeights(new float[]{40, 30, 30});

b. vGap、hGap属性

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

// 具体使用 gridLayoutHelper.setVGap(20);// 控制子元素之间的垂直间距 gridLayoutHelper.setHGap(20);// 控制子元素之间的水平间距

c. spanCount、spanSizeLookup属性

  • 作用：

spanCount：设置每行多少个网格

spanSizeLookup：设置每个 Item占用多少个网格（默认= 1）

// 具体使用 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. 否则会在屏幕上留空白区域。

// 具体使用 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个数

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

1.FixLayoutHelper特有属性说明

a. AlignType、x、y属性

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

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

  1. x：基准位置的横向偏移量
  2. y：基准位置的纵向偏移量
  • 作用对象：FixLayoutHelper, ScrollFixLayoutHelper, FloatLayoutHelper的属性

// 具体使用 fixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT); fixLayoutHelper.setX(30); fixLayoutHelper.setY(50);

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

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

固定在屏幕某个位置，且不可拖拽 & 不随页面滚动而滚动（继承自固定布局（FixLayoutHelper））

唯一不同的是，可以自由设置该Item什么时候显示（到顶部显示 / 到底部显示），可如下图：（左上角）

需求场景：到页面底部显示”一键到顶部“的按钮功能

/** 设置可选固定布局 */

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只能设置一个 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的显示模式

1.ScrollFixLayoutHelper特有属性说明

a. AlignType、x、y属性

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

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

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

// 具体使用 ScrollFixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT); ScrollFixLayoutHelper.setX(30); ScrollFixLayoutHelper.setY(50);

b. ShowType属性

作用：设置Item的显示模式

共有三种显示模式

SHOW_ALWAYS：永远显示(即效果同固定布局)

SHOW_ON_ENTER：默认不显示视图，当页面滚动到该视图位置时才显示；

SHOW_ON_LEAVE：默认不显示视图，当页面滚出该视图位置时才显示

// 具体使用

scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);

5. 浮动布局（FloatLayoutHelper）

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

/** 设置浮动布局 */

FloatLayoutHelper floatLayoutHelper = new FloatLayoutHelper();

// 创建FloatLayoutHelper对象

// 公共属性

floatLayoutHelper.setItemCount(1);// 设置布局里Item个数

// 从设置Item数目的源码可以看出，一个FixLayoutHelper只能设置一个        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列表里

1.stickyStart、 offset属性说明

作用：

stickyStart：设置吸边位置

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

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);// 设置子元素之间的垂直间距

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

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

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

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

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

OnePlusNLayoutHelper采用该方法实现

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

FixLayoutHelper采用该方法实现

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

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

<-- 方式1：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);

<-- 方式2：Adapter继承 自 VirtualLayoutAdapter -->

// 步骤1：设置LayoutHelper列表

List<LayoutHelper> 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);

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

最近淘宝出了vlayout,刚开始看淘宝的文档的时候还是有点懵，后来自己也总结规划了一下，写了一个比较好看的demo，顺便在这里总结一下。

VLayout是什么，说白了就是用一个原生RecycelerView加上VLayout来实现在一个页面上比较复杂的布局并且有一个比较好的复用，在RecyclerView里同时有GridLayout布局，瀑布流布局，浮动布局等VLayout提供的九大布局，这也是淘宝客户端首页加载不同布局的方法。

好了，简单介绍到这里，首先我们先导入VLayout:

compile (‘com.alibaba.android:vlayout:版本@aar‘) {

transitive = true

}

具体的版本请看github里VLayout给出的版本号。现在最新是1.0.6

接着我们就可以开始引用VLayout了,VLayout的通用代码如下:

VirtualLayoutManager manager = new VirtualLayoutManager(this);

recyclerview.setLayoutManager(manager);

DelegateAdapter adapter =new DelegateAdapter(manager, true);

  • 其中VirtualLayoutManager它继承自LinearLayoutManager；引入了 LayoutHelper 的概念，它负责具体的布局逻辑；VirtualLayoutManager管理了一系列LayoutHelper，将具体的布局能力交给LayoutHelper来完成。
  • DelegateAdapter是VLayout专门为LayoutHelper定制的Adapter，我们把装载有各种布局的LayoutHelper的Adapter放进DelegateAdapter里最后在RecyclerView.setAdapter(DelegateAdapter);就可以加载出复杂的布局。
  • 或许你们会问什么是LayoutHelper，这个问题问得好，就是VLayout提供的九种默认通用布局，解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等具体,名称和功能如下:
  1. LinearLayoutHelper: 线性布局
  2. GridLayoutHelper: Grid布局， 支持横向的colspan
  3. StaggeredGridLayoutHelper: 瀑布流布局，可配置间隔高度/宽度
  4. FixLayoutHelper: 固定布局，始终在屏幕固定位置显示
  5. ScrollFixLayoutHelper: 固定布局，但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等
  6. FloatLayoutHelper: 浮动布局，可以固定显示在屏幕上，但用户可以拖拽其位置
  7. ColumnLayoutHelper: 栏格布局，都布局在一排，可以配置不同列之间的宽度比值
  8. SingleLayoutHelper: 通栏布局，只会显示一个组件View
  9. OnePlusNLayoutHelper: 一拖N布局，可以配置1-5个子元素
  10. StickyLayoutHelper: stikcy布局， 可以配置吸顶或者吸底

这就是九种布局对应的类，我们可以用着九个类实现各种复杂的布局，下面我会一一介绍每个布局和效果，以便更直观的看到效果:

  • LinearLayoutHelper: 线性布局，就是实现ListView的效果很简单，直接看代码:

public class LinearLayoutHelperActivity extends Activity{

public static RecyclerView recyclerview;

public static DelegateRecyclerAdapter delegateRecyclerAdapter;

public DelegateAdapter adapter;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.layout_main);

recyclerview=(RecyclerView)findViewById(R.id.recyclerview);

VirtualLayoutManager manager = new VirtualLayoutManager(this);

recyclerview.setLayoutManager(manager);

adapter =new DelegateAdapter(manager, true);

adapter.addAdapter(init(this));

recyclerview.setAdapter(adapter);

}

public static DelegateRecyclerAdapter init(Context context){

LinearLayoutHelper linearLayoutHelper=new LinearLayoutHelper();

//设置间隔高度

linearLayoutHelper.setDividerHeight(5);

//设置布局底部与下个布局的间隔

linearLayoutHelper.setMarginBottom(20);

//设置间距

linearLayoutHelper.setMargin(20,20,20,20);

delegateRecyclerAdapter=new DelegateRecyclerAdapter(context,linearLayoutHelper,"LinearLayoutHelper");

return delegateRecyclerAdapter;

}

}

而DelegateRecyclerAdapter的代码如下:

public class DelegateRecyclerAdapter extends DelegateAdapter.Adapter{

public Context context;

private LayoutHelper helper;

private LayoutInflater inflater;

private String name;

public DelegateRecyclerAdapter(Context context,LayoutHelper helper,String name){

this.inflater = LayoutInflater.from(context);

this.helper = helper;

this.context=context;

this.name=name;

}

@Override

public LayoutHelper onCreateLayoutHelper() {

return this.helper;

}

@Override

public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

return new MyViewHolder(inflater.inflate(R.layout.layout_item,parent,false));

}

@Override

public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

if(position%2==0){

holder.itemView.setBackgroundColor(0xaa3F51B5);

}else{

holder.itemView.setBackgroundColor(0xccFF4081);

}

MyViewHolder myViewHolder=(MyViewHolder)holder;

myViewHolder.name.setText(name+position+"");

}

@Override

public int getItemCount() {

return 9;

}

public class MyViewHolder extends RecyclerView.ViewHolder{

public TextView name;

public MyViewHolder(View itemView) {

super(itemView);

name=(TextView)itemView.findViewById(R.id.item_name);

}

}

}

这里需要说的就是在Adapter类里我们需要继承Vlayout的DelegateAdapter.Adapter类，然后多回调onCreateLayoutHelper()方法，返回我们传进去的LayoutHelper类，其他的和普通的RecyclerView是一个样的。DelegateRecyclerAdapter在我们后面也有多次引用。其他要说的就是我们初始完LinearLayoutHelper后生产DelegateAdapter.Adapter类再赋给DelegateAdapter，然后然后RecyclerView在setAdapter()就这样。

  • GridLayoutHelper: Grid布局， 支持横向的colspan，也很简单，代码如下:

public static DelegateRecyclerAdapter init(Context context){

GridLayoutHelper gridLayoutHelper=new GridLayoutHelper(4);

//自定义设置某些位置的Item的占格数

gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() {

@Override

public int getSpanSize(int position) {

if (position >5) {

return 2;

}else {

return 1;

}

}

});

//是否填满可用区域

gridLayoutHelper.setAutoExpand(false);

delegateRecyclerAdapter=new DelegateRecyclerAdapter(context,gridLayoutHelper,"GridLayoutHelper");

return delegateRecyclerAdapter;

}

其他代码很上面的一样。

  • StaggeredGridLayoutHelper: 瀑布流布局，可配置间隔高度/宽度,代码如下:

public static StaggeredAdapter init(Context context){

StaggeredGridLayoutHelper staggeredGridLayoutHelper=new StaggeredGridLayoutHelper(3,20);

staggeredAdapter=new StaggeredAdapter(context,staggeredGridLayoutHelper,"StaggeredGridLayoutHelper");

return staggeredAdapter;

}

在StaggeredAdapter里我们在onBindViewHolder里用

ViewGroup.LayoutParams layoutParams = ((MyViewholder) holder).text.getLayoutParams();

layoutParams.height = 260 + position % 7 * 20;

((MyViewholder) holder).text.setLayoutParams(layoutParams);

来实现高度不一致，效果如下:

  • FixLayoutHelper: 固定布局，始终在屏幕固定位置显示,代码如下：

public static FixLayoutAdapter initFixLayoutHelper(Context context){

FixLayoutHelper fixLayoutHelper=new FixLayoutHelper(FixLayoutHelper.BOTTOM_LEFT, 200, 200);

FixLayoutAdapter fixLayoutAdapter=new FixLayoutAdapter(context,fixLayoutHelper,"fixlayouthelp");

return fixLayoutAdapter;

}

除了有FixLayoutHelper.BOTTOM_LEFT之外，还有FixLayoutHelper.TOP_LEFT，FixLayoutHelper.BOTTOM_RIGHT，FixLayoutHelper.TOP_RIGHT, 200,200分别对应偏移量x,y，效果如下:

fixlayouthelp区域块就是FixLayoutHelper了。

  • ScrollFixLayoutHelper: 固定布局，但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等，代码如下:

public static FixLayoutAdapter initScrollFixLayout(Context context){

ScrollFixLayoutHelper scrollFixLayoutHelper = new ScrollFixLayoutHelper(15,15);

//show_always:总是显示

//show_on_enter:当页面滚动到这个视图的位置的时候，才显示

//show_on_leave:当页面滚出这个视图的位置的时候显示

scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);

return new FixLayoutAdapter(context, scrollFixLayoutHelper,"scrollfixlayouthelper");

}

代码很简单，看效果：

ScrollFixLayoutHelper继承自FixLayoutHelper，不同的是showType来决定这个布局的Item是否显示，可以用来做一些返回顶部之类的按钮，

  1. SHOW_ALWAYS：与FixLayoutHelper的行为一致，固定在某个位置；
  2. SHOW_ON_ENTER：默认不显示视图，当页面滚动到这个视图的位置的时候，才显示；
  3. SHOW_ON_LEAVE：默认不显示视图，当页面滚出这个视图的位置的时候显示；

这里效果不明显，等集合所有布局之后大家就可以看很直观的效果

  • FloatLayoutHelper: 浮动布局，可以固定显示在屏幕上，但用户可以拖拽其位置，代码如下：

public static FixLayoutAdapter initFloatLayoutHelper(Context context){

FloatLayoutHelper floatLayoutHelper=new FloatLayoutHelper();

floatLayoutHelper.setDefaultLocation(20,250);

FixLayoutAdapter fixLayoutAdapter=new FixLayoutAdapter(context,floatLayoutHelper,"floatlayouthelper");

return  fixLayoutAdapter;

}

其中setDefaultLocation()使用来设置他的初始位置的，setAlignType（表示吸边时的基准位置，默认左上角，有四个取值，分别是TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT）

  • ColumnLayoutHelper: 栏格布局，都布局在一排，可以配置不同列之间的宽度比值，代码如下:

public static ColumnLayoutAdapter initColumnLayout(Context context){

ColumnLayoutHelper columnLayoutHelper=new ColumnLayoutHelper();

columnLayoutHelper.setWeights(new float[]{20,20,20,20,20});

columnLayoutHelper.setMarginBottom(20);

ColumnLayoutAdapter columnLayoutAdapter=new ColumnLayoutAdapter(context,columnLayoutHelper,"ColumnLayoutHelper");

return columnLayoutAdapter;

}

ColumnLayoutHelper需要设置Weights，是一个float数组，总和为100，否则超出布局。效果图如下：

  • SingleLayoutHelper: 通栏布局，只会显示一个组件View，这里建议设置Adapter个数为1，因为他就只会显示一栏，假如有多个可能会出现一些问题，本人实测个数多时会出点问题。代码如下：

public static SingleLayoutAdapter initSingleLayout(Context context){

SingleLayoutHelper singleLayoutHelper=new SingleLayoutHelper();

//设置间距

singleLayoutHelper.setMargin(20,20,20,20);

SingleLayoutAdapter singleLayoutAdapter=new SingleLayoutAdapter(context,singleLayoutHelper,"SingleLayoutHelper");

return singleLayoutAdapter;

}

效果图如下:

  • OnePlusNLayoutHelper: 一拖N布局，可以配置1-5个子元素,根据个数的不同所呈现的界面也是不一样的,不同个数效果如下：

//个数为1

//个数为2

//个数为3

代码如下：

public static OnePlusNLayoutAdapter initOnePlusNLayout(Context context){

OnePlusNLayoutHelper onePlusNLayoutHelper=new OnePlusNLayoutHelper();

//设置布局底部与下个布局的间隔

onePlusNLayoutHelper.setMarginBottom(20);

OnePlusNLayoutAdapter onePlusNLayoutAdapter=new OnePlusNLayoutAdapter(context,onePlusNLayoutHelper,"OnePlusNLayoutHelper");

return onePlusNLayoutAdapter;

}

  • StickyLayoutHelper: stikcy布局， 可以配置吸顶或者吸底，代码如下:

public static StickyLayoutAdapter initStickyLayoutHelper(Context context){

StickyLayoutHelper stickyLayoutHelper=new StickyLayoutHelper();

return new StickyLayoutAdapter(context,stickyLayoutHelper);

}

  • 最后假如只是单单加载其中的一个布局其实意义不大，VLayout只最大的意义在于加载多个布局并且保持一个很好的复用，所以我们把上面的所有布局一起加载起来，代码如下：

public class AllActivity extends Activity{

private RecyclerView recyclerview;

private DelegateAdapter delegateAdapter ;

final List<DelegateAdapter.Adapter> adapters = new LinkedList<>();

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.layout_main);

recyclerview=(RecyclerView)findViewById(R.id.recyclerview);

initView();

}

public void initView(){

RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();

recyclerview.setRecycledViewPool(viewPool);

viewPool.setMaxRecycledViews(0,10);

adapters.add(LinearLayoutHelperActivity.init(this));

adapters.add(ColumnLayoutHelperActivity.initColumnLayout(this));

adapters.add(GridLayoutHelperActivity.init(this));

adapters.add(FixLayoutHelperActivity.initFixLayoutHelper(this));

adapters.add(ScrollFixLayoutHelperActivity.initScrollFixLayout(this));

adapters.add(SingleLayoutHelperActivity.initSingleLayout(this));

adapters.add(OnePlusNLayoutHelperActivity.initOnePlusNLayout(this));

adapters.add(FloatLayoutHelperActivity.initFloatLayoutHelper(this));

adapters.add(StickyLayoutHelperActivity.initStickyLayoutHelper(this));

adapters.add(StaggeredGridLayoutHelperActivity.init(this));

VirtualLayoutManager manager = new VirtualLayoutManager(this);

recyclerview.setLayoutManager(manager);

delegateAdapter = new DelegateAdapter(manager);

delegateAdapter.setAdapters(adapters);

recyclerview.setAdapter(delegateAdapter);

}

}

要注意的是DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager, hasConsistItemType);里当hasConsistItemType=true的时候，不论是不是属于同一个子adapter，相同类型的item都能复用。表示它们共享一个类型。 当hasConsistItemType=false的时候，不同子adapter之间的类型不共享。

原文地址：https://www.cnblogs.com/chhom/p/9068375.html

时间： 2024-08-08 02:53:47

阿里布局的相关文章

从神马搜索到阿里上市 马云到底想要干什么?

笔者注:不疯魔不成活,这句话往往形容那些处事怪异,最后却走向成功的人.而就目前来看全球绝大多数成功的名流,都属于这种偏执型的人.乔布斯.扎克伯格.马云等,莫不如此.而近来,在国内互联网领域,最引人注意的无疑就是马云及阿里巴巴.虽然马云已经在明面上隐居幕后,但在阿里巴巴上市的关键时刻,他依然为阿里定下了"增肥"的路子. 事实上,阿里巴巴"增肥"的路子早就已经可以看出端倪.在上市消息传出以前,投资新浪微博.收购高德.战略投资UC.在移动端布局"来往"

从IaaS到AI，马云为何让阿里云去扛人工智能大旗？

免费开通大数据服务:https://www.aliyun.com/product/odps 绝大多数人对阿里云的定位仍是国内市场最大的IaaS提供商.不过,随着国内人工智能市场在2016年迎来爆发,阿里开始在人工智能领域发力,阿里云的这一角色正在悄然转变. 布局AI领域,阿里云扛起阿里人工智能大旗 虽然阿里不是BAT三座山头中在人工智能领域的声势最旺的那个(百度躺枪),但事实上阿里从2015年也已经开始了人工智能领域的布局. 2015年6月,阿里巴巴联合富士康以145亿日元的价码战略投资软银旗下

阿里大动物园热闹PK，马云最初的梦想是动物园园长？

阿里大动物园加上新来的飞猪朋友已是热闹无比,天猫商城.菜鸟网络.虾米音乐.蚂蚁金服.神马搜索.飞猪旅行,大大小小.飞禽走兽.种类齐全,看来马云这个动物园园长当的很乐呵. 天猫商城 "天猫",英文Tmall,是一个综合性购物网站.建立于2008年4月,2012年1月11日正式更名为"天猫",是马云全新打造的B2C平台,也是中国线上购物的地标网站,亚洲最大的综合性购物平台,拥有10万多品牌商家. 命名缘由:杭州方言中天猫的发音与Tmall相同,猫是性感而有品位的,天猫网

阿里买来的生态，投出来的局

阿里巴巴(马云)最近频繁的投资并购引起了各界的关注,几乎每月都会有阿里的重磅投资并购新闻刊登于各大财经头条,从2014年初入股中信21世纪.零售百货银泰,再到4月与优酷联姻.收购高德地图,6月又鲸吞UC.搅局恒大足球……完全停不下来. 花了周末一整个下午去梳理了阿里近十年主要的投资并购事件,让我非常震惊.如果单看如下统计表,很多人肯定会认为这是一家投资公司而不是电商企业. 阿里近10年的投资收购事件 特 别是,阿里在上市前投资并购动作频繁,不完全统计,仅从2013年起到最近6月,阿里发起的投资收

站在3000亿美元路口，阿里、腾讯谁将笑到最后

5月18日晚,阿里集团2017财年第四季度财报及2017财年全年业绩终于公布.在收入.盈利.现金流等核心指标上,阿里巴巴全面领先腾讯.其中营收方面,阿里全年营收收入1582.73亿元,超出腾讯4%. 作为目前中概股中两只最抢眼互联网公司.起家于B2B电商的阿里,和起家于社交工具的腾讯虽然现在市值都已到达3000亿美元,但两家如何稳坐3000点,并冲刺4000亿美元市值,值得玩味. 腾讯连接世界  阿里改变世界 通过两家公司财报可以看到,腾讯接近一半营收来源于网络游戏,另一半则是社交(QQ.微信等

阿里影业：搭积木的人

与盛大的多领域投资不同,阿里要做的,是在影视领域进行单点突破,搭建起一座全产业链的积木塔层.尽管愿景美好,但回归现实,阿里的基因仍是电商,这个与电影的跨界动作要完成得漂亮并不简单. 文/张书乐刊载于<商界评论>2015年4期 保利博纳影业总裁于冬在去年上海电影节上曾说:"电影公司未来都将给BAT 打工!"他预言中国的"八大公司"可能最后变成三大公司,就是BAT 的三大电影集团. 言犹在耳,预言却几近成真.最迅猛发力的则是阿里巴巴.3 月4 日,光线传媒发

上市欢庆后 阿里还有许多正事要做

阿里成功登陆纽交所,有无数人为之狂欢,但这事与大多数人根本没有直接关系,大家也只是凑凑热闹乐呵一下罢了. 阿里上市算是对过去15年的一个总结,其实上市与否对于阿里没有太大的变化,阿里还是那个阿里,只是那些即将成为富翁的阿里人成为了真正的富翁,另外,困扰阿里的控制权之争也终于得到了妥善解决,不过,我认为对于阿里来讲最主要的是在集中精力完成了上市之后,可以有更多的精力开始关注下一步的发展了. 从阿里的招股书来看,目前资本市场追捧阿里更多是为其在电商市场获得的可观收益,而阿里在其他业务上的布局还并未赢

阿里腾讯的文化产业路线

随着阿里入股光线传媒,阿里的文化帝国已经初长成,可以说从内容制作.发行到渠道.终端均有布局.对于阿里布局文化产业我们可以找出很多理由,但毫无疑问的是马云的个人爱好在其中占了相当大的比重. 正如他之前非常理想化的表述:中国现在存在的问题是,口袋满了,脑袋却空了.如果文化产业发展不起来,中国就是个暴发户国家,是不能持久的.好莱坞对美国最大的贡献是传递美国价值观,客观上形成了美国独特的价值体系.所以,中国也需要把这些价值挖掘出来.阿里巴巴会加大对文化产业的投资. 对于腾讯来说,深耕这一领域已经很久很久

微信支付与支付宝钱包的竞争分析

NO1: 十九世纪七十年代起,“物竞天择,适者生存,优胜劣汰”已逐渐成为现代生物学的口号.而今,不知不觉中,它似乎也成了当代社会学的口号.罗素说:“竞争一直是,甚至从人类起源起就是对大部分激烈活动的剌激物.”所谓“长江后浪推前浪”,在人类资讯的迅速积累之下,如果不能追上时代,自然就要被淘汰了.竞争,已经成了当代社会政治经济发展的重要基础与必然趋势. 从远古时期的以物换物,到后来货币的出现,直到宋朝时第一张纸币“交子”问世,随着经济的不断发展,货币的形式也在不断地变化着. 2003年10月18日,