Android實現帶指示器的自動輪播式ViewPager
前言
最近在做項目的時候，有個需求就是實現自動輪播式的ViewPager，最直觀的例子就是知乎日報頂部的ViewPager，它內部有著好幾個子view，每個一段時間便自動滑動到下一個item view，而底部的指示器也隨之跟著改變。使用這種ViewPager的好處是在有限的空間內可以展示出多樣化的信息。輪播式ViewPager廣泛應用于各種應用內部，用于展示廣告等。抱著學習和分享的目的，筆者把輪播式ViewPager寫成了一個獨立的控件，以方便以后的使用。
效果展示
話不多說，我們先來看看實現的效果是怎樣的：
從上面的動態(tài)圖可以看到，當我們手指拖動ViewPager的時候，下方的指示器隨著頁面的滑動而滑動，當點擊添加數據的按鈕的時候，ViewPager的數據項變多，同時下方的指示器也隨之改變，適應了數據項的數目。
從上面的動態(tài)圖可以看到，當我們不用手指進行拖動的時候，該ViewPager會每隔4s左右的時間自動進行滾動，滾動到最后一個item view的時候，下一次會滾到第一個位置。
GitHub地址及使用介紹
讀者可以直接到我的GitHub中獲取源碼。
GitHub：BannerViewPager，控件及其相關文件都放在了該目錄下的library模塊內，而app模塊則是上面效果展示的一個簡單應用。
通過以下幾個步驟，就能方便地使用該控件了：
1、像普通的ViewPager一樣，在布局文件中放入該控件如下：
<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.chenyu.library.bannerViewPager.BannerViewPager android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="200dp"> </com.chenyu.library.bannerViewPager.BannerViewPager> <!-- others --> </LinearLayout>
2、獲取BannerViewPager的實例，進行相應的配置，比如我們使用ViewPager的時候，也需要設置它的適配器等。這里筆者實現了一個ViewPagerAdapter，用作BannerViewPager的適配器：
//獲取BannerViewPager實例
bannerViewPager = (BannerViewPager) findViewById(R.id.banner);
//實例化ViewPagerAdapter，第一個參數是View集合，第二個參數是頁面點擊監(jiān)聽器
mAdapter = new ViewPagerAdapter(mViews, new OnPageClickListener() {
@Override
public void onPageClick(View view, int position) {
Log.d("cylog","position:"+position);
}
});
//設置適配器
bannerViewPager.setAdapter(mAdapter);
和一般的ViewPager沒什么兩樣，都是：獲取實例——創(chuàng)建適配器——設置適配器。而適配器的數據集一般都是一個View集合，用作ViewPager的item view，所以需要事先準備好相應的View集合。此外，一般輪播式ViewPager點擊某一項后會打開相應的頁面，所以這里提供了一個OnPageClickListener的監(jiān)聽器，在創(chuàng)建適配器的時候同時創(chuàng)建該監(jiān)聽器即可。
原理簡析
接下來，筆者將簡要分析BannerViewPager的實現思路，具體的請讀者參考源碼~
實現自動滾動
首先，我們先思考一下，系統自帶的ViewPager是一個獨立控件，沒有指示器，也沒有自動滾動的功能，但是它是一個現成的，可左右滑動的控件，我們肯定是需要ViewPager的，因此，我們可以利用一個布局，把ViewPager包裹起來，同時在這個布局里面再放入indicator(指示器)。
那么，第一步，先新建BannerViewPager.java繼承自FrameLayout，而這個FrameLayout有兩個子元素：ViewPager和indicator。至于indicator，下面會說到。在構造函數內對這兩個控件進行初始化先：
public class BannerViewPager extends FrameLayout implements ViewPager.OnPageChangeListener {
private ViewPager mViewPager;
private ViewPagerIndicator mIndicator;
private ViewPagerAdapter mAdapter;
//...
public BannerViewPager(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
initViews();
}
private void initViews() {
//initialize the viewpager
mViewPager = new ViewPager(mContext);
ViewPager.LayoutParams lp = new ViewPager.LayoutParams();
lp.width = ViewPager.LayoutParams.MATCH_PARENT;
lp.height = ViewPager.LayoutParams.MATCH_PARENT;
mViewPager.setLayoutParams(lp);
//initialize the indicator
mIndicator = new ViewPagerIndicator(mContext);
FrameLayout.LayoutParams indicatorlp = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
indicatorlp.gravity = Gravity.BOTTOM | Gravity.CENTER;
indicatorlp.bottomMargin = 20;
mIndicator.setLayoutParams(indicatorlp);
}
//省略...
}
這里沒什么好說的，主要是對ViewPager和ViewPagerIndicator進行初始化，設置它們的布局參數以便在FrameLayout中得到正確的顯示。
接著，對ViewPager實現自動滾動，這個的實現原理也不難，我們只要知道每時每刻的ViewPager的滑動狀態(tài)、當前的page position值即可，而ViewPager有這樣一個監(jiān)聽器：ViewPager.OnPageChangeListener，只要ViewPager進行了滑動，就會回調這個監(jiān)聽器的如下幾個方法：
public interface OnPageChangeListener {
//只要ViewPager進行了滑動，該方法就會回調
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
//當前頁面被選定的時候，回調
public void onPageSelected(int position);
//ViewPager的狀態(tài)發(fā)生改變的時候，回調
public void onPageScrollStateChanged(int state);
}
那么，我們?yōu)閂iewPager設置監(jiān)聽器(調用addOnPageChangeListener方法)，并且重寫這幾個方法以實現我們的需求：
//保存當前的position值
private int mCurrentPosition;
//viewpager's rolling state
private int mViewPagerScrollState;
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
setIndicator(position,positionOffset); //下面會講到
}
@Override
public void onPageSelected(int position) {
mCurrentPosition = position;
}
@Override
public void onPageScrollStateChanged(int state) {
if(state == ViewPager.SCROLL_STATE_DRAGGING){
mViewPagerScrollState = ViewPager.SCROLL_STATE_DRAGGING;
}else if(state == ViewPager.SCROLL_STATE_IDLE){
mReleasingTime = (int) System.currentTimeMillis();
mViewPagerScrollState = ViewPager.SCROLL_STATE_IDLE;
}
}
每當當前頁面被選中的時候，就會調用onPageSelected方法，此時保存當前position值。那么，什么叫做當前頁面被選中呢？經過實驗驗證，當一個Item被完全展示在ViewPager中的時候，就是選中狀態(tài)，但如果當前正在被手指拖動，即使下一個item滑動到了中間位置，也不是選中狀態(tài)。接著，我們看onPageScrollStateChanged方法，當ViewPager的狀態(tài)發(fā)生改變的時候，就會觸發(fā)。那么，**ViewPager的狀態(tài)改變是什么意思呢？**ViewPager有如下三種狀態(tài)：IDLE，停止狀態(tài)，無手指觸摸；DRAGGING，正在被手指拖動；SETTLING，松開手指的時候，ViewPager由于慣性向能滑到的最后一個位置滑去的狀態(tài)。我們重寫的方法中，mViewPageSrollState記錄了ViewPager的實時狀態(tài)，同時停止狀態(tài)的時候，也記錄了一個mReleasingTime值，這個值的作用下面會介紹。通過這個監(jiān)聽器，我們獲取到了mCurrentPosition和mViewPageScrollState這兩個值。
接下來，我們要考慮自動任務的問題了。在Android中，自動任務可以使用Handler和Runnable來實現，通過postDelay方法來不斷實現循環(huán)，代碼如下：
private Handler mHandler = new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what){
case MESSAGE_AUTO_ROLLING:
if(mCurrentPosition == mAdapter.getCount() - 1){
mViewPager.setCurrentItem(0,true);
}else {
mViewPager.setCurrentItem(mCurrentPosition + 1,true);
}
postDelayed(mAutoRollingTask,mAutoRollingTime);
break;
case MESSAGE_AUTO_ROLLING_CANCEL:
postDelayed(mAutoRollingTask,mAutoRollingTime);
break;
}
}
};
/**
* This runnable decides the viewpager should roll to next page or wait.
*/
private Runnable mAutoRollingTask = new Runnable() {
@Override
public void run() {
int now = (int) System.currentTimeMillis();
int timediff = mAutoRollingTime;
if(mReleasingTime != 0){
timediff = now - mReleasingTime;
}
if(mViewPagerScrollState == ViewPager.SCROLL_STATE_IDLE){
//if user's finger just left the screen,we should wait for a while.
if(timediff >= mAutoRollingTime * 0.8){
mHandler.sendEmptyMessage(MESSAGE_AUTO_ROLLING);
}else {
mHandler.sendEmptyMessage(MESSAGE_AUTO_ROLLING_CANCEL);
}
}else if(mViewPagerScrollState == ViewPager.SCROLL_STATE_DRAGGING){
mHandler.sendEmptyMessage(MESSAGE_AUTO_ROLLING_CANCEL);
}
}
};
在mAutoRollingTask這個Runnable內，我們根據不同的mViewPagerScrollState來決定是讓ViewPager滾動到下一個page還是等待，因為如果用戶當前正在觸摸ViewPage，那么肯定是不能自動滾動到下一頁的，此外，還有一種情況，就是當用戶手指離開屏幕的時候，需要等待一段時間才能開始自動滾動任務，否則會造成不好的用戶體驗，這也就是mReleasingTime的作用之處了。在Handler中，根據Runnable發(fā)送過來的不同信息來進行不同的操作，如果需要滾動到下一個頁面，則調用ViewPager#setCurrentItem方法來進行滑動，該方法有兩個參數，第一個參數是要滑動的位置，第二個參數表示是否開啟動畫。
實現指示器
接下來，我們來考慮，指示器怎么實現。指示器有如下需求：指示器由一系列圓點構成，未被選中的Page所對應的圓點為灰色，而選中的Page所對應的圓點為橙色，橙色的圓點能隨著Page的滑動而滑動。當ViewPage的數據變動的時候，比如新增了頁面，那么指示器所包含的圓點也會隨著變多。
那么，我們可以這樣來實現需求：灰色的圓點作為Indicator的背景，通過onDraw()方法來繪制，而橙色圓點則通過一個子View來顯示，利用onLayout()方法來控制它的位置，這樣就能實現橙色圓點在灰色圓點上運動的效果了。而它們具體的位置控制，可以利用上面ViewPager.OnPageChangeListener#onPageScrolled方法來獲取具體的位置以及位置偏移百分比。
我們先來實現繪制部分，新建ViewPagerIndicator.java繼承自LinearLayout，先對屬性初始化：
public class ViewPagerIndicator extends LinearLayout {
private Context mContext;
private Paint mPaint;
private View mMoveView;
//省略...
public ViewPagerIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
init();
}
private void init() {
//setOrientation(LinearLayout.HORIZONTAL);
setWillNotDraw(false);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.GRAY);
mMoveView = new MoveView(mContext);
addView(mMoveView);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(mPadding + (mRadius*2 + mPadding) * mItemCount,2*mRadius + 2*mPadding);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for(int i = 0;i < mItemCount;i++){
canvas.drawCircle(mRadius + mPadding + mRadius * i *2 + mPadding * i,
mRadius + mPadding,mRadius,mPaint);
}
}
//省略...
private class MoveView extends View {
private Paint mPaint;
public MoveView(Context context) {
super(context);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.argb(255,255,176,93));
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(mRadius*2,mRadius*2);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(mRadius,mRadius,mRadius,mPaint);
}
}
}
從上面的代碼可以看到，在init()方法內，我們調用了setWillNotDraw(false)方法，這個方法有什么用呢？如果有寫過自定義View的讀者應該知道，ViewGroup默認是不會調用它自身的onDraw()方法的，只有調用了該方法設置為false或者給ViewGroup設置一種背景顏色的情況下才會調用onDraw()方法。
解決了這個問題后，我們來看onMeasure()方法，在這個方法內，我們要對該indicator的寬高做出測量，以便接下來的布局和繪制流程，而對于我們的需求而言，只要該布局能夠包裹住我們的指示器，并且四邊留有一定的空間即可，那么布局的寬度就與Page的數量有關了。為了方便起見，這里先給一個默認值，比如5個Page，那么對應5個灰色的圓點。
我們接著看onDraw()方法，這個方法內部，根據mItemCount的數量，來進行繪制圓形，這里沒什么好講的，只要注意他們之間的距離就可以了。
接著，我們來繪制橙色的圓點，新建一個內部類，繼承自View，同樣通過onMeasure、onDraw方法來進行測量、繪制流程，只不過顏色變了而已。
好了，繪制部分就完成了，接下來就是讓這個MoveView進行移動了，由于要使MoveView配合Page的滑動而滑動，我們需要Page的具體位置以及位置偏移量，而這兩個數值是在BannerViewPager的內部中獲得的，所以我們可以在BannerViewPager中，每一次調用onPageScrolled方法的時候，來調用我們的ViewPagerIndicator的一個方法，而在這個方法內部，來請求布局，這樣就能實現MoveView隨著Page的滑動而滑動的效果了，具體如下：
public class ViewPagerIndicator extends LinearLayout {
//以上省略..
public void setPositionAndOffset(int position,float offset){
this.mCurrentPosition = position;
this.mPositionOffset =offset;
requestLayout();
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
mMoveView.layout(
(int) (mPadding + mDistanceBtwItem * (mCurrentPosition + mPositionOffset) ),
mPadding,
(int) (mDistanceBtwItem * ( 1 + mCurrentPosition + mPositionOffset) ),
mPadding+mRadius*2);
}
}
在setPositionAndOffset方法內調用了requestLayout()方法，這個方法會導致View樹的測量、布局、重繪流程的發(fā)生，因此在onLayout方法內，通過mCurrentPosition、mPositionOffset這兩個值來控制MoveView的位置就可以了。
好了，到現在為止，ViewPagerIndicator基本已經完成了，但是還有一個問題，如果適配器里面的數據刷新了，page的數量變多了，而指示器的數目卻依然沒變，上面我們使用的mItemCount是默認值，為5個。因此，我們必須在數據刷新的時候，及時通知Indicator來增加指示器的數目。但是，我們進一步想想，數據列表保存在Adapter中，如果ViewPagerIndicator想要獲取數據，那就要得到Adapter的一個引用，或者說Adapter需要得到ViewPagerIndicator的引用以便能夠通知它，如果這樣做的話，相當于把兩個相關性不大的類聯系到了一起，耦合度過高，這樣不利于以后的維護。
因此，這里筆者采用了觀察者模式來實現Adapter數據刷新時通知ViewPagerIndicator的這樣一個需求。先新建兩個接口，一個是DataSetSubscriber，觀察者；另一個是DataSetSubject，被觀察者。
public interface DataSetSubscriber {
void update(int count);
}
public interface DataSetSubject {
void registerSubscriber(DataSetSubscriber subscriber);
void removeSubscriber(DataSetSubscriber subscriber);
void notifySubscriber();
}
這里實現思路是這樣的：在BannerViewPager內實現一個DataSetSubscriber(觀察者)，在ViewPageAdapter內實現DataSetSubject(被觀察者),通過registerSubscriber方法進行注冊，當ViewPageAdapter的數據列表發(fā)生變動的時候，回調DataSetSubscriber的update()方法，并把當前的數據長度作為參數傳遞進來，而BannerViewPager再進一步調用ViewPagerIndicator的方法來重新布局即可。
先來看ViewPagerIndicator.java:
public class ViewPagerAdapter extends PagerAdapter implements DataSetSubject {
private List<DataSetSubscriber> mSubscribers = new ArrayList<>();
private List<? extends View> mDataViews;
private OnPageClickListener mOnPageClickListener;
/**
* 構造函數
* @param mDataViews view列表
*/
public ViewPagerAdapter(List<? extends View> mDataViews,OnPageClickListener listener) {
this.mDataViews = mDataViews;
this.mOnPageClickListener = listener;
}
//省略...
@Override
public void notifyDataSetChanged() {
super.notifyDataSetChanged();
notifySubscriber();
}
@Override
public void registerSubscriber(DataSetSubscriber subscriber) {
mSubscribers.add(subscriber);
}
@Override
public void removeSubscriber(DataSetSubscriber subscriber) {
mSubscribers.remove(subscriber);
}
@Override
public void notifySubscriber() {
for(DataSetSubscriber subscriber : mSubscribers){
subscriber.update(getCount());
}
}
}```
由于數據列表的變動一般都會調用notifyDataSetChanged()方法，所以我們在這個方法內再調用notifySubscriber()方法即可。而在BannerViewPager，則實現DataSetSubscriber的update()方法即可，如下所示：
```java
public void setAdapter(ViewPagerAdapter adapter){
mViewPager.setAdapter(adapter);
mViewPager.addOnPageChangeListener(this);
mAdapter = adapter;
mAdapter.registerSubscriber(new DataSetSubscriber() {
@Override
public void update(int count) {
mIndicator.setItemCount(count);
}
});
//add the viewpager and the indicator to the container.
addView(mViewPager);
addView(mIndicator);
//start the auto-rolling task if needed
if(isAutoRolling){
postDelayed(mAutoRollingTask,mAutoRollingTime);
}
}
在update()方法內，調用了ViewPagerIndicator#setItemCount方法，從而重新布局。
那么，指示器也實現完畢了。
實現Page的點擊事件處理
還有最后一個需求，就是對Page的點擊進行處理，因為往往ViewPager的內容只是一個概括性的內容，為了得到更加詳細的信息，用戶通常會點擊它的item從而打開一個新的頁面，這樣就需要我們對點擊事件進行處理了。其實實現方式不難，思路類似于筆者之前在RecyclerView的相關文章的處理點擊事件中的方式，通過定義一個新的接口：OnPageClickListener，定義一個onPageClick方法。如下：
public interface OnPageClickListener {
void onPageClick(View view,int position);
}
只要在item view初始化的時候，給每個item view都設置一個View.OnClickListener，并且在onClick方法里面調用我們的onPageClick方法即可。
具體如下所示，ViewPagerAdapter:
@Override
public View instantiateItem(ViewGroup container, int position) {
View view = mDataViews.get(position);
final int i = position;
if(mOnPageClickListener != null){
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mOnPageClickListener.onPageClick(v,i);
}
});
}
container.addView(view);
return view;
}
在構建適配器的時候，同時實現OnPageClickListener即可。
以上便是本文的全部內容，非常感謝你的閱讀~
歡迎到GitHub中獲取本文的源碼，歡迎star or fork。再次感謝！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- Android 中 viewpager 滑動指示器的實例代碼
- Android開發(fā)實現的ViewPager引導頁功能(動態(tài)加載指示器)詳解
- Android自定義ViewPagerIndicator實現炫酷導航欄指示器（ViewPager+Fragment）
- Android實現基于ViewPager的無限循環(huán)自動播放帶指示器的輪播圖CarouselFigureView控件
- Android自定義View Flyme6的Viewpager指示器
- Android自定義ViewPager指示器
- Android應用中仿今日頭條App制作ViewPager指示器
- Android應用中使用ViewPager和ViewPager指示器來制作Tab標簽
- Android ViewPager小圓點指示器
相關文章
這篇文章主要為大家詳細介紹了Android手電筒兼容各個手機與版本，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家介紹了Android10?Binder原理概述深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家詳細介紹了Android自定義谷歌風格ProgressBar的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細介紹了Flutter滾動組件之ListView的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了android實現上滑屏幕隱藏底部菜單欄的示例,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了Android實現俄羅斯方塊游戲 ，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
本篇文章是對Android 解Bug策略與思路的問題進行了詳細的分析介紹，需要的朋友參考下2013-05-05
這篇文章主要給大家介紹了關于Android使用自定義View實現橫行時間軸效果的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Android具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
Android MessageQueue消息隊列主要作用詳解
Android 消息機制主要指的是 Handler 的運行機制及其所依賴的 MessageQueue 和 Looper 的工作過程，Handler、MessageQueue、Looper組成一個相互聯系的整體。本文先從 MessageQueue 的源碼來說明其實現原理2023-02-02
這篇文章主要為大家詳細介紹了Android使用文件進行IPC，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12