android 自动 轮播图,GitHub - YinChuanLiangLiang/LunboViewPager: Android 轮播ViewPager : 实现Banner轮播图效果. 页码指示...

LunboViewPager

对ViewPager和ViewPagerIndicator的简单封装,实现轮播图效果。

轮播图可以直接在Activity/Fragment中,也可以是RecyclerView的一个Item。

该有的基本都有,页码指示,左右无限循环翻页,定时自动翻页,用手指翻页时暂停自动翻页,只有一张图片时变为静态相框,解决原生ViewPager当页数为2时的滑动Bug。

提供CirclePageIndicator(圆点)指示器

video.gif

引入

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);

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值