輪播圖在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的效果：
上面貼出來的程式碼只是CustomBanner的程式碼摘要，完整的程式碼請訪問我在GitHub中的CustomBanner專案。
文章已同步到我的CSDN部落格