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

来源：互联网发布：台达plc编程软件有哪些编辑：程序博客网时间：2024/04/28 10:07

效果图：

大家在写项目的过程中经常会碰到需要实现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"    />

1 0