LunboViewPager
对ViewPager和ViewPagerIndicator的简单封装,实现轮播图效果。
轮播图可以直接在Activity/Fragment中,也可以是RecyclerView的一个Item。
该有的基本都有,页码指示,左右无限循环翻页,定时自动翻页,用手指翻页时暂停自动翻页,只有一张图片时变为静态相框,解决原生ViewPager当页数为2时的滑动Bug。
提供CirclePageIndicator(圆点)指示器
引入
1.添加二进制
build.gradle中添加
compile 'com.xdandroid:lunboviewpager:+'
2.布局文件(Activity/Fragment/RecyclerView的Item)
将ViewPager与CirclePageIndicator元素并列。
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
android:id="@+id/vp_lunbo"
android:layout_width="352dp"
android:layout_height="176dp"/>
android:id="@+id/indicator_lunbo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="6dp"
android:layout_marginRight="2dp"/>
4. 布局文件(ViewPager的每一页,通常由一个图片控件和少量其他控件组成)
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/iv_lunbo"
android:scaleType="centerCrop"
android:layout_height="176dp"
android:layout_width="350dp"/>
使用方法详见Sample。
直接在Activity/Fragment内使用
1.给ViewPager和Indicator设置需要的自定义属性(OnPageChangeListener, Indicator的填充颜色, etc.)
Indicator的可设置项参照JakeWharton/ViewPagerIndicator提供的API。
相对于JakeWharton的版本, 增加了对wrap_content的支持;
增加了一个API, 用于设置和得到圆点之间的距离相对于圆点半径的倍数 :
void CirclePageIndicator.setDistanceBetweenCircles(double timesToRadius_multiplier);
double CirclePageIndicator.getDistanceBetweenCirclesMultiplier()
//设置OnPageChangeListener
vp_lunbo.setOnPageChangeListener(onPageChangeListener);
//设置当前被选中的圆点的填充颜色
indicator_lunbo.setFillColor(getResources().getColor(R.color.colorAccent));
//设置圆点半径
indicator_lunbo.setRadius(UIUtils.dp2px(this, 3.25f));
//设置圆点之间的距离相对于圆点半径的倍数
indicator_lunbo.setDistanceBetweenCircles(3.0);
2.构建Adapter
public Adapter(Context context);
需实现Adapter里的4个方法:
protected abstract int getViewPagerItemLayoutResId();//指定ViewPager的每一页的Layout资源ID
protected abstract View showImage(View inflatedLayout, int position);
inflatedLayout即根据上面的资源ID渲染出来的View,开发者需要通过findViewById找到布局中的图片控件,再使用图片加载框架(UIL、Picasso、Fresco等)把图片加载进去,最后返回图片控件。
protected abstract int getImageCount();//总页数
protected abstract void onImageClick(View view, int position);//OnClickListener
示例:
new Adapter(MainActivity.this) {
protected View showImage(View inflatedLayout, int position) {
ImageView imageView = (ImageView) inflatedLayout.findViewById(R.id.iv_lunbo);
Picasso.with(MainActivity.this).load(list.get(position).getImageResId()).into(imageView);
return imageView;
}
protected int getViewPagerItemLayoutResId() {return R.layout.item_in_viewpager;}
protected int getImageCount() {return list.size();}
protected void onImageClick(View view, int position) {
Snackbar.make(view,list.get(position).getMessage(),Snackbar.LENGTH_SHORT).show();
}
}
3.构建Proxy
public Proxy(List list, int interval, Adapter adapter);
interval为轮播时间间隔。
4.开始轮播
void Proxy.onBindView(ViewPager viewPager,View indicator);
轮播图ViewPager作为RecyclerView的一个Item来使用
1.在RecyclerView.Adapter的构造方法里构建com.xdandroid.lunboviewpager.Adapter
public com.xdandroid.lunboviewpager.Adapter(Context context);
需实现com.xdandroid.lunboviewpager.Adapter里的4个方法:
protected abstract int getViewPagerItemLayoutResId();//指定ViewPager的每一页的Layout资源ID
protected abstract View showImage(View inflatedLayout, int position);
inflatedLayout即根据上面的资源ID渲染出来的View,开发者需要通过findViewById找到布局中的图片控件,再使用图片加载框架(UIL、Picasso、Fresco等)把图片加载进去,最后返回图片控件。
protected abstract int getImageCount();//总页数
protected abstract void onImageClick(View view, int position);//OnClickListener
示例:
new com.xdandroid.lunboviewpager.Adapter(context) {
protected View showImage(View inflatedLayout, int position) {
ImageView imageView = (ImageView) inflatedLayout.findViewById(R.id.iv_lunbo);
Picasso.with(context).load(list.get(position).getImageResId()).into(imageView);
return imageView;
}
protected int getViewPagerItemLayoutResId() {return R.layout.item_in_viewpager;}
protected int getImageCount() {return list.size();}
protected void onImageClick(View view, int position) {
Snackbar.make(view,list.get(position).getMessage(),Snackbar.LENGTH_SHORT).show();
}
}
2.在RecyclerView.Adapter的构造方法里构建Proxy
public Proxy(List list, int interval, com.xdandroid.lunboviewpager.Adapter adapter);
interval为轮播时间间隔。
3.onBindViewHolder
先给ViewPager和Indicator设置需要的自定义属性(OnPageChangeListener, Indicator的填充颜色, etc.)
Indicator的可设置项参照JakeWharton/ViewPagerIndicator提供的API。
相对于JakeWharton的版本, 增加了对wrap_content的支持;
增加了一个API, 用于设置和得到圆点之间的距离相对于圆点半径的倍数 :
void CirclePageIndicator.setDistanceBetweenCircles(double timesToRadius_multiplier);
double CirclePageIndicator.getDistanceBetweenCirclesMultiplier()
最后,添加proxy.onBindView(holder.viewPager,holder.indicator);
示例:
@Override
public void onBindViewHolder(final MainAdapter.ViewHolder holder, int position) {
//设置当前被选中的圆点的填充颜色
holder.indicator_lunbo.setFillColor(context.getResources().getColor(R.color.colorAccent));
//设置圆点半径
holder.indicator_lunbo.setRadius(UIUtils.dp2px(holder.indicator_lunbo.getContext(), 3.25f));
//设置圆点之间的距离相对于圆点半径的倍数
holder.indicator_lunbo.setDistanceBetweenCircles(3.0);
proxy.onBindView(holder.vp_lunbo,holder.indicator_lunbo);
}