封装一个ViewPager真正的实现图片无限循环滚动带导航点

最新推荐文章于 2022-05-30 20:36:52 发布

阳光男孩joe

最新推荐文章于 2022-05-30 20:36:52 发布

阅读量583

点赞数

分类专栏： android

android 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

时间 2015-08-10 15:19:22 CSDN博客

原文 http://blog.csdn.net/u011007829/article/details/47398913

主题 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"
    />