Android輪播圖控件的實現詳解(附GitHub開源鏈接)

輪播圖在Android開發中是非常常見的控件，一般App的首頁廣告和電商類App的商品詳情圖片都會用輪播圖來實現。可是Android源生的控件中卻沒有能直接拿來使用的輪播圖控件，所以一般的輪播圖效果都需要我們自己去實現。今天我就給大家介紹一個我自己寫的輪播圖控件：CustomBanner。有需要的同學可以直接訪問我的GitHub使用該控件。下面我將為大家詳細介紹CustomBanner控件的實現思路和細節。
（說明：下面我貼出來的代碼只是CustomBanner的代碼摘要，想要看完整源碼的同學請到GitHub下載或引用依賴）
1、布局
輪播圖一般由一個可以左右滾動、承載圖片的主體控件和一個顯示當前位置的指示器組成。CustomBanner的布局非常簡單，直接繼承FrameLayout，內部添加兩個子View：一個ViewPager(可以左右滾動、承載圖片的主體控件)和一個LinearLayout(指示器容器)。

public class CustomBanner<T> extends FrameLayout {

    private ViewPager mBannerViewPager;
    private LinearLayout mIndicatorLayout;

    //添加輪播圖ViewPager
    private void addBannerViewPager(Context context) {
        mBannerViewPager = new ViewPager(context);
        this.addView(mBannerViewPager);
    }

    //添加輪播圖指示器容器
    private void addIndicatorLayout(Context context) {
        mIndicatorLayout = new LinearLayout(context);
        LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        lp.gravity = analysisGravity(mIndicatorGravity);
        lp.setMargins(0, 0, 0, DensityUtils.dp2px(context, 8));
        mIndicatorLayout.setGravity(Gravity.CENTER);
        this.addView(mIndicatorLayout, lp);
    }
}

2、實現輪播圖的無限循環
輪播圖是需要左右無限循環滾動的，而ViewPager是有滾動邊界的。為了實現ViewPager循環滾動，我采用了網上一個很巧妙的實現方式。就是ViewPager的實際長度是它的應有長度+2，在ViewPager的應有長度的頭尾各加一個節點。頭節點的數據跟ViewPager的最后一個數據一樣，尾節點的數據跟ViewPager的第一個數據一樣。當ViewPager滾動到尾節點時，就無縫跳轉到第一個數據，當ViewPager滾動到頭節點時，就無縫跳轉到最后一個數據，由于跳轉的兩節點的數據是一樣的，而且是無縫跳轉，沒有過度動畫，所以用戶感覺不到ViewPager的顯示節點已經改變，就給用戶一種ViewPager在無限循環的錯覺。具體請看這里。
由于多加了兩個節點，所以在處理ViewPager的position時，實際的position和用戶所看到的position是不一樣的。比如：輪播圖有5張圖片，用戶看到的也應該是5張圖片，而實際上我們的ViewPager會有7張圖片，因為第1張圖片和第6張圖片是同一張圖片，第7張圖片和第2張圖片是同一張圖片。這里可能很不好理解，但是一定要理解，因為這是實現輪播圖循環輪播的關鍵。

     //ViewPager的實際長度是他的數據的長度+2
     @Override
    public int getCount() {
        return mDatas == null || mDatas.isEmpty() ? 0 : mDatas.size() + 2;
    }

//通過實際的position計算用戶所理解的position
private int getActualPosition(int position) {
        if (position == 0) {
            //如果是頭節點，返回最后一個數據的position
            //因為頭節點的數據和最后一個數據是一樣的。
            return mDatas.size() - 1;
        } else if (position == getCount() - 1) {
            //如果是尾節點，返回第一個數據的position
            //因為尾節點的數據和第一個數據是一樣的。
            return 0;
        } else {
            //除了頭尾以外，position節點的數據是mDatas中的第position - 1的下標的數據
            return position - 1;
        }
    }

3、設置ViewPager的滾動速度
ViewPager有自己的mScroller屬性，負責控制ViewPager的滾動速度。但是ViewPager的默認滾動速度太快了，而且ViewPager并沒有提供方法設置mScroller的滾動速度也沒有提供方法設置mScroller，所以我們需要通過反射用自己的mScroller替換掉ViewPager的mScroller，使我們可以完全控制和操作ViewPager的mScroller屬性。這不僅僅是實現我們自定義ViewPager的滾動速度，也是實現第2步中ViewPager無縫跳轉的關鍵。

    //通過反射替換掉mBannerViewPager的mScroller屬性
    private void replaceViewPagerScroll() {
        try {
            Field field = ViewPager.class.getDeclaredField("mScroller");
            field.setAccessible(true);
            mScroller = new ViewPagerScroller(mContext,
                    new AccelerateInterpolator());
            field.set(mBannerViewPager, mScroller);
        } catch (Exception e) {
        }
    }

    /**
     * 設置輪播圖的滾動速度
     *
     * @param scrollDuration
     */
    public CustomBanner<T> setScrollDuration(int scrollDuration) {
        mScroller.setScrollDuration(scrollDuration);
        return this;
    }

public class ViewPagerScroller extends Scroller {

    private int mScrollDuration = 550;
    //是否無縫跳轉
    private boolean sudden;

    public ViewPagerScroller(Context context) {
        super(context);
    }

    public ViewPagerScroller(Context context, Interpolator interpolator) {
        super(context, interpolator);
    }

    public ViewPagerScroller(Context context, Interpolator interpolator,
                             boolean flywheel) {
        super(context, interpolator, flywheel);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy, int duration) {
        super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy) {
        super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration);
    }

    public int getScrollDuration() {
        return mScrollDuration;
    }

    public void setScrollDuration(int scrollDuration) {
        this.mScrollDuration = scrollDuration;
    }

    public boolean isSudden() {
        return sudden;
    }

    public void setSudden(boolean zero) {
        this.sudden = zero;
    }
}

4、實現ViewPager的自動輪播
這個實現起來非常的簡單。直接利用Handler延遲發送消息的功能來進行輪播滾動的計時，在消息的處理中改變ViewPager顯示的Item，達到ViewPager的自動滾動效果，然后再Handler發送一個延遲消息，形成循環。

    private Handler mTimeHandler = new Handler();
    private Runnable mTurningTask = new Runnable() {
        @Override
        public void run() {
            if (isTurning && mBannerViewPager != null) {
                int page = mBannerViewPager.getCurrentItem() + 1;
                mBannerViewPager.setCurrentItem(page);
                mTimeHandler.postDelayed(mTurningTask, mIntervalTime);
            }
        }
    };
    
    /**
     * 啟動輪播
     * @param intervalTime 輪播間隔時間
     * @return
     */
    public CustomBanner<T> startTurning(long intervalTime) {
        isTurning = true;
        mIntervalTime = intervalTime;
        mTimeHandler.postDelayed(mTurningTask, mIntervalTime);
        return this;
    }

5、添加和更新指示器
指示器的指示點用指示器容器mIndicatorLayout來承載，當ViewPager滾動的時候，指示器也要相應的做更新

    //根據輪播圖的數量來添加指示器的點
    //指示器的點用ImageView來表示，樣式由使用者自定義
    private void initIndicator(int count) {
        mIndicatorLayout.removeAllViews();
        if (count > 0) {
            for (int i = 0; i < count; i++) {
                ImageView imageView = new ImageView(mContext);
                LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
0, DensityUtils.dp2px(mContext, 2), 0);
                mIndicatorLayout.addView(imageView, lp);
            }
        }
    }

    /**
     * 更新指示器
     */
    private void updateIndicator() {
        int count = mIndicatorLayout.getChildCount();
        //獲取ViewPager當前顯示的Item。
        int currentPage = getCurrentItem();
        if (count > 0) {
            for (int i = 0; i < count; i++) {
                ImageView view = (ImageView) mIndicatorLayout.getChildAt(i);
                if (i == currentPage) {
                    //設置選中樣式
                    view.setImageResource(mIndicatorSelectRes);
                } else {
                    //設置未選中樣式
                    view.setImageResource(mIndicatorUnSelectRes);
                }
            }
        }
    }

