引言
实战之前,您可能先要学习vlayout的原理和使用场景,
体验
Demo下载体验,
下载
,或者扫描二维码下载
实现
VirtualLayout是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用的问题。
设计思路
通过定制化的LayoutManager,接管整个RecyclerView的布局逻辑;LayoutManager管理了一系列LayoutHelper,LayoutHelper负责具体布局逻辑实现的地方;每一个LayoutHelper负责页面某一个范围内的组件布局;不同的LayoutHelper可以做不同的布局逻辑,因此可以在一个RecyclerView页面里提供异构的布局结构,这就能比系统自带的LinearLayoutManager、GridLayoutManager等提供更加丰富的能力。同时支持扩展LayoutHelper来提供更多的布局能力。
主要功能
- 默认通用布局实现,解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等。
- LinearLayoutHelper: 线性布局
- GridLayoutHelper: Grid布局, 支持横向的colspan
- FixLayoutHelper: 固定布局,始终在屏幕固定位置显示
- ScrollFixLayoutHelper: 固定布局,但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等
- FloatLayoutHelper: 浮动布局,可以固定显示在屏幕上,但用户可以拖拽其位置
- ColumnLayoutHelper: 栏格布局,都布局在一排,可以配置不同列之间的宽度比值
- SingleLayoutHelper: 通栏布局,只会显示一个组件View
- OnePlusNLayoutHelper: 一拖N布局,可以配置1-5个子元素
- StickyLayoutHelper: stikcy布局, 可以配置吸顶或者吸底
- StaggeredGridLayoutHelper: 瀑布流布局,可配置间隔高度/宽度
- 上述默认实现里可以大致分为两类:一是非fix类型布局,像线性、Grid、栏格等,它们的特点是布局在整个页面流里,随页面滚动而滚动;另一类就是fix类型的布局,它们的子节点往往不随页面滚动而滚动。
- 所有除布局外的组件复用,VirtualLayout将用来管理大的模块布局组合,扩展了RecyclerView,使得同一RecyclerView内的组件可以复用,减少View的创建和销毁过程。
使用
版本请参考mvn repository上的最新版本(目前最新版本是1.2.1),最新的 aar 都会发布到 jcenter 和 MavenCentral 上,确保配置了这两个仓库源,然后引入aar依赖:
compile ('com.alibaba.android:vlayout:1.2.1@aar') {
transitive = true
}
初始化LayoutManager
final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
final VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
设置回收复用池大小,(如果一屏内相同类型的 View 个数比较多,需要设置一个合适的大小,防止来回滚动时重新创建 View):
RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
recyclerView.setRecycledViewPool(viewPool);
viewPool.setMaxRecycledViews(0, 10);
基类适配器
package com.zxl.vlayoutdemo.adapter;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import com.alibaba.android.vlayout.DelegateAdapter;
import com.alibaba.android.vlayout.LayoutHelper;
import com.chad.library.adapter.base.BaseViewHolder;
/**
* 基类适配器
* Created by zxl on 2017/8/28.
*/
public class BaseDelegateAdapter extends DelegateAdapter.Adapter<BaseViewHolder> {
private LayoutHelper mLayoutHelper;
private int mCount = -1;
private int mLayoutId = -1;
private Context mContext;
private int mViewTypeItem = -1;
public BaseDelegateAdapter(Context context, LayoutHelper layoutHelper, int layoutId, int count, int viewTypeItem) {
this.mContext = context;
this.mCount = count;
this.mLayoutHelper = layoutHelper;
this.mLayoutId = layoutId;
this.mViewTypeItem = viewTypeItem;
}
@Override
public LayoutHelper onCreateLayoutHelper() {
return mLayoutHelper;
}
@Override
public BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == mViewTypeItem) {
return new BaseViewHolder(LayoutInflater.from(mContext).inflate(mLayoutId, parent, false));
}
return null;
}
@Override
public void onBindViewHolder(BaseViewHolder holder, int position) {
}
/**
* 必须重写不然会出现滑动不流畅的情况
*
* @param position
* @return
*/
@Override
public int getItemViewType(int position) {
return mViewTypeItem;
}
//条目数量
@Override
public int getItemCount() {
return mCount;
}
}
适配器使用
BaseDelegateAdapter bannerAdapter = new BaseDelegateAdapter(this, new LinearLayoutHelper()
, R.layout.vlayout_banner, 1, BANNER_VIEW_TYPE) {
@Override
public void onBindViewHolder(BaseViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
ArrayList<String> arrayList = new ArrayList<>();
arrayList.add("http://bpic.wotucdn.com/11/66/23/55bOOOPIC3c_1024.jpg!/fw/780/quality/90/unsharp/true/compress/true/watermark/url/L2xvZ28ud2F0ZXIudjIucG5n/repeat/true");
arrayList.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505470629546&di=194a9a92bfcb7754c5e4d19ff1515355&imgtype=0&src=http%3A%2F%2Fpics.jiancai.com%2Fimgextra%2Fimg01%2F656928666%2Fi1%2FT2_IffXdxaXXXXXXXX_%2521%2521656928666.jpg");
// 绑定数据
Banner mBanner = holder.getView(R.id.banner);
//设置banner样式
mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
//设置图片加载器
mBanner.setImageLoader(new GlideImageLoader());
//设置图片集合
mBanner.setImages(arrayList);
//设置banner动画效果
mBanner.setBannerAnimation(Transformer.DepthPage);
//设置标题集合(当banner样式有显示title时)
// mBanner.setBannerTitles(titles);
//设置自动轮播,默认为true
mBanner.isAutoPlay(true);
//设置轮播时间
mBanner.setDelayTime(5000);
//设置指示器位置(当banner模式中有指示器时)
mBanner.setIndicatorGravity(BannerConfig.CENTER);
//banner设置方法全部调用完毕时最后调用
mBanner.start();
mBanner.setOnBannerListener(new OnBannerListener() {
@Override
public void OnBannerClick(int position) {
Toast.makeText(getApplicationContext(), "banner点击了" + position, Toast.LENGTH_SHORT).show();
}
});
}
};
最后
Demo地址 下载
不明白的地方请留言。