vlayout

作者: wintersweett | 来源:发表于2017-08-23 15:28 被阅读0次

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

    相关文章

      网友评论

          本文标题:vlayout

          本文链接:https://www.haomeiwen.com/subject/ommddxtx.html