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

2022-04-05 13:05:30

效果图：

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

码农公寓

相关文章