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的过度绘制情况: