Android實現圖片輪顯效果——自定義ViewPager控件

一、問題概述

　　使用ViewPager控件實現可橫向翻頁、水平切換圖片等效果，但ViewPager需要手動滑動才能切換頁面，圖片輪顯效果的效果本質上就是在ViewPager控件的基礎上讓它能自動的進行切換，所以實現圖片輪顯步驟如下：

1、  擴展ViewPager自定義一個MyScrollImageView類

2、  為MyScrollImageView定義適配器，裝載圖片信息

3、  定義圖片滑動動畫時間控制類

　　接下來我們就一步步實現下圖案例：

二、實現套路

1、為自定義ViewPager控件編寫適配器

　　我們先為我們的自定義ViewPager控件編寫一個適配器，用於加載要輪顯的圖片，這個和使用ViewPager控件一樣都要為適配器控件定義適配器

    // 適配器
    public  class  MyPagerAdapter  extends PagerAdapter {
        private Activity mActivity; // 上下文
        private List<View> mListViews; // 圖片組
        public MyPagerAdapter(){
        }
        public MyPagerAdapter(Activity mActivity,List<View> mListViews){
            this.mActivity=mActivity;
            this.mListViews=mListViews;
        }
        public int getCount() {
            if (mListViews.size() == 1) {// 一張圖片時不用流動
                return mListViews.size();
            }
            return Integer.MAX_VALUE;
        }
        /**
            返回List中的圖片元素裝載到控件中
*/
        public Object instantiateItem(View v, int i) {
            if (((ViewPager) v).getChildCount() == mListViews.size()) {
                ((ViewPager) v)
                        .removeView(mListViews.get(i % mListViews.size()));
            }
            ((ViewPager) v).addView(mListViews.get(i % mListViews.size()), 0);
            return mListViews.get(i % mListViews.size());
        }

        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == (arg1);
        }

        public void destroyItem(ViewGroup view, int i, Object object) {
            view.removeView(mListViews.get(i%mListViews.size()));
        }
        
    }

2、自定義一個MyScrollImageView類

　　自定義一個MyScrollImageView類，主要擴展一個start（…）方法，該方法實現按時間間隔不斷切換圖片

public class MyImgScroll extends ViewPager {
    Activity mActivity; // 上下文
    List<View> mListViews; // 圖片組
    int mScrollTime = 0;
    Timer timer;
    int oldIndex = 0;
    int curIndex = 0;

