封装一个ViewPager真正的实现图片无限循环滚动带导航点
效果图：
大家在写项目的过程中常常会碰到须要实现Viewpager里面载入几张图片来循环自己主动轮播的效果，假设不封装一下的话代码分散在activity里面会显得非常乱。并且也不利于我们下次复用，所以这里我把viewpager的相关代码抽取出来放在了一个类里面，使用的时候仅仅须要new 这个对象就可以。
直接看代码：
MyViewPager.java类：在activity中仅仅须要在初始化数据的时候增加MyViewPager myViewPager=new MyViewPager(this)这段代码就ok。
package com.duora.bobge.duoradeliverly_version2.custom_view;
import android.app.Activity;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.duora.bobge.duoradeliverly_version2.R;
import com.duora.bobge.duoradeliverly_version2.adapter.EventPageAdapter;
import com.duora.bobge.duoradeliverly_version2.base.BaseConfig;
import com.duora.bobge.duoradeliverly_version2.listener.NavigationPageChangeListener;
import java.util.ArrayList;
/**
* Created by bobge on 15/8/10.
*/
public class MyViewPager {
private Activity activity;
private ViewPager viewPager;
private LinearLayout mViewPoints;
private ArrayList<View> pageViews;
private ImageView imageView;
/** 将小圆点的图片用数组表示 */
private ImageView[] imageViews;
private Handler mHandler = new Handler() {
@Override
public void dispatchMessage(Message msg) {
switch (msg.what) {
case BaseConfig.MSG_CHANGE_PHOTO:
int index = viewPager.getCurrentItem();
viewPager.setCurrentItem(index + 1);
mHandler.sendEmptyMessageDelayed(BaseConfig.MSG_CHANGE_PHOTO,
BaseConfig.PHOTO_CHANGE_TIME);
break;
}
super.dispatchMessage(msg);
}
};
public MyViewPager(Activity activity) {
this.activity = activity;
findViewById(activity);
addData();
initPoint();
}
private void addData() {
pageViews = new ArrayList<View>();
for (int i = 0; i < 5; i++) {
ImageView imageView = new ImageView(activity);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
//picasso载入图片
switch (i){
case 0:
imageView.setBackgroundResource(R.mipmap.a);
break;
case 1:
imageView.setBackgroundResource(R.mipmap.b);
break;
case 2:
imageView.setBackgroundResource(R.mipmap.c);
break;
case 3:
imageView.setBackgroundResource(R.mipmap.e);
break;
case 4:
imageView.setBackgroundResource(R.mipmap.f);
break;
}
pageViews.add(imageView);
}
}
private void findViewById(Activity activity) {
this.viewPager= (ViewPager)activity.findViewById(R.id.viewPager_main);
this.mViewPoints= (LinearLayout)activity.findViewById(R.id.viewGroup);
}
//创建viewpager的那几个滑动的点
private void initPoint() {
// 创建imageviews数组，大小是要显示的图片的数量
imageViews = new ImageView[pageViews.size()];
// 加入小圆点的图片
for (int i = 0; i < pageViews.size(); i++) {
imageView = new ImageView(activity);
// 设置小圆点imageview的參数
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
20, 20);
layoutParams.setMargins(5, 0, 5, 0);
imageView.setLayoutParams(layoutParams);// 创建一个宽高均为20 的布局
// 将小圆点layout加入到数组中
imageViews[i] = imageView;
// 默认选中的是第一张图片，此时第一个小圆点是选中状态，其它不是
if (i == 0) {
imageViews[i]
.setBackgroundResource(R.mipmap.face_float_icon_on);
} else {
imageViews[i]
.setBackgroundResource(R.mipmap.face_float_icon);
}
// 将imageviews加入到小圆点视图组
mViewPoints.addView(imageViews[i]);
}
// 设置viewpager的适配器和监听事件
Log.i("test", pageViews.size() + "====");
viewPager.setAdapter(new EventPageAdapter(pageViews));
viewPager.setOnPageChangeListener(new NavigationPageChangeListener(pageViews, imageViews));
viewPager.setCurrentItem((pageViews.size()) * 50);
if(pageViews.size()>1){
mHandler.sendEmptyMessageDelayed(BaseConfig.MSG_CHANGE_PHOTO, BaseConfig.PHOTO_CHANGE_TIME);
}
}
}
它的滑动监听和适配器：
NavigationPageChangeListener.java看命名应该就能知道这个类的作用了，不多说。
package com.duora.bobge.duoradeliverly_version2.listener;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.ImageView;
import com.duora.bobge.duoradeliverly_version2.R;
import java.util.ArrayList;
/**
* Created by bobge on 15/8/5.
*/
//viewpager滑动监听
public class NavigationPageChangeListener implements ViewPager.OnPageChangeListener {
private ArrayList<View> pageViews;
/** 将小圆点的图片用数组表示 */
private ImageView[] imageViews;
public NavigationPageChangeListener(ArrayList<View> pageViews, ImageView[] imageViews) {
this.pageViews=pageViews;
this.imageViews=imageViews;
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int position) {
//当页面切换时设置导航点的状态
setPointStatus(position);
}
//设置导航点的状态
private void setPointStatus(int position) {
position=position%pageViews.size();
for (int i = 0; i < imageViews.length; i++) {
imageViews[position]
.setBackgroundResource(R.mipmap.face_float_icon_on);
// 不是当前选中的page。其小圆点设置为未选中的状态
if (position != i) {
imageViews[i]
.setBackgroundResource(R.mipmap.face_float_icon);
}
}
}
}EventPagerAdapter.java类是viewpager的适配器。instantiateItem方法做了一些处理。使事实上现无限循环。package com.duora.bobge.duoradeliverly_version2.adapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import java.util.ArrayList;
/**
* Created by bobge on 15/7/30.
*/
public class EventPageAdapter extends PagerAdapter {
private ArrayList<View> pageViews;
public EventPageAdapter(ArrayList<View> pageViews) {
this.pageViews=pageViews;
}
// 销毁position位置的界面
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(pageViews.get(position%pageViews.size()));
}
// 获取当前窗口界面数
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
// 初始化position位置的界面
@Override
public Object instantiateItem(View v, int position) {
try{
//((ViewPager) arg0).addView(list.get(arg1),0);
((ViewPager) v).addView((View)pageViews.get(position%pageViews.size()),0);
}catch (Exception e) {
// TODO: handle exception
}
return pageViews.get(position%pageViews.size());
}
@Override
public boolean isViewFromObject(View v, Object arg1) {
return v == arg1;
}
@Override
public void startUpdate(View arg0) {
}
@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
}
布局：custom_viewpager.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--带导航点的viewpager布局-->
<android.support.v4.view.ViewPager
android:id="@+id/viewPager_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:gravity="center_horizontal"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>在activity的布局中仅仅须要导入上面那个布局就可以：
<include layout="@layout/custom_viewpager" android:id="@+id/myViewPager" android:layout_width="match_parent" android:layout_height="@dimen/viewpager_height" />
