vlayout

Tangram是阿里出品、用于快速实现组合布局的框架模型,在手机天猫Android&iOS版 内广泛使用

该框架提供一系列基本单元布局,通过快速拼装就能搭建出一个具备多种布局的页面,就像使用七巧板 通过现有板块 快速拼凑出 多样的形状一样。


在性能方面,希望 贴近Native开发,重点:页面渲染效率 & 组件回收复用

页面渲染:为了提升渲染效率,Tangram将在视图渲染之前把大量的计算工作在VM中完成,并缓存在VM组成的树形结构里。

回收和复用——Tangram在Android和iOS平台上分别开发了VLayout和LazyScroll两个基础组件,通过一个双索引可见区域组件发现算法,实现了跨父节点组件的高效回收和复用。

对于Android:采用基于RecyclerView+自定义LayoutManager的实现方案


http://www.jianshu.com/p/6b658c8802d1


如下是代码实现:其中主布局中只是v7下的Recyclerview,item为一个TextView和一个ImageView

package com.example.user.myapplication.v_layout_test;

import android.graphics.Color;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.RecyclerView;

import android.view.View;

import android.view.ViewGroup;

import android.widget.Toast;

import com.alibaba.android.vlayout.DelegateAdapter;

import com.alibaba.android.vlayout.VirtualLayoutManager;

import com.alibaba.android.vlayout.layout.ColumnLayoutHelper;

import com.alibaba.android.vlayout.layout.FixLayoutHelper;

import com.alibaba.android.vlayout.layout.FloatLayoutHelper;

import com.alibaba.android.vlayout.layout.GridLayoutHelper;

import com.alibaba.android.vlayout.layout.LinearLayoutHelper;

import com.alibaba.android.vlayout.layout.OnePlusNLayoutHelper;

import com.alibaba.android.vlayout.layout.ScrollFixLayoutHelper;

import com.alibaba.android.vlayout.layout.SingleLayoutHelper;

import com.alibaba.android.vlayout.layout.StaggeredGridLayoutHelper;

import com.alibaba.android.vlayout.layout.StickyLayoutHelper;

import com.example.user.myapplication.R;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.LinkedList;

import java.util.List;

/**

* v_layout

*/

public class TangramMainActivity extends AppCompatActivity implements MyItemClickListener {

RecyclerView recyclerView;

MyAdapter Adapter_linearLayout,Adapter_GridLayout,Adapter_FixLayout,Adapter_ScrollFixLayout

,Adapter_FloatLayout,Adapter_ColumnLayout,Adapter_SingleLayout,Adapter_onePlusNLayout,

Adapter_StickyLayout,Adapter_StaggeredGridLayout;

private ArrayList> listItem;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_tangram_main);

getWindow().setBackgroundDrawable(null);

/**

*步骤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:设置组件复用回收池

* */

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

recyclerView.setRecycledViewPool(viewPool);

viewPool.setMaxRecycledViews(0, 10);

/**

*步骤3:设置需要存放的数据

* */

listItem = new ArrayList>();

for (int i = 0; i < 100; i++) {

HashMap map = new HashMap();

map.put("ItemTitle", "第" + i + "行");

map.put("ItemImage", R.mipmap.ic_launcher);

listItem.add(map);

}

/**

*步骤4:根据数据列表,创建对应的LayoutHelper

* */

//为了展示效果,此处将上面介绍的所有布局都显示出来

/**

设置线性布局

*/

LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper();

//创建对应的LayoutHelper对象

//公共属性

linearLayoutHelper.setItemCount(4);//设置布局里Item个数

linearLayoutHelper.setPadding(20, 20, 20, 20);//设置LayoutHelper的子元素相对LayoutHelper边缘的距离

linearLayoutHelper.setMargin(20, 20, 20, 20);//设置LayoutHelper边缘相对父控件(即RecyclerView)的距离

// linearLayoutHelper.setBgColor(Color.GRAY);//设置背景颜色

linearLayoutHelper.setAspectRatio(6);//设置设置布局内每行布局的宽与高的比

// linearLayoutHelper特有属性

linearLayoutHelper.setDividerHeight(10);

//设置间隔高度

//设置的间隔会与RecyclerView的addItemDecoration()添加的间隔叠加.

linearLayoutHelper.setMarginBottom(100);

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

//创建自定义的Adapter对象&绑定数据&绑定对应的LayoutHelper进行布局绘制

Adapter_linearLayout  = new MyAdapter(this, linearLayoutHelper, 4, listItem) {

//参数2:绑定绑定对应的LayoutHelper

//参数3:传入该布局需要显示的数据个数

//参数4:传入需要绑定的数据

//通过重写onBindViewHolder()设置更丰富的布局效果

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

//为了展示效果,将布局的第一个数据设置为linearLayout

if (position == 0) {

holder.Text.setText("Linear");

}

//为了展示效果,将布局里不同位置的Item进行背景颜色设置

//                if (position < 2) {

//                    holder.itemView.setBackgroundColor(0x66cc0000 + (position - 6) * 128);

//                } else if (position % 2 == 0) {

//                    holder.itemView.setBackgroundColor(0xaa22ff22);

//                } else {

//                    holder.itemView.setBackgroundColor(0xccff22ff);

//                }

holder.itemView.setBackgroundColor(Color.GRAY);

}

};

