Tangram是阿里出品、用于快速實現(xiàn)組合布局的框架模型，在手機天貓Android&iOS版 內(nèi)廣泛使用
該框架提供一系列基本單元布局，通過快速拼裝就能搭建出一個具備多種布局的頁面，就像使用七巧板 通過現(xiàn)有板塊 快速拼湊出 多樣的形狀一樣。
在性能方面，希望 貼近Native開發(fā)，重點：頁面渲染效率 & 組件回收復(fù)用
頁面渲染：為了提升渲染效率，Tangram將在視圖渲染之前把大量的計算工作在VM中完成，并緩存在VM組成的樹形結(jié)構(gòu)里。
回收和復(fù)用——Tangram在Android和iOS平臺上分別開發(fā)了VLayout和LazyScroll兩個基礎(chǔ)組件，通過一個雙索引可見區(qū)域組件發(fā)現(xiàn)算法，實現(xiàn)了跨父節(jié)點組件的高效回收和復(fù)用。
對于Android：采用基于RecyclerView+自定義LayoutManager的實現(xiàn)方案
http://www.itdecent.cn/p/6b658c8802d1
如下是代碼實現(xiàn)：其中主布局中只是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：創(chuàng)建RecyclerView & VirtualLayoutManager對象并進行綁定
* */
recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
//創(chuàng)建RecyclerView對象
VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
//創(chuàng)建VirtualLayoutManager對象
//同時內(nèi)部會創(chuàng)建一個LayoutHelperFinder對象，用來后續(xù)的LayoutHelper查找
recyclerView.setLayoutManager(layoutManager);
//將VirtualLayoutManager綁定到recyclerView
/**
*步驟2：設(shè)置組件復(fù)用回收池
* */
RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
recyclerView.setRecycledViewPool(viewPool);
viewPool.setMaxRecycledViews(0, 10);
/**
*步驟3:設(shè)置需要存放的數(shù)據(jù)
* */
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:根據(jù)數(shù)據(jù)列表,創(chuàng)建對應(yīng)的LayoutHelper
* */
//為了展示效果,此處將上面介紹的所有布局都顯示出來
/**
設(shè)置線性布局
*/
LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper();
//創(chuàng)建對應(yīng)的LayoutHelper對象
//公共屬性
linearLayoutHelper.setItemCount(4);//設(shè)置布局里Item個數(shù)
linearLayoutHelper.setPadding(20, 20, 20, 20);//設(shè)置LayoutHelper的子元素相對LayoutHelper邊緣的距離
linearLayoutHelper.setMargin(20, 20, 20, 20);//設(shè)置LayoutHelper邊緣相對父控件（即RecyclerView）的距離
// linearLayoutHelper.setBgColor(Color.GRAY);//設(shè)置背景顏色
linearLayoutHelper.setAspectRatio(6);//設(shè)置設(shè)置布局內(nèi)每行布局的寬與高的比
// linearLayoutHelper特有屬性
linearLayoutHelper.setDividerHeight(10);
//設(shè)置間隔高度
//設(shè)置的間隔會與RecyclerView的addItemDecoration（）添加的間隔疊加.
linearLayoutHelper.setMarginBottom(100);
//設(shè)置布局底部與下個布局的間隔
//創(chuàng)建自定義的Adapter對象&綁定數(shù)據(jù)&綁定對應(yīng)的LayoutHelper進行布局繪制
Adapter_linearLayout? = new MyAdapter(this, linearLayoutHelper, 4, listItem) {
//參數(shù)2:綁定綁定對應(yīng)的LayoutHelper
//參數(shù)3:傳入該布局需要顯示的數(shù)據(jù)個數(shù)
//參數(shù)4:傳入需要綁定的數(shù)據(jù)
//通過重寫onBindViewHolder()設(shè)置更豐富的布局效果
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
//為了展示效果,將布局的第一個數(shù)據(jù)設(shè)置為linearLayout
if (position == 0) {
holder.Text.setText("Linear");
}
//為了展示效果,將布局里不同位置的Item進行背景顏色設(shè)置
//? ? ? ? ? ? ? ? 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);
//設(shè)置每個Item的點擊事件
/**
設(shè)置吸邊布局
*/
StickyLayoutHelper stickyLayoutHelper = new StickyLayoutHelper();
//公共屬性
stickyLayoutHelper.setItemCount(3);//設(shè)置布局里Item個數(shù)
stickyLayoutHelper.setPadding(20, 20, 20, 20);//設(shè)置LayoutHelper的子元素相對LayoutHelper邊緣的距離
stickyLayoutHelper.setMargin(20, 20, 20, 20);//設(shè)置LayoutHelper邊緣相對父控件（即RecyclerView）的距離
stickyLayoutHelper.setBgColor(Color.GRAY);//設(shè)置背景顏色
stickyLayoutHelper.setAspectRatio(3);//設(shè)置設(shè)置布局內(nèi)每行布局的寬與高的比
//特有屬性
stickyLayoutHelper.setStickyStart(true);
// true =組件吸在頂部
// false =組件吸在底部
stickyLayoutHelper.setOffset(100);//設(shè)置吸邊位置的偏移量
Adapter_StickyLayout = new MyAdapter(this, stickyLayoutHelper,1, listItem) {
//設(shè)置需要展示的數(shù)據(jù)總數(shù),此處設(shè)置是1
//為了展示效果,通過重寫onBindViewHolder()將布局的第一個數(shù)據(jù)設(shè)置為Stick
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
if (position == 0) {
holder.Text.setText("Stick");
}
}
};
Adapter_StickyLayout.setOnItemClickListener(this);
//設(shè)置每個Item的點擊事件
/**
設(shè)置可選固定布局
*/
ScrollFixLayoutHelper scrollFixLayoutHelper = new ScrollFixLayoutHelper(ScrollFixLayoutHelper.TOP_RIGHT,0,0);
//參數(shù)說明:
//參數(shù)1:設(shè)置吸邊時的基準(zhǔn)位置(alignType) -有四個取值:TOP_LEFT(默認(rèn)), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT
//參數(shù)2:基準(zhǔn)位置的偏移量x
//參數(shù)3:基準(zhǔn)位置的偏移量y
//公共屬性
scrollFixLayoutHelper.setItemCount(1);//設(shè)置布局里Item個數(shù)
//從設(shè)置Item數(shù)目的源碼可以看出，一個FixLayoutHelper只能設(shè)置一個
//? ? ? ? @Override
//? ? ? ? public void setItemCount(int itemCount) {
//? ? ? ? ? ? if (itemCount > 0) {
//? ? ? ? ? ? ? ? super.setItemCount(1);
//? ? ? ? ? ? } else {
//? ? ? ? ? ? ? ? super.setItemCount(0);
//? ? ? ? ? ? }
//? ? ? ? }
scrollFixLayoutHelper.setPadding(20, 20, 20, 20);//設(shè)置LayoutHelper的子元素相對LayoutHelper邊緣的距離
scrollFixLayoutHelper.setMargin(20, 20, 20, 20);//設(shè)置LayoutHelper邊緣相對父控件（即RecyclerView）的距離
scrollFixLayoutHelper.setBgColor(Color.GRAY);//設(shè)置背景顏色
scrollFixLayoutHelper.setAspectRatio(6);//設(shè)置設(shè)置布局內(nèi)每行布局的寬與高的比
// fixLayoutHelper特有屬性
scrollFixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);//設(shè)置吸邊時的基準(zhǔn)位置(alignType)
scrollFixLayoutHelper.setX(30);//設(shè)置基準(zhǔn)位置的橫向偏移量X
scrollFixLayoutHelper.setY(50);//設(shè)置基準(zhǔn)位置的縱向偏移量Y
scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_LEAVE);//設(shè)置Item的顯示模式
Adapter_ScrollFixLayout? = new MyAdapter(this, scrollFixLayoutHelper,1, listItem) {
//設(shè)置需要展示的數(shù)據(jù)總數(shù),此處設(shè)置是1
//為了展示效果,通過重寫onBindViewHolder()將布局的第一個數(shù)據(jù)設(shè)置為scrollFix
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
if (position == 0) {
holder.Text.setText("scrollFix");
}
}
};
Adapter_ScrollFixLayout.setOnItemClickListener(this);
//設(shè)置每個Item的點擊事件
/**
設(shè)置Grid布局
*/
GridLayoutHelper gridLayoutHelper = new GridLayoutHelper(3);
//在構(gòu)造函數(shù)設(shè)置每行的網(wǎng)格個數(shù)
//公共屬性
gridLayoutHelper.setItemCount(36);//設(shè)置布局里Item個數(shù)
gridLayoutHelper.setPadding(20, 20, 20, 20);//設(shè)置LayoutHelper的子元素相對LayoutHelper邊緣的距離
gridLayoutHelper.setMargin(20, 20, 20, 20);//設(shè)置LayoutHelper邊緣相對父控件（即RecyclerView）的距離
// gridLayoutHelper.setBgColor(Color.GRAY);//設(shè)置背景顏色
gridLayoutHelper.setAspectRatio(6);//設(shè)置設(shè)置布局內(nèi)每行布局的寬與高的比
// gridLayoutHelper特有屬性
gridLayoutHelper.setWeights(new float[]{40, 30, 30});//設(shè)置每行中 每個網(wǎng)格寬度 占 每行總寬度 的比例
gridLayoutHelper.setVGap(20);//控制子元素之間的垂直間距
gridLayoutHelper.setHGap(20);//控制子元素之間的水平間距
gridLayoutHelper.setAutoExpand(false);//是否自動填充空白區(qū)域
gridLayoutHelper.setSpanCount(3);//設(shè)置每行多少個網(wǎng)格
//通過自定義SpanSizeLookup來控制某個Item的占網(wǎng)格個數(shù)
gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
if (position > 7) {
return 3;
//第7個位置后,每個Item占3個網(wǎng)格
} else {
return 2;
//第7個位置前,每個Item占2個網(wǎng)格
}
}
});
Adapter_GridLayout? = new MyAdapter(this, gridLayoutHelper,36, listItem) {
//設(shè)置需要展示的數(shù)據(jù)總數(shù),此處設(shè)置是8,即展示總數(shù)是8個,然后每行是4個(上面設(shè)置的)
//為了展示效果,通過重寫onBindViewHolder()將布局的第一個數(shù)據(jù)設(shè)置為gridLayoutHelper
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
//為了展示效果,將布局里不同位置的Item進行背景顏色設(shè)置
//? ? ? ? ? ? ? ? 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);
//設(shè)置每個Item的點擊事件
/**
設(shè)置固定布局
*/
FixLayoutHelper fixLayoutHelper = new FixLayoutHelper(FixLayoutHelper.TOP_LEFT,40,100);
//參數(shù)說明:
//參數(shù)1:設(shè)置吸邊時的基準(zhǔn)位置(alignType) -有四個取值:TOP_LEFT(默認(rèn)), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT
//參數(shù)2:基準(zhǔn)位置的偏移量x
//參數(shù)3:基準(zhǔn)位置的偏移量y
//公共屬性
fixLayoutHelper.setItemCount(1);//設(shè)置布局里Item個數(shù)
//從設(shè)置Item數(shù)目的源碼可以看出，一個FixLayoutHelper只能設(shè)置一個
//? ? ? ? @Override
//? ? ? ? public void setItemCount(int itemCount) {
//? ? ? ? ? ? if (itemCount > 0) {
//? ? ? ? ? ? ? ? super.setItemCount(1);
//? ? ? ? ? ? } else {
//? ? ? ? ? ? ? ? super.setItemCount(0);
//? ? ? ? ? ? }
//? ? ? ? }
fixLayoutHelper.setPadding(20, 20, 20, 20);//設(shè)置LayoutHelper的子元素相對LayoutHelper邊緣的距離
fixLayoutHelper.setMargin(20, 20, 20, 20);//設(shè)置LayoutHelper邊緣相對父控件（即RecyclerView）的距離
fixLayoutHelper.setBgColor(Color.GRAY);//設(shè)置背景顏色
fixLayoutHelper.setAspectRatio(6);//設(shè)置設(shè)置布局內(nèi)每行布局的寬與高的比
// fixLayoutHelper特有屬性
fixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);//設(shè)置吸邊時的基準(zhǔn)位置(alignType)
fixLayoutHelper.setX(30);//設(shè)置基準(zhǔn)位置的橫向偏移量X
fixLayoutHelper.setY(50);//設(shè)置基準(zhǔn)位置的縱向偏移量Y
Adapter_FixLayout? = new MyAdapter(this, fixLayoutHelper,1, listItem) {
//設(shè)置需要展示的數(shù)據(jù)總數(shù),此處設(shè)置是1
//為了展示效果,通過重寫onBindViewHolder()將布局的第一個數(shù)據(jù)設(shè)置為Fix
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
if (position == 0) {
holder.Text.setText("Fix");
}
}
};
Adapter_FixLayout.setOnItemClickListener(this);
//設(shè)置每個Item的點擊事件
/**
設(shè)置浮動布局
*/
FloatLayoutHelper floatLayoutHelper = new FloatLayoutHelper();
//創(chuàng)建FloatLayoutHelper對象
//公共屬性
floatLayoutHelper.setItemCount(1);//設(shè)置布局里Item個數(shù)
//從設(shè)置Item數(shù)目的源碼可以看出，一個FixLayoutHelper只能設(shè)置一個
//? ? ? ? @Override
//? ? ? ? public void setItemCount(int itemCount) {
//? ? ? ? ? ? if (itemCount > 0) {
//? ? ? ? ? ? ? ? super.setItemCount(1);
//? ? ? ? ? ? } else {
//? ? ? ? ? ? ? ? super.setItemCount(0);
//? ? ? ? ? ? }
//? ? ? ? }
floatLayoutHelper.setPadding(20, 20, 20, 20);//設(shè)置LayoutHelper的子元素相對LayoutHelper邊緣的距離
floatLayoutHelper.setMargin(20, 20, 20, 20);//設(shè)置LayoutHelper邊緣相對父控件（即RecyclerView）的距離
floatLayoutHelper.setBgColor(Color.GRAY);//設(shè)置背景顏色
floatLayoutHelper.setAspectRatio(6);//設(shè)置設(shè)置布局內(nèi)每行布局的寬與高的比
// floatLayoutHelper特有屬性
floatLayoutHelper.setDefaultLocation(300, 300);//設(shè)置布局里Item的初始位置
Adapter_FloatLayout = new MyAdapter(this, floatLayoutHelper,1, listItem) {
//設(shè)置需要展示的數(shù)據(jù)總數(shù),此處設(shè)置是1
//為了展示效果,通過重寫onBindViewHolder()將布局的第一個數(shù)據(jù)設(shè)置為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);
//設(shè)置每個Item的點擊事件
/**
設(shè)置欄格布局
*/
ColumnLayoutHelper columnLayoutHelper = new ColumnLayoutHelper();
//創(chuàng)建對象
//公共屬性
columnLayoutHelper.setItemCount(3);//設(shè)置布局里Item個數(shù)
columnLayoutHelper.setPadding(20, 20, 20, 20);//設(shè)置LayoutHelper的子元素相對LayoutHelper邊緣的距離
columnLayoutHelper.setMargin(20, 20, 20, 20);//設(shè)置LayoutHelper邊緣相對父控件（即RecyclerView）的距離
columnLayoutHelper.setBgColor(Color.GRAY);//設(shè)置背景顏色
columnLayoutHelper.setAspectRatio(6);//設(shè)置設(shè)置布局內(nèi)每行布局的寬與高的比
// columnLayoutHelper特有屬性
columnLayoutHelper.setWeights(new float[]{30, 40, 30});//設(shè)置該行每個Item占該行總寬度的比例
Adapter_ColumnLayout = new MyAdapter(this, columnLayoutHelper,3, listItem) {
//設(shè)置需要展示的數(shù)據(jù)總數(shù),此處設(shè)置是3
//為了展示效果,通過重寫onBindViewHolder()將布局的第一個數(shù)據(jù)設(shè)置為Column
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
if (position == 0) {
holder.Text.setText("Column");
}
}
};
Adapter_ColumnLayout.setOnItemClickListener(this);
//設(shè)置每個Item的點擊事件
/**
設(shè)置通欄布局
*/
SingleLayoutHelper singleLayoutHelper = new SingleLayoutHelper();
//公共屬性
singleLayoutHelper.setItemCount(3);//設(shè)置布局里Item個數(shù)
singleLayoutHelper.setPadding(20, 20, 20, 20);//設(shè)置LayoutHelper的子元素相對LayoutHelper邊緣的距離
singleLayoutHelper.setMargin(20, 20, 20, 20);//設(shè)置LayoutHelper邊緣相對父控件（即RecyclerView）的距離
singleLayoutHelper.setBgColor(Color.GRAY);//設(shè)置背景顏色
singleLayoutHelper.setAspectRatio(6);//設(shè)置設(shè)置布局內(nèi)每行布局的寬與高的比
Adapter_SingleLayout = new MyAdapter(this, singleLayoutHelper,1, listItem) {
//設(shè)置需要展示的數(shù)據(jù)總數(shù),此處設(shè)置是1
//為了展示效果,通過重寫onBindViewHolder()將布局的第一個數(shù)據(jù)設(shè)置為Single
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
if (position == 0) {
holder.Text.setText("Single");
}
}
};
Adapter_SingleLayout.setOnItemClickListener(this);
//設(shè)置每個Item的點擊事件
/**
設(shè)置1拖N布局
*/
OnePlusNLayoutHelper onePlusNLayoutHelper = new OnePlusNLayoutHelper(5);
//在構(gòu)造函數(shù)里傳入顯示的Item數(shù)
//最多是1拖4,即5個
//公共屬性
onePlusNLayoutHelper.setItemCount(3);//設(shè)置布局里Item個數(shù)
onePlusNLayoutHelper.setPadding(20, 20, 20, 20);//設(shè)置LayoutHelper的子元素相對LayoutHelper邊緣的距離
onePlusNLayoutHelper.setMargin(20, 20, 20, 20);//設(shè)置LayoutHelper邊緣相對父控件（即RecyclerView）的距離
onePlusNLayoutHelper.setBgColor(Color.GRAY);//設(shè)置背景顏色
onePlusNLayoutHelper.setAspectRatio(3);//設(shè)置設(shè)置布局內(nèi)每行布局的寬與高的比
Adapter_onePlusNLayout = new MyAdapter(this, onePlusNLayoutHelper,5, listItem) {
//設(shè)置需要展示的數(shù)據(jù)總數(shù),此處設(shè)置是5,即1拖4
//為了展示效果,通過重寫onBindViewHolder()將布局的第一個數(shù)據(jù)設(shè)置為onePlus
@Override
public void onBindViewHolder(MainViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
if (position == 0) {
holder.Text.setText("onePlus");
}
}
};
Adapter_onePlusNLayout.setOnItemClickListener(this);
//設(shè)置每個Item的點擊事件
/**
設(shè)置瀑布流布局
*/
StaggeredGridLayoutHelper staggeredGridLayoutHelper = new StaggeredGridLayoutHelper();
//創(chuàng)建對象
//公有屬性
staggeredGridLayoutHelper.setItemCount(20);//設(shè)置布局里Item個數(shù)
staggeredGridLayoutHelper.setPadding(20, 20, 20, 20);//設(shè)置LayoutHelper的子元素相對LayoutHelper邊緣的距離
staggeredGridLayoutHelper.setMargin(20, 20, 20, 20);//設(shè)置LayoutHelper邊緣相對父控件（即RecyclerView）的距離
staggeredGridLayoutHelper.setBgColor(Color.GRAY);//設(shè)置背景顏色
staggeredGridLayoutHelper.setAspectRatio(3);//設(shè)置設(shè)置布局內(nèi)每行布局的寬與高的比
//特有屬性
staggeredGridLayoutHelper.setLane(3);//設(shè)置控制瀑布流每行的Item數(shù)
staggeredGridLayoutHelper.setHGap(20);//設(shè)置子元素之間的水平間距
staggeredGridLayoutHelper.setVGap(15);//設(shè)置子元素之間的垂直間距
Adapter_StaggeredGridLayout = new MyAdapter(this, staggeredGridLayoutHelper,20, listItem) {
//設(shè)置需要展示的數(shù)據(jù)總數(shù),此處設(shè)置是20
//通過重寫onBindViewHolder()設(shè)置更加豐富的布局
@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);
//為了展示效果,設(shè)置不同位置的背景色
//? ? ? ? ? ? ? ? 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);
//為了展示效果,通過將布局的第一個數(shù)據(jù)設(shè)置為staggeredGrid
if (position == 0) {
holder.Text.setText("staggeredGrid");
}
}
};
Adapter_StaggeredGridLayout.setOnItemClickListener(this);
//設(shè)置每個Item的點擊事件
/**
*步驟5:將生成的LayoutHelper交給Adapter，并綁定到RecyclerView對象
**/
// 1.設(shè)置Adapter列表（同時也是設(shè)置LayoutHelper列表）
List adapters = new LinkedList<>();
// 2.將上述創(chuàng)建的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.創(chuàng)建DelegateAdapter對象&將layoutManager綁定到DelegateAdapter
DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager);
// 4.將DelegateAdapter.Adapter列表綁定到DelegateAdapter
delegateAdapter.setAdapters(adapters);
// 5.將delegateAdapter綁定到recyclerView
recyclerView.setAdapter(delegateAdapter);
//? ? ? ? /**
//? ? ? ? *步驟6:設(shè)置分割線& 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:實現(xiàn)Item點擊事件
**/
//點擊事件的回調(diào)函數(shù)
@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首先就是要自定義一個它的內(nèi)部類Adapter，讓LayoutHelper和需要綁定的數(shù)據(jù)傳進去
//此處的Adapter和普通RecyclerView定義的Adapter只相差了一個onCreateLayoutHelper()方法，其他的都是一樣的做法.
private ArrayList> listItem;
//用于存放數(shù)據(jù)列表
private Context context;
private LayoutHelper layoutHelper;
private RecyclerView.LayoutParams layoutParams;
private int count = 0;
private MyItemClickListener myItemClickListener;
//用于設(shè)置Item點擊事件
//構(gòu)造函數(shù)(傳入每個的數(shù)據(jù)列表&展示的Item數(shù)量)
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的數(shù)據(jù)
@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數(shù)目
@Override
public int getItemCount() {
return count;
}
//設(shè)置Item的點擊事件
//綁定MainActivity傳進來的點擊監(jiān)聽器
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());
}
}
//監(jiān)聽到點擊就回調(diào)MainActivity的onItemClick函數(shù)
);
}
public TextView getText() {
return Text;
}
}
}
如下圖是過度繪制的顏色分類：其中藍色、淡綠、淡紅、深紅代表了4種不同程度的overdraw情況，我們的目標(biāo)就是盡量減少紅色的overdraw，看到更多藍色區(qū)域
如下是demo的過度繪制情況：
