android图片轮播效果，开源框架RollViewPager的简单使用
学习Android自定义控件 之 轮播图（ViewPager）重点及学习 - - CSDN博客 http://blog.csdn.net/ITermeng/article/details/52170637，十分有用！！！
主要支持的一些功能：
支持无限循环。 触摸时会暂停播放，直到结束触摸一个延迟周期以后继续播放。参考他们的之后发现一个问题：刚开始轮播时，第一个的标题不显示，于是自己进行了代码修改，添加了点击图片的响应事件，整理了一些代码，图片缓存使用的是Glide。
1.添加权限：
//权限:网络请求、外部存储
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />2.添加Glide依赖
/*图片缓存,添加依赖Glide*/
compile 'com.github.bumptech.glide:glide:3.7.0'3.自定义LoopPictureView的xml布局：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:id="@+id/tv_title"
android:textSize="20sp"
android:textColor="@android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:padding="20dp"/>
<LinearLayout
android:id="@+id/ll_dot"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:padding="8dp"/>
RelativeLayout>3.自定义LoopPictureView extends FrameLayout ：
public class LoopPictureView extends FrameLayout {
private Context context;
private String[] imageTitle; //展示图片的标题
private List images = new ArrayList();//展示的图片控件的数组
private List imagesDots = new ArrayList();//展示图片位置的小圆点控件的数组
private static int DELAYTIME = 3000; //轮播图延迟换图的时间
private boolean isAutoPlay = true ;//轮播图自动播放
private int currentItem = 4;//当前显示的图片位序（从1开始算,所以从数组取对应数据时要减一）
public Handler handler = new Handler();
private ViewPager viewPager;
private int imageLength ;//有多少张图片
private LinearLayout dotLayout;
private TextView titleTV;
private boolean hasTitle;//是否有标题
public LoopPictureView(Context context) {
this(context, null);
}
public LoopPictureView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public LoopPictureView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
}
/**
* 提供接口：
* 使用轮播器时设置图片(图片id)、是否有标题、是否自动播放、最开始选中的图片位序（从1 开始算,所以从数组取对应数据时要减一）
*/
public void setImageRes(int[] imagesRes, boolean hasTitle, Boolean isAutoPlay, int index){
this.hasTitle = hasTitle;
this.isAutoPlay = isAutoPlay;
this.currentItem = index;
initView();//初始化控件
initImgFromRes(imagesRes);//根据图片个数生成imageview控件
startLoopPicture();
}
/**
* 提供接口：
* 使用轮播器时设置图片(图片URl)、是否有标题、是否自动播放、最开始选中的图片位序（从1 开始算,所以从数组取对应数据时要减一）
*/
public void setImageUrl(String[] imageUrl, boolean hasTitle, Boolean isAutoPlay, int index){
this.hasTitle = hasTitle;
this.isAutoPlay = isAutoPlay;
this.currentItem = index;
initView();
initImgFromUrl(imageUrl);
startLoopPicture();
}
/**
* 提供接口：
* 使用轮播器时设置图片的标题
*/
public void setImageTitle(String[] imageTitle){
this.imageTitle = imageTitle;
titleTV.setText( imageTitle[ currentItem - 1 ]);
}
/**
* 初始化轮播器布局
*/
private void initView() {
images.clear();//在最开始时，清除存储图片的数组里的数据
View view = LayoutInflater.from(context).inflate(R.layout.loop_pictures, this, true);
viewPager = (ViewPager)view.findViewById(R.id.vp);
dotLayout = (LinearLayout) view.findViewById(R.id.ll_dot);
titleTV = (TextView) view.findViewById(R.id.tv_title);
dotLayout.removeAllViews();//在最开始时，清除dotLayout里的所有控件
}
/**
* 初始化轮播器的图片(图片URL)
*/
private void initImgFromUrl(String[] imageUrl) {
imageLength = imageUrl.length;
for(int i = 0;inew ImageView(context);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
params.leftMargin = 5;
params.rightMargin = 5;
dotView.setImageResource(R.drawable.dot_blur);
dotLayout.addView(dotView, params);
imagesDots.add(dotView);
}
//设置第 currentItem 张轮播图的小圆点为选中状态
imagesDots.get( currentItem - 1 ).setImageResource(R.drawable.dot_focus);
//Glide加载图片缓存
for(int i = 0; i <= imageLength + 1; i++){
ImageView imageView = new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setBackgroundResource(R.drawable.loading);
if(i == 0){
Glide.with(this.context).load( imageUrl[imageLength - 1] ).into( imageView );
} else if(i == imageLength + 1){
Glide.with(this.context).load( imageUrl[0] ).into( imageView );
} else {
Glide.with(this.context).load( imageUrl[i - 1] ).into( imageView );
}
images.add(imageView);
//图片的点击事件
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
System.out.println("00000000000" + imageTitle[ currentItem - 1 ]);
}
});
}
}
/**
* 初始化轮播器的图片(图片id)
*/
private void initImgFromRes(int[] imagesRes) {
imageLength = imagesRes.length;
for(int i = 0; i < imageLength; i++){
ImageView dotView = new ImageView(context);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
params.leftMargin = 5;
params.rightMargin = 5;
dotView.setImageResource(R.drawable.dot_blur);
dotLayout.addView(dotView, params);
imagesDots.add(dotView);
}
//设置第 currentItem 张轮播图的小圆点为选中状态
imagesDots.get( currentItem - 1 ).setImageResource(R.drawable.dot_focus);
for(int i = 0;i<= imageLength+1 ; i++){
ImageView imageView = new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setBackgroundResource(R.drawable.loading);
if(i == 0){
imageView.setImageResource(imagesRes[imageLength - 1]);
} else if (i == imageLength + 1){
imageView.setImageResource(imagesRes[0]);
} else {
imageView.setImageResource(imagesRes[i - 1]);
}
images.add(imageView);
//图片的点击事件
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
System.out.println("00000000000" + imageTitle[ currentItem - 1 ]);
}
});
}
}
/**
* 设置ViewPager,开启轮播器
*/
private void startLoopPicture(){
viewPager.setAdapter(new LoopPicturesAdapter());
viewPager.setFocusable(true);
viewPager.setCurrentItem( currentItem );
viewPager.addOnPageChangeListener(new LoopPicturesListener());
//开启轮播器
handler.postDelayed(task, DELAYTIME);
}
private final Runnable task = new Runnable() {
@Override
public void run() {
if (isAutoPlay) {
currentItem = currentItem % (imageLength + 1) + 1;
if (currentItem == 1) {
viewPager.setCurrentItem(currentItem, false);
handler.post(task);
} else {
viewPager.setCurrentItem(currentItem);
handler.postDelayed(task, DELAYTIME);
}
} else {
handler.postDelayed(task, DELAYTIME);
}
}
};
class LoopPicturesAdapter extends PagerAdapter {
@Override
public int getCount() {
return images.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = images.get(position);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}
class LoopPicturesListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
for(int i = 0; iif(i == position - 1){
imagesDots.get(i).setImageResource(R.drawable.dot_focus);
if(hasTitle) {
titleTV.setText(imageTitle[i]);
}
} else {
imagesDots.get(i).setImageResource(R.drawable.dot_blur);
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
switch (state){
case 1:
isAutoPlay = false;
break;
case 2:
isAutoPlay = true;
break;
case 0:
if (viewPager.getCurrentItem() == 0) {
viewPager.setCurrentItem(imageLength, false);
} else if (viewPager.getCurrentItem() == imageLength + 1) {
viewPager.setCurrentItem(1, false);
}
currentItem = viewPager.getCurrentItem();
isAutoPlay = true;
break;
}
}
}
}
4.main的xml布局中使用此控件：
<com.lotus.looppicturesdemo.LoopPictureView
android:id="@+id/loopPicture"
android:layout_width="match_parent"
android:layout_height="250dp"/>5.mainactivity中直接使用：
LoopPictureView loopPicture;
loopPicture = (LoopPictureView) this.findViewById(R.id.loopPicture);
String[] imagesRes = new String[]{
"http://pic.sc.chinaz.com/files/pic/pic9/201604/apic20400.jpg",
"http://pics.sc.chinaz.com/files/pic/pic9/201602/apic19022.jpg",
"http://pics.sc.chinaz.com/files/pic/pic9/201603/fpic430.jpg",
"http://pics.sc.chinaz.com/files/pic/pic9/201605/apic20631.jpg"};
//设置图片(图片url)、是否有标题、是否自动播放、最开始选中的图片位序（从1 开始算,所以从数组取对应数据时要减一）
loopPicture.setImageUrl(imagesRes, true, true, 3);
// int[] imagesRes = {R.drawable.img1, R.drawable.img2, R.drawable.img3,
// R.drawable.img4};
//
// //设置图片(图片id)、是否有标题、是否自动播放、最开始选中的图片位序（从1 开始算,所以从数组取对应数据时要减一）
// loopPicture.setImageRes(imagesRes, true, true, 3);
String[] titles = {"111111111111111111", "2222222222222222",
"3333333333333", "4444444444444"};
loopPicture.setImageTitle(titles);//设置图片标题(图片与标题必须一一对应)