1. 程式人生 > >封裝一個ViewPager真正的實現圖片無限迴圈滾動帶導航點

封裝一個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"
/>