Adapter_linearLayout.setOnItemClickListener(this);

//设置每个Item的点击事件

/**

设置吸边布局

*/

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");

}

}

};

Adapter_StickyLayout.setOnItemClickListener(this);

//设置每个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只能设置一个

//        @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_LEAVE);//设置Item的显示模式

Adapter_ScrollFixLayout  = new MyAdapter(this, scrollFixLayoutHelper,1, listItem) {

//设置需要展示的数据总数,此处设置是1

//为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为scrollFix

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

if (position == 0) {

holder.Text.setText("scrollFix");

}

}

};

Adapter_ScrollFixLayout.setOnItemClickListener(this);

//设置每个Item的点击事件

/**

设置Grid布局

*/

GridLayoutHelper gridLayoutHelper = new GridLayoutHelper(3);

//在构造函数设置每行的网格个数

//公共属性

gridLayoutHelper.setItemCount(36);//设置布局里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个网格

}

}

});

Adapter_GridLayout  = new MyAdapter(this, gridLayoutHelper,36, listItem) {

//设置需要展示的数据总数,此处设置是8,即展示总数是8个,然后每行是4个(上面设置的)

//为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为gridLayoutHelper

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

//为了展示效果,将布局里不同位置的Item进行背景颜色设置

//                if (position < 2) {

//                    holder.itemView.setBackgroundColor(0x66cc0000 + (position - 6) * 128);

//                } else if (position % 2 == 0) {

//                    holder.itemView.setBackgroundColor(0xaa22ff22);

//                } else {

//                    holder.itemView.setBackgroundColor(0xccff22ff);

//                }

holder.itemView.setBackgroundColor(Color.GRAY);

if (position == 0) {

holder.Text.setText("Grid");

}

}

};

Adapter_GridLayout.setOnItemClickListener(this);

//设置每个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

Adapter_FixLayout  = new MyAdapter(this, fixLayoutHelper,1, listItem) {

//设置需要展示的数据总数,此处设置是1

//为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为Fix

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

if (position == 0) {

holder.Text.setText("Fix");

}

}

};

Adapter_FixLayout.setOnItemClickListener(this);

//设置每个Item的点击事件

/**

设置浮动布局

*/

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的初始位置

Adapter_FloatLayout = new MyAdapter(this, floatLayoutHelper,1, listItem) {

//设置需要展示的数据总数,此处设置是1

//为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为float

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(500,1000);

holder.itemView.setLayoutParams(layoutParams);

//        holder.itemView.setBackgroundColor(Color.RED);

holder.itemView.setBackgroundColor(Color.GRAY);

if (position == 0) {

holder.Text.setText("float");

}

}

};

Adapter_FloatLayout.setOnItemClickListener(this);

//设置每个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占该行总宽度的比例

Adapter_ColumnLayout = new MyAdapter(this, columnLayoutHelper,3, listItem) {

//设置需要展示的数据总数,此处设置是3

//为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为Column

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

if (position == 0) {

holder.Text.setText("Column");

}

}

};

Adapter_ColumnLayout.setOnItemClickListener(this);

//设置每个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);//设置设置布局内每行布局的宽与高的比

Adapter_SingleLayout = new MyAdapter(this, singleLayoutHelper,1, listItem) {

//设置需要展示的数据总数,此处设置是1

//为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为Single

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

if (position == 0) {

holder.Text.setText("Single");

}

}

};

Adapter_SingleLayout.setOnItemClickListener(this);

//设置每个Item的点击事件

/**

设置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);//设置设置布局内每行布局的宽与高的比

Adapter_onePlusNLayout = new MyAdapter(this, onePlusNLayoutHelper,5, listItem) {

//设置需要展示的数据总数,此处设置是5,即1拖4

//为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为onePlus

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

if (position == 0) {

holder.Text.setText("onePlus");

}

}

};

Adapter_onePlusNLayout.setOnItemClickListener(this);

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

Adapter_StaggeredGridLayout = new MyAdapter(this, staggeredGridLayoutHelper,20, listItem) {

//设置需要展示的数据总数,此处设置是20

//通过重写onBindViewHolder()设置更加丰富的布局

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

super.onBindViewHolder(holder, position);

ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,150 +position % 5 * 20);

holder.itemView.setLayoutParams(layoutParams);

//为了展示效果,设置不同位置的背景色

//                if (position > 10) {

//                    holder.itemView.setBackgroundColor(0x66cc0000 + (position - 6) * 128);

//                } else if (position % 2 == 0) {

//                    holder.itemView.setBackgroundColor(0xaa22ff22);

//                } else {

//                    holder.itemView.setBackgroundColor(0xccff22ff);

//                }

holder.itemView.setBackgroundColor(Color.GRAY);

//为了展示效果,通过将布局的第一个数据设置为staggeredGrid

if (position == 0) {

holder.Text.setText("staggeredGrid");

}

}

};

Adapter_StaggeredGridLayout.setOnItemClickListener(this);

//设置每个Item的点击事件

/**

*步骤5:将生成的LayoutHelper交给Adapter,并绑定到RecyclerView对象

**/

