最近淘寶出了vlayout,剛開(kāi)始看淘寶的文檔的時(shí)候還是有點(diǎn)懵芜果，后來(lái)自己也總結(jié)規(guī)劃了一下蔽氨，寫(xiě)了一個(gè)比較好看的demo，順便在這里總結(jié)一下跨算。
VLayout是什么爆土，說(shuō)白了就是用一個(gè)原生RecycelerView加上VLayout來(lái)實(shí)現(xiàn)在一個(gè)頁(yè)面上比較復(fù)雜的布局并且有一個(gè)比較好的復(fù)用，在RecyclerView里同時(shí)有GridLayout布局诸蚕，瀑布流布局步势，浮動(dòng)布局等VLayout提供的九大布局，這也是淘寶客戶(hù)端首頁(yè)加載不同布局的方法背犯。
好了坏瘩，簡(jiǎn)單介紹到這里，首先我們先導(dǎo)入VLayout:
compile ('com.alibaba.android:vlayout:版本@aar') {
transitive = true
}
具體的版本請(qǐng)看github里VLayout給出的版本號(hào)∧海現(xiàn)在最新是1.0.6
接著我們就可以開(kāi)始引用VLayout了,VLayout的通用代碼如下:
VirtualLayoutManager manager = new VirtualLayoutManager(this);
recyclerview.setLayoutManager(manager);
DelegateAdapter adapter =new DelegateAdapter(manager, true);
- 其中VirtualLayoutManager它繼承自LinearLayoutManager倔矾；引入了 LayoutHelper 的概念，它負(fù)責(zé)具體的布局邏輯；VirtualLayoutManager管理了一系列LayoutHelper哪自，將具體的布局能力交給LayoutHelper來(lái)完成丰包。
- DelegateAdapter是VLayout專(zhuān)門(mén)為L(zhǎng)ayoutHelper定制的Adapter，我們把裝載有各種布局的LayoutHelper的Adapter放進(jìn)DelegateAdapter里最后在RecyclerView.setAdapter(DelegateAdapter);就可以加載出復(fù)雜的布局提陶。
- 或許你們會(huì)問(wèn)什么是LayoutHelper烫沙，這個(gè)問(wèn)題問(wèn)得好，就是VLayout提供的九種默認(rèn)通用布局隙笆，解耦所有的View和布局之間的關(guān)系: Linear, Grid, 吸頂, 浮動(dòng), 固定位置等具體,名稱(chēng)和功能如下:
- LinearLayoutHelper: 線性布局
- GridLayoutHelper: Grid布局锌蓄， 支持橫向的colspan
- StaggeredGridLayoutHelper: 瀑布流布局，可配置間隔高度/寬度
- FixLayoutHelper: 固定布局撑柔，始終在屏幕固定位置顯示
- ScrollFixLayoutHelper: 固定布局瘸爽，但之后當(dāng)頁(yè)面滑動(dòng)到該圖片區(qū)域才顯示, 可以用來(lái)做返回頂部或其他書(shū)簽等
- FloatLayoutHelper: 浮動(dòng)布局，可以固定顯示在屏幕上铅忿，但用戶(hù)可以拖拽其位置
- ColumnLayoutHelper: 欄格布局剪决，都布局在一排，可以配置不同列之間的寬度比值
- SingleLayoutHelper: 通欄布局檀训，只會(huì)顯示一個(gè)組件View
- OnePlusNLayoutHelper: 一拖N布局柑潦，可以配置1-5個(gè)子元素
- StickyLayoutHelper: stikcy布局， 可以配置吸頂或者吸底
這就是九種布局對(duì)應(yīng)的類(lèi)峻凫，我們可以用著九個(gè)類(lèi)實(shí)現(xiàn)各種復(fù)雜的布局渗鬼，下面我會(huì)一一介紹每個(gè)布局和效果，以便更直觀的看到效果:
- LinearLayoutHelper: 線性布局荧琼，就是實(shí)現(xiàn)ListView的效果很簡(jiǎn)單譬胎，直接看代碼:
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();
//設(shè)置間隔高度
linearLayoutHelper.setDividerHeight(5);
//設(shè)置布局底部與下個(gè)布局的間隔
linearLayoutHelper.setMarginBottom(20);
//設(shè)置間距
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);
}
}
}
這里需要說(shuō)的就是在Adapter類(lèi)里我們需要繼承Vlayout的DelegateAdapter.Adapter類(lèi)，然后多回調(diào)onCreateLayoutHelper()方法命锄，返回我們傳進(jìn)去的LayoutHelper類(lèi)堰乔，其他的和普通的RecyclerView是一個(gè)樣的。DelegateRecyclerAdapter在我們后面也有多次引用脐恩。其他要說(shuō)的就是我們初始完LinearLayoutHelper后生產(chǎn)DelegateAdapter.Adapter類(lèi)再賦給DelegateAdapter镐侯，然后然后RecyclerView在setAdapter()就這樣。
image.png
- GridLayoutHelper: Grid布局驶冒， 支持橫向的colspan析孽，也很簡(jiǎn)單，代碼如下:
public static DelegateRecyclerAdapter init(Context context){
GridLayoutHelper gridLayoutHelper=new GridLayoutHelper(4);
//自定義設(shè)置某些位置的Item的占格數(shù)
gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
if (position >5) {
return 2;
}else {
return 1;
}
}
});
//是否填滿可用區(qū)域
gridLayoutHelper.setAutoExpand(false);
delegateRecyclerAdapter=new DelegateRecyclerAdapter(context,gridLayoutHelper,"GridLayoutHelper");
return delegateRecyclerAdapter;
}
其他代碼很上面的一樣只怎。
img2.PNG
- StaggeredGridLayoutHelper: 瀑布流布局，可配置間隔高度/寬度,代碼如下:
public static StaggeredAdapter init(Context context){
StaggeredGridLayoutHelper staggeredGridLayoutHelper=new StaggeredGridLayoutHelper(3,20);
staggeredAdapter=new StaggeredAdapter(context,staggeredGridLayoutHelper,"StaggeredGridLayoutHelper");
return staggeredAdapter;
}
在StaggeredAdapter里我們?cè)趏nBindViewHolder里用
ViewGroup.LayoutParams layoutParams = ((MyViewholder) holder).text.getLayoutParams();
layoutParams.height = 260 + position % 7 * 20;
((MyViewholder) holder).text.setLayoutParams(layoutParams);
來(lái)實(shí)現(xiàn)高度不一致怜俐，效果如下:
img3.PNG
- 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拍鲤，F(xiàn)ixLayoutHelper.BOTTOM_RIGHT贴谎，F(xiàn)ixLayoutHelper.TOP_RIGHT, 200,200分別對(duì)應(yīng)偏移量x,y汞扎，效果如下:
img4.PNG
fixlayouthelp區(qū)域塊就是FixLayoutHelper了。
- ScrollFixLayoutHelper: 固定布局擅这，但之后當(dāng)頁(yè)面滑動(dòng)到該圖片區(qū)域才顯示, 可以用來(lái)做返回頂部或其他書(shū)簽等澈魄，代碼如下:
public static FixLayoutAdapter initScrollFixLayout(Context context){
ScrollFixLayoutHelper scrollFixLayoutHelper = new ScrollFixLayoutHelper(15,15);
//show_always:總是顯示
//show_on_enter:當(dāng)頁(yè)面滾動(dòng)到這個(gè)視圖的位置的時(shí)候，才顯示
//show_on_leave:當(dāng)頁(yè)面滾出這個(gè)視圖的位置的時(shí)候顯示
scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);
return new FixLayoutAdapter(context, scrollFixLayoutHelper,"scrollfixlayouthelper");
}
代碼很簡(jiǎn)單仲翎，看效果：
img5.PNG
ScrollFixLayoutHelper繼承自FixLayoutHelper痹扇，不同的是showType來(lái)決定這個(gè)布局的Item是否顯示，可以用來(lái)做一些返回頂部之類(lèi)的按鈕溯香，
- SHOW_ALWAYS：與FixLayoutHelper的行為一致鲫构，固定在某個(gè)位置；
- SHOW_ON_ENTER：默認(rèn)不顯示視圖玫坛，當(dāng)頁(yè)面滾動(dòng)到這個(gè)視圖的位置的時(shí)候结笨，才顯示；
- SHOW_ON_LEAVE：默認(rèn)不顯示視圖湿镀，當(dāng)頁(yè)面滾出這個(gè)視圖的位置的時(shí)候顯示炕吸；
這里效果不明顯，等集合所有布局之后大家就可以看很直觀的效果
- FloatLayoutHelper: 浮動(dòng)布局勉痴，可以固定顯示在屏幕上赫模，但用戶(hù)可以拖拽其位置，代碼如下：
public static FixLayoutAdapter initFloatLayoutHelper(Context context){
FloatLayoutHelper floatLayoutHelper=new FloatLayoutHelper();
floatLayoutHelper.setDefaultLocation(20,250);
FixLayoutAdapter fixLayoutAdapter=new FixLayoutAdapter(context,floatLayoutHelper,"floatlayouthelper");
return fixLayoutAdapter;
}
效果如下：
img6.gif
其中setDefaultLocation()使用來(lái)設(shè)置他的初始位置的蚀腿，setAlignType（表示吸邊時(shí)的基準(zhǔn)位置嘴瓤，默認(rèn)左上角，有四個(gè)取值莉钙，分別是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需要設(shè)置Weights停忿，是一個(gè)float數(shù)組，總和為100蚊伞，否則超出布局席赂。效果圖如下：
img7.PNG
- SingleLayoutHelper: 通欄布局，只會(huì)顯示一個(gè)組件View时迫，這里建議設(shè)置Adapter個(gè)數(shù)為1颅停，因?yàn)樗椭粫?huì)顯示一欄，假如有多個(gè)可能會(huì)出現(xiàn)一些問(wèn)題掠拳，本人實(shí)測(cè)個(gè)數(shù)多時(shí)會(huì)出點(diǎn)問(wèn)題癞揉。代碼如下：
public static SingleLayoutAdapter initSingleLayout(Context context){
SingleLayoutHelper singleLayoutHelper=new SingleLayoutHelper();
//設(shè)置間距
singleLayoutHelper.setMargin(20,20,20,20);
SingleLayoutAdapter singleLayoutAdapter=new SingleLayoutAdapter(context,singleLayoutHelper,"SingleLayoutHelper");
return singleLayoutAdapter;
}
效果圖如下:
img8.PNG
- OnePlusNLayoutHelper: 一拖N布局，可以配置1-5個(gè)子元素,根據(jù)個(gè)數(shù)的不同所呈現(xiàn)的界面也是不一樣的,不同個(gè)數(shù)效果如下：
//個(gè)數(shù)為1
個(gè)數(shù)為1.PNG
//個(gè)數(shù)為2
個(gè)數(shù)為2.PNG
//個(gè)數(shù)為3
個(gè)數(shù)為3.PNG
//個(gè)數(shù)為4
個(gè)數(shù)為4.PNG
//個(gè)數(shù)為5
個(gè)數(shù)為5.PNG
代碼如下：
public static OnePlusNLayoutAdapter initOnePlusNLayout(Context context){
OnePlusNLayoutHelper onePlusNLayoutHelper=new OnePlusNLayoutHelper();
//設(shè)置布局底部與下個(gè)布局的間隔
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);
}
效果圖如下：
img10.gif
- 最后假如只是單單加載其中的一個(gè)布局其實(shí)意義不大柏肪，VLayout只最大的意義在于加載多個(gè)布局并且保持一個(gè)很好的復(fù)用，所以我們把上面的所有布局一起加載起來(lái)芥牌，代碼如下：
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);里當(dāng)hasConsistItemType=true的時(shí)候烦味，不論是不是屬于同一個(gè)子adapter，相同類(lèi)型的item都能復(fù)用壁拉。表示它們共享一個(gè)類(lèi)型谬俄。 當(dāng)hasConsistItemType=false的時(shí)候皆的，不同子adapter之間的類(lèi)型不共享箕昭。
效果如下圖：
img11.gif
最后源碼demo,代碼都在這https://github.com/jack921/ProjectVLayout