6、設置輪播圖數據
把輪播圖的基本功能都實現了之后，接下來就是填充數據了。下面先看設置數據的方法：

    /**
     * 設置輪播圖數據
     * @param creator 創建和更新輪播圖View的接口
     * @param data   輪播圖數據
     * @return
     */
    public CustomBanner<T> setPages(ViewCreator<T> creator, List<T> data) {
        mAdapter = new BannerPagerAdapter<T>(mContext, creator, data);
        mBannerViewPager.setAdapter(mAdapter);
        return this;
    }

代碼非常的簡單，其實就是給mBannerViewPager設置了一個Adapter。上面的setPages方法接收兩個參數：
1、creator：這是一個ViewCreator對象，ViewCreator是負責創建和更新輪播圖的接口。
2、data：這是輪播圖的數據。
他們的泛型T是輪播圖的數據類型，輪播圖的數據類型可以是任何的類型。
下面是ViewCreator接口代碼

    /**
     * 創建和更新輪播圖View的接口
     * @param <T>
     */
    public interface ViewCreator<T> {
        //創建輪播圖的每個項的View
        View createView(Context context, int position);
        //更新輪播圖
        void updateUI(Context context, View view, int position, T data);
    }

createView方法的返回值是View而不是ImageView，所以CustomBanner可以支持輪播所有的布局，而不僅僅是ImageView，雖然我們大部分情況使用的都是ImageView。
如果你現在還不清楚ViewCreator是干什么的，那么請看下面的代碼。下面是輪播圖適配器BannerPagerAdapter的核心代碼，通過這段代碼，你應該就能很清晰的理解ViewCreator的作用了。

    @Override
    public Object instantiateItem(ViewGroup container, final int position) {

        View view = views.get(position);

        if (view == null) {
            //mCreator就是調用者傳入的ViewCreator對象
            //通過mCreator創建輪播圖的布局，所以輪播圖的布局是由調用者創建的
            view = mCreator.createView(mContext, position);
            views.put(position, view);
        }
        
        final int item = getActualPosition(position);
        final T t = mData.get(item);
        
        //通過mCreator把更新輪播圖數據的操作交給調用者去實現
        mCreator.updateUI(mContext, view, item, t);
        container.addView(view);
        return view;
    }

CustomBanner的實現思路和代碼分析到這里就結束了。相信現在大家對于輪播圖的實現已經有了一定的了解了。至于CustomBanner的使用，我將在下一章《Android輪播圖控件CustomBanner的使用講解》具體講解，歡迎閱讀。下面先給大家看一下CustomBanner的效果：

演示.gif

上面貼出來的代碼只是CustomBanner的代碼摘要，完整的代碼請訪問我在GitHub中的CustomBanner項目。

文章已同步到我的CSDN博客

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,124評論 25贊 708
  • 內容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,878評論 22贊 665
  • 她特別喜歡Hello Kitty，所以我叫她Kitty女郎。 三年前的夏天，我在大學宿舍里整理東西，一個瘦高個的女...
    故人老大閱讀 480評論 0贊 0
  • 未來的未來 我不懂 迷失是怎樣的方向 過去又過去 我不會 回憶起缺失的味道 現在看現在 欣賞著風景的鏡框 清晨的初...
    T茗亦T閱讀 103評論 0贊 0
  • 第一封 傾城如昨， 歲月如她， 這一世你是我擱淺的蒹葭。 第二封 轉山轉水， 不為經綸，不拜佛塔， 只為你說過最深...
    納蘭木兒閱讀 825評論 0贊 23