// 1.设置Adapter列表(同时也是设置LayoutHelper列表)

List adapters = new LinkedList<>();

// 2.将上述创建的Adapter对象放入到DelegateAdapter.Adapter列表里

adapters.add(Adapter_linearLayout) ;

adapters.add(Adapter_StickyLayout) ;

adapters.add(Adapter_ScrollFixLayout) ;

adapters.add(Adapter_GridLayout) ;

adapters.add(Adapter_FixLayout) ;

adapters.add(Adapter_FloatLayout) ;

adapters.add(Adapter_ColumnLayout) ;

adapters.add(Adapter_SingleLayout) ;

adapters.add(Adapter_onePlusNLayout) ;

adapters.add(Adapter_StaggeredGridLayout) ;

//

// 3.创建DelegateAdapter对象&将layoutManager绑定到DelegateAdapter

DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager);

// 4.将DelegateAdapter.Adapter列表绑定到DelegateAdapter

delegateAdapter.setAdapters(adapters);

// 5.将delegateAdapter绑定到recyclerView

recyclerView.setAdapter(delegateAdapter);

//        /**

//        *步骤6:设置分割线& Item之间的间隔

//        **/

//        recyclerView.addItemDecoration(new DividerItemDecoration(this, layoutManager.getOrientation()));

//        //需要自定义类DividerItemDecoration

//        recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {

//            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

//                outRect.set(5, 5, 5, 5);

//            }

//        });

}

/**

*步骤7:实现Item点击事件

**/

//点击事件的回调函数

@Override

public void onItemClick(View view, int postion) {

System.out.println("点击了第"+postion+"行");

Toast.makeText(this, (String) listItem.get(postion).get("ItemTitle"), Toast.LENGTH_SHORT).show();

}

}




package com.example.user.myapplication.v_layout_test;

import android.content.Context;

import android.support.annotation.NonNull;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

import com.alibaba.android.vlayout.DelegateAdapter;

import com.alibaba.android.vlayout.LayoutHelper;

import com.example.user.myapplication.R;

import java.util.ArrayList;

import java.util.HashMap;

/**

*/

public class MyAdapter extends DelegateAdapter.Adapter {

//使用DelegateAdapter首先就是要自定义一个它的内部类Adapter,让LayoutHelper和需要绑定的数据传进去

//此处的Adapter和普通RecyclerView定义的Adapter只相差了一个onCreateLayoutHelper()方法,其他的都是一样的做法.

private ArrayList> listItem;

//用于存放数据列表

private Context context;

private LayoutHelper layoutHelper;

private RecyclerView.LayoutParams layoutParams;

private int count = 0;

private MyItemClickListener myItemClickListener;

//用于设置Item点击事件

//构造函数(传入每个的数据列表&展示的Item数量)

publicMyAdapter(Context context, LayoutHelper layoutHelper, int count, ArrayList> listItem) {

this(context, layoutHelper, count, new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 300), listItem);

}

publicMyAdapter(Context context, LayoutHelper layoutHelper, int count, @NonNull RecyclerView.LayoutParams layoutParams, ArrayList> listItem) {

this.context = context;

this.layoutHelper = layoutHelper;

this.count = count;

this.layoutParams = layoutParams;

this.listItem = listItem;

}

//把ViewHolder绑定Item的布局

@Override

public MainViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

return new MainViewHolder(LayoutInflater.from(context).inflate(R.layout.tangram_main_item, parent, false));

}

//此处的Adapter和普通RecyclerView定义的Adapter只相差了一个onCreateLayoutHelper()方法

@Override

public LayoutHelper onCreateLayoutHelper() {

return layoutHelper;

}

//绑定Item的数据

@Override

public void onBindViewHolder(MainViewHolder holder, int position) {

holder.Text.setText((String) listItem.get(position).get("ItemTitle"));

holder.image.setImageResource((Integer) listItem.get(position).get("ItemImage"));

}

//返回Item数目

@Override

public int getItemCount() {

return count;

}

//设置Item的点击事件

//绑定MainActivity传进来的点击监听器

public void setOnItemClickListener(MyItemClickListener listener) {

myItemClickListener = listener;

}

//定义Viewholder

public  class MainViewHolder extends RecyclerView.ViewHolder {

public TextView Text;

public ImageView image;

publicMainViewHolder(View root) {

super(root);

//绑定视图

Text = (TextView) root.findViewById(R.id.Item);

image = (ImageView) root.findViewById(R.id.Image);

root.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

if (myItemClickListener != null)

myItemClickListener.onItemClick(v, getPosition());

}

}

//监听到点击就回调MainActivity的onItemClick函数

);

}

public TextView getText() {

return Text;

}

}

}

如下图是过度绘制的颜色分类:其中蓝色、淡绿、淡红、深红代表了4种不同程度的overdraw情况,我们的目标就是尽量减少红色的overdraw,看到更多蓝色区域


如下是demo的过度绘制情况:

推荐阅读更多精彩内容