    public MyImgScroll(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 開始廣告滾動
     * 
     * @param mainActivity
     *            顯示廣告的主界面
     * @param imgList
     *            圖片列表, 不能為null ,最少一張
     * @param scrollTime
     *            滾動間隔 ,0為不滾動
     * @param ovalLayout
     *            圓點容器,可為空,LinearLayout類型
     * @param ovalLayoutId
     *            ovalLayout為空時 寫0, 圓點layout XMl
     * @param ovalLayoutItemId
     *            ovalLayout為空時 寫0,圓點layout XMl 圓點XMl下View ID
     * @param focusedId
     *            ovalLayout為空時 寫0, 圓點layout XMl 選中時的動畫
     * @param normalId
     *            ovalLayout為空時 寫0, 圓點layout XMl 正常時背景
     */
    public void start(Activity mainActivity, List<View> imgList,
            int scrollTime, LinearLayout ovalLayout, int ovalLayoutId,
            int ovalLayoutItemId, int focusedId, int normalId) {
        mActivity = mainActivity;
        mListViews = imgList;
        mScrollTime = scrollTime;
        // 設置圓點
        setOvalLayout(ovalLayout, ovalLayoutId, ovalLayoutItemId, focusedId,
                normalId);
        this.setAdapter(new MyPagerAdapter(mActivity,mListViews));// 設置適配器
        if (scrollTime != 0 && imgList.size() > 1) {
            // 設置滑動動畫時間  ,如果用默認動畫時間可不用 ,反射技術實現
             new FixedSpeedScroller(mActivity).setDuration(this, 700);
            startTimer();
            // 觸摸時停止滾動
            this.setOnTouchListener(new OnTouchListener() {
                public boolean onTouch(View v, MotionEvent event) {
                    if (event.getAction() == MotionEvent.ACTION_UP) {
                        startTimer();
                    } else {
                        stopTimer();
                    }
                    return false;
                }
            });
        } 
        if (mListViews.size() > 1) {
            this.setCurrentItem((Integer.MAX_VALUE / 2)
                    - (Integer.MAX_VALUE / 2) % mListViews.size());// 設置選中為中間/圖片為和第0張一樣
        }
    }

    // 設置圓點
    private void setOvalLayout(final LinearLayout ovalLayout, int ovalLayoutId,
            final int ovalLayoutItemId, final int focusedId, final int normalId) {
        if (ovalLayout != null) {
            LayoutInflater inflater=LayoutInflater.from(mActivity);
            for (int i = 0; i < mListViews.size(); i++) {
                ovalLayout.addView(inflater.inflate(ovalLayoutId, null));
                
            }
            //選中第一個
            ovalLayout.getChildAt(0).findViewById(ovalLayoutItemId)
            .setBackgroundResource(focusedId);
            this.setOnPageChangeListener(new OnPageChangeListener() {
                public void onPageSelected(int i) {
                    curIndex = i % mListViews.size();
                    //取消圓點選中
                    ovalLayout.getChildAt(oldIndex).findViewById(ovalLayoutItemId)
                            .setBackgroundResource(normalId);
                     //圓點選中
                    ovalLayout.getChildAt(curIndex).findViewById(ovalLayoutItemId)
                    .setBackgroundResource(focusedId);
                    oldIndex = curIndex;
                }

                public void onPageScrolled(int arg0, float arg1, int arg2) {
                }

                public void onPageScrollStateChanged(int arg0) {
                }
            });
        }
    }
    /**
     * 取得當明選中下標
     * @return
     */
    public int getCurIndex() {
        return curIndex;
    }
    /**
     * 停止滾動
     */
    public void stopTimer() {
        if (timer != null) {
            timer.cancel();
            timer = null;
        }
    }

    /**
     * 開始滾動
     */
    public void startTimer() {
        timer = new Timer();
        timer.schedule(new TimerTask() {
            public void run() {
                mActivity.runOnUiThread(new Runnable() {
                    public void run() {
                        MyImgScroll.this.setCurrentItem(MyImgScroll.this
                                .getCurrentItem() + 1);//設置控件當前項（改變圖片）
                    }
                });
            }
        }, mScrollTime, mScrollTime);
    }

}

3、定義圖片滑動動畫時間控制類

package com.tianshicoffeeom.app.imgscroll;
import java.lang.reflect.Field;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.view.animation.Interpolator;
import android.widget.Scroller;
 /**
  * 圖片滑動動畫時間控制類  , 如果采用默認時間可不用這個類 ,通過反射技術改變ViewPager的滑動時間
  *
  */
public class FixedSpeedScroller extends Scroller {  
    private Context context;
    private int mDuration = 500;  
    public FixedSpeedScroller(Context context) {  
        super(context);  
        this.context=context;
    }  
    public FixedSpeedScroller(Context context, Interpolator interpolator) {  
        super(context, interpolator);  
        this.context=context;
    } 
    /**
     *  設置改變ViewPager的滑動時間  
     * @param vp  ViewPager 對象
     * @param time  時間
     */
    public void setDuration(ViewPager vp,int time) {
         try {
             Field field = ViewPager.class.getDeclaredField("mScroller");
             field.setAccessible(true);
             this.setmDuration(time);//設置翻動時間
             field.set(vp, this);
         } catch (Exception e) {

         }
     } 
    @Override  
    public void startScroll(int startX, int startY, int dx, int dy, int duration) {  
        //System.out.println("startScroll1");
        super.startScroll(startX, startY, dx, dy, mDuration);  
    }  
    @Override  
    public void startScroll(int startX, int startY, int dx, int dy) {  
        //System.out.println("startScroll2");
        super.startScroll(startX, startY, dx, dy, mDuration);  
    }  
    public void setmDuration(int time) {  
        mDuration = time;  
    }  
    public int getmDuration() {  
        return mDuration;  
    }  
}

4、編寫MainActivity，測試組件

public class MainActivity extends Activity {
    
    private MyImgScroll myPager; // 圖片容器
    private LinearLayout ovalLayout; // 圓點容器
    private List<View> listViews; // 圖片組
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myPager = (MyImgScroll) findViewById(R.id.myvp);
        ovalLayout = (LinearLayout) findViewById(R.id.vb);
        InitViewPager();//初始化圖片
        //開始滾動
        myPager.start(this, listViews, 4000, ovalLayout,
                R.layout.ad_bottom_item, R.id.ad_item_v,
                R.drawable.dot_focused, R.drawable.dot_normal);
    }
    @Override
    protected void onRestart() {
        myPager.startTimer();
        super.onRestart();
    }
    
    @Override
    protected void onStop() {
        myPager.stopTimer();
        super.onStop();
    }
    /**
     * 初始化圖片
     */
    private void InitViewPager() {
        listViews = new ArrayList<View>();
        int[] imageResId = new int[] { R.drawable.banner1, R.drawable. banner2,
                R.drawable. banner3, R.drawable.d, R.drawable. banner4 };
        for (int i = 0; i < imageResId.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setOnClickListener(new OnClickListener() {
                public void onClick(View v) {// 設置圖片點擊事件
                    Toast.makeText(MainActivity.this,
                            "點擊了:" + myPager.getCurIndex(), Toast.LENGTH_SHORT)
                            .show();
                }
            });
            imageView.setImageResource(imageResId[i]);
            imageView.setScaleType(ScaleType.CENTER_CROP);
            listViews.add(imageView);
        }
    }

}

5、MainActivity布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <com.jereh.view. MyScrollImageView
        android:id="@+id/myvp"
        android:layout_width="fill_parent"
        android:layout_height="120dp" />
    <LinearLayout
        android:id="@+id/vb"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="3dip"
        android:gravity="center"
        android:orientation="horizontal" >
    </LinearLayout>
</LinearLayout>

 

　　完！

 

作者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
本文版權歸煙台傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。