輪播圖在Android開發(fā)中是非常常見的控件，一般App的首頁(yè)廣告和電商類App的商品詳情圖片都會(huì)用輪播圖來實(shí)現(xiàn)?？墒茿ndroid源生的控件中卻沒有能直接拿來使用的輪播圖控件，所以一般的輪播圖效果都需要我們自己去實(shí)現(xiàn)。今天我就給大家介紹一個(gè)我自己寫的輪播圖控件：CustomBanner。有需要的同學(xué)可以直接訪問我的GitHub使用該控件。下面我將為大家詳細(xì)介紹CustomBanner控件的實(shí)現(xiàn)思路和細(xì)節(jié)。
（說明：下面我貼出來的代碼只是CustomBanner的代碼摘要，想要看完整源碼的同學(xué)請(qǐng)到GitHub下載或引用依賴）
1、布局
輪播圖一般由一個(gè)可以左右滾動(dòng)、承載圖片的主體控件和一個(gè)顯示當(dāng)前位置的指示器組成。CustomBanner的布局非常簡(jiǎn)單，直接繼承FrameLayout，內(nèi)部添加兩個(gè)子View：一個(gè)ViewPager(可以左右滾動(dòng)、承載圖片的主體控件)和一個(gè)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、實(shí)現(xiàn)輪播圖的無限循環(huán)
輪播圖是需要左右無限循環(huán)滾動(dòng)的，而ViewPager是有滾動(dòng)邊界的。為了實(shí)現(xiàn)ViewPager循環(huán)滾動(dòng)，我采用了網(wǎng)上一個(gè)很巧妙的實(shí)現(xiàn)方式。就是ViewPager的實(shí)際長(zhǎng)度是它的應(yīng)有長(zhǎng)度+2，在ViewPager的應(yīng)有長(zhǎng)度的頭尾各加一個(gè)節(jié)點(diǎn)。頭節(jié)點(diǎn)的數(shù)據(jù)跟ViewPager的最后一個(gè)數(shù)據(jù)一樣，尾節(jié)點(diǎn)的數(shù)據(jù)跟ViewPager的第一個(gè)數(shù)據(jù)一樣。當(dāng)ViewPager滾動(dòng)到尾節(jié)點(diǎn)時(shí)，就無縫跳轉(zhuǎn)到第一個(gè)數(shù)據(jù)，當(dāng)ViewPager滾動(dòng)到頭節(jié)點(diǎn)時(shí)，就無縫跳轉(zhuǎn)到最后一個(gè)數(shù)據(jù)，由于跳轉(zhuǎn)的兩節(jié)點(diǎn)的數(shù)據(jù)是一樣的，而且是無縫跳轉(zhuǎn)，沒有過度動(dòng)畫，所以用戶感覺不到ViewPager的顯示節(jié)點(diǎn)已經(jīng)改變，就給用戶一種ViewPager在無限循環(huán)的錯(cuò)覺。具體請(qǐng)看這里。
由于多加了兩個(gè)節(jié)點(diǎn)，所以在處理ViewPager的position時(shí)，實(shí)際的position和用戶所看到的position是不一樣的。比如：輪播圖有5張圖片，用戶看到的也應(yīng)該是5張圖片，而實(shí)際上我們的ViewPager會(huì)有7張圖片，因?yàn)榈?張圖片和第6張圖片是同一張圖片，第7張圖片和第2張圖片是同一張圖片。這里可能很不好理解，但是一定要理解，因?yàn)檫@是實(shí)現(xiàn)輪播圖循環(huán)輪播的關(guān)鍵。
//ViewPager的實(shí)際長(zhǎng)度是他的數(shù)據(jù)的長(zhǎng)度+2
@Override
public int getCount() {
return mDatas == null || mDatas.isEmpty() ? 0 : mDatas.size() + 2;
}
//通過實(shí)際的position計(jì)算用戶所理解的position
private int getActualPosition(int position) {
if (position == 0) {
//如果是頭節(jié)點(diǎn)，返回最后一個(gè)數(shù)據(jù)的position
//因?yàn)轭^節(jié)點(diǎn)的數(shù)據(jù)和最后一個(gè)數(shù)據(jù)是一樣的。
return mDatas.size() - 1;
} else if (position == getCount() - 1) {
//如果是尾節(jié)點(diǎn)，返回第一個(gè)數(shù)據(jù)的position
//因?yàn)槲补?jié)點(diǎn)的數(shù)據(jù)和第一個(gè)數(shù)據(jù)是一樣的。
return 0;
} else {
//除了頭尾以外，position節(jié)點(diǎn)的數(shù)據(jù)是mDatas中的第position - 1的下標(biāo)的數(shù)據(jù)
return position - 1;
}
}
3、設(shè)置ViewPager的滾動(dòng)速度
ViewPager有自己的mScroller屬性，負(fù)責(zé)控制ViewPager的滾動(dòng)速度。但是ViewPager的默認(rèn)滾動(dòng)速度太快了，而且ViewPager并沒有提供方法設(shè)置mScroller的滾動(dòng)速度也沒有提供方法設(shè)置mScroller，所以我們需要通過反射用自己的mScroller替換掉ViewPager的mScroller，使我們可以完全控制和操作ViewPager的mScroller屬性。這不僅僅是實(shí)現(xiàn)我們自定義ViewPager的滾動(dòng)速度，也是實(shí)現(xiàn)第2步中ViewPager無縫跳轉(zhuǎn)的關(guān)鍵。
//通過反射替換掉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) {
}
}
/**
* 設(shè)置輪播圖的滾動(dòng)速度
*
* @param scrollDuration
*/
public CustomBanner<T> setScrollDuration(int scrollDuration) {
mScroller.setScrollDuration(scrollDuration);
return this;
}
public class ViewPagerScroller extends Scroller {
private int mScrollDuration = 550;
//是否無縫跳轉(zhuǎn)
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、實(shí)現(xiàn)ViewPager的自動(dòng)輪播
這個(gè)實(shí)現(xiàn)起來非常的簡(jiǎn)單。直接利用Handler延遲發(fā)送消息的功能來進(jìn)行輪播滾動(dòng)的計(jì)時(shí)，在消息的處理中改變ViewPager顯示的Item，達(dá)到ViewPager的自動(dòng)滾動(dòng)效果，然后再Handler發(fā)送一個(gè)延遲消息，形成循環(huán)。
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);
}
}
};
/**
* 啟動(dòng)輪播
* @param intervalTime 輪播間隔時(shí)間
* @return
*/
public CustomBanner<T> startTurning(long intervalTime) {
isTurning = true;
mIntervalTime = intervalTime;
mTimeHandler.postDelayed(mTurningTask, mIntervalTime);
return this;
}
5、添加和更新指示器
指示器的指示點(diǎn)用指示器容器mIndicatorLayout來承載，當(dāng)ViewPager滾動(dòng)的時(shí)候，指示器也要相應(yīng)的做更新
//根據(jù)輪播圖的數(shù)量來添加指示器的點(diǎn)
//指示器的點(diǎn)用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當(dāng)前顯示的Item。
int currentPage = getCurrentItem();
if (count > 0) {
for (int i = 0; i < count; i++) {
ImageView view = (ImageView) mIndicatorLayout.getChildAt(i);
if (i == currentPage) {
//設(shè)置選中樣式
view.setImageResource(mIndicatorSelectRes);
} else {
//設(shè)置未選中樣式
view.setImageResource(mIndicatorUnSelectRes);
}
}
}
}
6、設(shè)置輪播圖數(shù)據(jù)
把輪播圖的基本功能都實(shí)現(xiàn)了之后，接下來就是填充數(shù)據(jù)了。下面先看設(shè)置數(shù)據(jù)的方法：
/**
* 設(shè)置輪播圖數(shù)據(jù)
* @param creator 創(chuàng)建和更新輪播圖View的接口
* @param data 輪播圖數(shù)據(jù)
* @return
*/
public CustomBanner<T> setPages(ViewCreator<T> creator, List<T> data) {
mAdapter = new BannerPagerAdapter<T>(mContext, creator, data);
mBannerViewPager.setAdapter(mAdapter);
return this;
}
代碼非常的簡(jiǎn)單，其實(shí)就是給mBannerViewPager設(shè)置了一個(gè)Adapter。上面的setPages方法接收兩個(gè)參數(shù)：
1、creator：這是一個(gè)ViewCreator對(duì)象，ViewCreator是負(fù)責(zé)創(chuàng)建和更新輪播圖的接口。
2、data：這是輪播圖的數(shù)據(jù)。
他們的泛型T是輪播圖的數(shù)據(jù)類型，輪播圖的數(shù)據(jù)類型可以是任何的類型。
下面是ViewCreator接口代碼
/**
* 創(chuàng)建和更新輪播圖View的接口
* @param <T>
*/
public interface ViewCreator<T> {
//創(chuàng)建輪播圖的每個(gè)項(xiàng)的View
View createView(Context context, int position);
//更新輪播圖
void updateUI(Context context, View view, int position, T data);
}
createView方法的返回值是View而不是ImageView，所以CustomBanner可以支持輪播所有的布局，而不僅僅是ImageView，雖然我們大部分情況使用的都是ImageView。
如果你現(xiàn)在還不清楚ViewCreator是干什么的，那么請(qǐng)看下面的代碼。下面是輪播圖適配器BannerPagerAdapter的核心代碼，通過這段代碼，你應(yīng)該就能很清晰的理解ViewCreator的作用了。
@Override
public Object instantiateItem(ViewGroup container, final int position) {
View view = views.get(position);
if (view == null) {
//mCreator就是調(diào)用者傳入的ViewCreator對(duì)象
//通過mCreator創(chuàng)建輪播圖的布局，所以輪播圖的布局是由調(diào)用者創(chuàng)建的
view = mCreator.createView(mContext, position);
views.put(position, view);
}
final int item = getActualPosition(position);
final T t = mData.get(item);
//通過mCreator把更新輪播圖數(shù)據(jù)的操作交給調(diào)用者去實(shí)現(xiàn)
mCreator.updateUI(mContext, view, item, t);
container.addView(view);
return view;
}
CustomBanner的實(shí)現(xiàn)思路和代碼分析到這里就結(jié)束了。相信現(xiàn)在大家對(duì)于輪播圖的實(shí)現(xiàn)已經(jīng)有了一定的了解了。至于CustomBanner的使用，我將在下一章《Android輪播圖控件CustomBanner的使用講解》具體講解，歡迎閱讀。下面先給大家看一下CustomBanner的效果：
上面貼出來的代碼只是CustomBanner的代碼摘要，完整的代碼請(qǐng)?jiān)L問我在GitHub中的CustomBanner項(xiàng)目。
文章已同步到我的CSDN博客
