ViewPager是一個(gè)常用的android組件，不過(guò)通常我們使用ViewPager的時(shí)候不能實(shí)現(xiàn)左右無(wú)限循環(huán)滑動(dòng)，在滑到邊界的時(shí)候會(huì)看到一個(gè)不能翻頁(yè)的動(dòng)畫(huà)，可能影響用戶體驗(yàn)。此外，某些區(qū)域性的ViewPager（例如展示廣告或者公告之類的ViewPager），可能需要自動(dòng)輪播的效果，即用戶在不用滑動(dòng)的情況下就能夠看到其他頁(yè)面的信息。
循環(huán)滑動(dòng)效果的實(shí)現(xiàn)：PagerAdapter 我們知道ViewPager自帶的滑動(dòng)效果非常出色，因此我們基本不需要處理這個(gè)滑動(dòng)，只處理內(nèi)容的顯示。而內(nèi)容的顯示是由Adapter控制的，因此這里重點(diǎn)就是這個(gè)Adapter了。為簡(jiǎn)單起見(jiàn)，本例的每個(gè)View直接是一張圖片。下面是Adapter的代碼：
PRivate class ImageAdapter extends PagerAdapter{ private ArrayList<ImageView> viewlist; public ImageAdapter(ArrayList<ImageView> viewlist) { this.viewlist = viewlist; } @Override public int getCount() { //設(shè)置成最大，使用戶看不到邊界 return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0==arg1; } @Override public void destroyItem(ViewGroup container, int position, Object object) { //Warning：不要在這里調(diào)用removeView } @Override public Object instantiateItem(ViewGroup container, int position) { //對(duì)ViewPager頁(yè)號(hào)求模取出View列表中要顯示的項(xiàng) position %= viewlist.size(); if (position<0){ position = viewlist.size()+position; } ImageView view = viewlist.get(position); //如果View已經(jīng)在之前添加到了一個(gè)父組件，則必須先remove，否則會(huì)拋出IllegalStateException。 ViewParent vp =view.getParent(); if (vp!=null){ ViewGroup parent = (ViewGroup)vp; parent.removeView(view); } container.addView(view); //add listeners here if necessary return view; } }這里有幾個(gè)地方需要注意：
getCount() 方法的返回值：這個(gè)值直接關(guān)系到ViewPager的“邊界”，因此當(dāng)我們把它設(shè)置為Integer.MAX_VALUE之后，用戶基本就看不到這個(gè)邊界了（估計(jì)滑到這里的時(shí)候電池已經(jīng)掛了吧o_O）。當(dāng)然，通常情況下設(shè)置為100倍實(shí)際內(nèi)容個(gè)數(shù)也是可以的，之前看的某個(gè)實(shí)現(xiàn)就是這么干的。
instantiateItem() 方法position的處理：由于我們?cè)O(shè)置了count為 Integer.MAX_VALUE，因此這個(gè)position的取值范圍很大很大，但我們實(shí)際要顯示的內(nèi)容肯定沒(méi)這么多（往往只有幾項(xiàng)），所以這里肯定會(huì)有求模操作。但是，簡(jiǎn)單的求模會(huì)出現(xiàn)問(wèn)題：考慮用戶向左滑的情形，則position可能會(huì)出現(xiàn)負(fù)值。所以我們需要對(duì)負(fù)值再處理一次，使其落在正確的區(qū)間內(nèi)。
destroyItem() 方法：由于我們?cè)趇nstantiateItem()方法中已經(jīng)處理了remove的邏輯，因此這里并不需要處理。實(shí)際上，實(shí)驗(yàn)表明這里如果加上了remove的調(diào)用，則會(huì)出現(xiàn)ViewPager的內(nèi)容為空的情況。
輪播效果的實(shí)現(xiàn)：使用Handler進(jìn)行更新
這里我定義了一個(gè)Handler來(lái)處理ViewPager的輪播。所謂的“輪播”效果實(shí)現(xiàn)起來(lái)是這樣的：每隔一定時(shí)間（這里是3秒）切換一次顯示的頁(yè)面。通過(guò)控制各頁(yè)面以一定順序循環(huán)播放，就達(dá)到了輪播的效果。為此，我們可以使用Handler的sendEmptyMessageDelayed()方法來(lái)實(shí)現(xiàn)定時(shí)更新，并 注意用戶也可能會(huì)對(duì)帶有輪播效果的ViewPager手動(dòng)進(jìn)行滑動(dòng)操作，因此我認(rèn)為用戶這時(shí)候是希望查看指定頁(yè)面的，這時(shí)候應(yīng)該取消輪播。下面是這個(gè)Handler的實(shí)現(xiàn)：
一、ViewPager填充圖片 1.1 布局中申明 由于是顯示廣告條，所以高度要固定住
<android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="120dp"/>1.2 代碼中設(shè)置頁(yè)面數(shù)據(jù) 準(zhǔn)備顯示圖片控件的集合
// 準(zhǔn)備顯示的圖片集合 mList = new ArrayList<>(); for (int i = 0; i < mImages.length; i++) { ImageView imageView = new ImageView(this); // 將圖片設(shè)置到ImageView控件上 imageView.setImageResource(mImages[i]); // 將ImageView控件添加到集合 mList.add(imageView); }自定義類書(shū)寫(xiě)適配器
@Override public Object instantiateItem(ViewGroup container, int position) { // return super.instantiateItem(container, position); // 將圖片控件添加到容器 container.addView(mList.get(position)); // 返回 return mList.get(position); }二、底部小圓點(diǎn)顯示邏輯 原理分析：底部的小圓點(diǎn)時(shí)浮動(dòng)在ViewPager上面的的，所以應(yīng)該是一個(gè)RelativeLayout布局。 ViewPager頁(yè)面切換時(shí)小圓點(diǎn)的顏色不一樣，所以需要對(duì)小圓點(diǎn)做選擇器，并且對(duì)ViewPager進(jìn)行監(jiān)聽(tīng)。
2.1 布局申明
需要用一個(gè)RelativeLayout將ViewPager和包裹圓點(diǎn)的LinearLayout包裹起來(lái)
<RelativeLayout android:layout_width="match_parent" android:layout_height="120dp"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="120dp"/> <LinearLayout android:id="@+id/pointgroup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="3dp" android:orientation="horizontal"> </LinearLayout> </RelativeLayout>2.2 制作小圓點(diǎn)顏色選擇器
選擇器的選中狀態(tài)應(yīng)該設(shè)置為selected，因?yàn)閷?duì)ViewPager監(jiān)聽(tīng)時(shí)可以設(shè)置selected的屬性
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/shape_point_normal" android:state_selected="false"/> <item android:drawable="@drawable/shape_point_selected" android:state_selected="true"/> </selector> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#66000000"/> </shape <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#FFFFFF"/> </shape>2.3 將小圓點(diǎn)添加到LinearLayout容器
小圓點(diǎn)其實(shí)就是一個(gè)ImageView，所以在做出ViewPager的頁(yè)面圖片時(shí)，一起把小圓點(diǎn)也做了 初始化ImageView添加到LinearLayout之前，需要設(shè)置小圓點(diǎn)的布局參數(shù)，包括位置和大小
LinearLayout pointGroup = (LinearLayout) findViewById(R.id.pointgroup); for (int i = 0; i < mImages.length; i++) { // 制作底部小圓點(diǎn) ImageView pointImage = new ImageView(this); pointImage.setImageResource(R.drawable.shape_point_selector); // 設(shè)置小圓點(diǎn)的布局參數(shù) int PointSize = getResources().getDimensionPixelSize(R.dimen.point_size); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(PointSize, PointSize); if (i > 0) { params.leftMargin = getResources().getDimensionPixelSize(R.dimen.point_margin); pointImage.setSelected(false); } else { pointImage.setSelected(true); } pointImage.setLayoutParams(params); // 添加到容器里 pointGroup.addView(pointImage); }三、小圓點(diǎn)隨著ViewPager切換移動(dòng)
其實(shí)就是對(duì)ViewPager設(shè)置滑動(dòng)監(jiān)聽(tīng)，當(dāng)滑動(dòng)到每一頁(yè)時(shí)就設(shè)置小圓點(diǎn)為選中狀態(tài)，這樣小圓點(diǎn)就顯示白色，其他頁(yè)面就設(shè)置為未選中狀態(tài)顯示灰色。
// 對(duì)ViewPager設(shè)置滑動(dòng)監(jiān)聽(tīng) viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } int lastPosition; @Override public void onPageSelected(int position) { // 頁(yè)面被選中 // 設(shè)置當(dāng)前頁(yè)面選中 pointGroup.getChildAt(position).setSelected(true); // 設(shè)置前一頁(yè)不選中 pointGroup.getChildAt(lastPosition).setSelected(false); // 替換位置 lastPosition = position; } @Override public void onPageScrollStateChanged(int state) { } });經(jīng)過(guò)前面的三步設(shè)置后就能顯示一個(gè)簡(jiǎn)單的廣告條了，這里再對(duì)其添加一個(gè)滑動(dòng)到最后一頁(yè)后再滑還能滑動(dòng)到首頁(yè)的功能。 四、無(wú)限滑動(dòng)的ViewPager 實(shí)現(xiàn)原理： ViewPager之所以滑動(dòng)到左右能顯示頁(yè)面，其實(shí)是因?yàn)樽笥叶即嬖诩磳⒁@示的頁(yè)面。當(dāng)左右有很多頁(yè)面時(shí)我們就能一直滑動(dòng)，沒(méi)有時(shí)就不能滑動(dòng)。所以原理就是讓ViewPager的左右都有很多的頁(yè)面。 4.1 修改getCount方法
ViewPager能顯示多少個(gè)頁(yè)面全由getCount方法說(shuō)了算，所以我們首先要改造它。
@Override public int getCount() { // 返回整數(shù)的最大值 return Integer.MAX_VALUE; }4.2 修改instantiateItem方法
因?yàn)閜osition變了，所以顯示的位置也變了，這里需要進(jìn)行取%運(yùn)算，來(lái)還原position。
// 修改position position = position % mList.size();4.3 修改ViewPager監(jiān)聽(tīng)器里的onPageSelected
用到了position就要修改。
position = position % mList.size();修改之后，ViewPager當(dāng)前頁(yè)的右邊就有了無(wú)數(shù)的頁(yè)面，但是因?yàn)?了mList.size()，就只會(huì)顯示mList.size()的大小，這樣就實(shí)現(xiàn)了無(wú)限滑動(dòng)輪播 五、無(wú)限自動(dòng)輪播的廣告圖 實(shí)現(xiàn)原理：在前面四步的基礎(chǔ)上，在代碼里添加一個(gè)Handler，不斷的給自己發(fā)消息就好了。
mHandler.postDelayed(new Runnable() { @Override public void run() { int currentPosition = viewPager.getCurrentItem(); if(currentPosition == viewPager.getAdapter().getCount() - 1){ // 最后一頁(yè) viewPager.setCurrentItem(0); }else{ viewPager.setCurrentItem(currentPosition + 1); } // 一直給自己發(fā)消息 mHandler.postDelayed(this,5000); } },5000);
ViewPager的界面點(diǎn)和文本的初始化操作
private void showMsg(NewBean newBean) { //1.ViewPager的數(shù)據(jù) if (newBean.data.topnews.size() > 0) { ... //1.3.將viewpager和點(diǎn)的indicator關(guān)聯(lián) mIndicator.setViewPager(mViewPager); mIndicator.setSnap(true);//快照，使用快照的方式顯示點(diǎn) //1.4.設(shè)置默認(rèn)顯示第一張圖片，第一個(gè)文本，第一個(gè)點(diǎn) mTitle.setText(titles.get(0)); mIndicator.onPageSelected(0); mViewPager.setCurrentItem(0);//設(shè)置viewpager當(dāng)前顯示的界面，item：條目的索引 } //2.ListView的數(shù)據(jù)}填充listview的數(shù)據(jù)將ViewPager的布局作為listView的頭條目展示
1.將ViewPager的布局作為listview的頭條目展示 private void showMsg(NewBean newBean) { //1.ViewPager的數(shù)據(jù) if (newBean.data.topnews.size() > 0) { .... //1.5.將ViewPager所在的布局，添加到listView中 //獲取listview的頭條目的個(gè)數(shù) if (mListView.getHeaderViewsCount()<1) { mListView.addHeaderView(mViewPagerView);//給listview添加頭條目 } } //2.ListView的數(shù)據(jù) }2.填充listview數(shù)據(jù) private void showMsg(NewBean newBean) { ..... //2.ListView的數(shù)據(jù) if (newBean.data.news.size() > 0) { mNews = newBean.data.news; //設(shè)置listview的adapter展示數(shù)據(jù) if (listViewAdapter == null) { listViewAdapter = new MyListViewAdapter(); mListView.setAdapter(listViewAdapter); }else{ listViewAdapter.notifyDataSetChanged(); } } }ViewPager自動(dòng)滑動(dòng)操作
核心理念：每個(gè)一段時(shí)間，viewpager切換到下一個(gè)界面1.通過(guò)handler設(shè)置viewpager的自動(dòng)滑動(dòng)操作 //因?yàn)閟howMsg方法實(shí)在processjson方法中調(diào)用的，而processJson是在緩存和獲取最新數(shù)據(jù)的時(shí)候都會(huì)調(diào)用，最終會(huì)造成發(fā)送兩個(gè)延遲消息，但是只需要一個(gè)延遲消息就可以了 if (handler == null) { handler = new Handler(){ public void handleMessage(android.os.Message msg) { //viewpager切換下一個(gè)界面的操作 //首先需要知道當(dāng)前顯示的界面 int currentItem = mViewPager.getCurrentItem();//獲取當(dāng)前顯示界面的索引 //然后計(jì)算下一個(gè)界面的索引 //判斷是否切換到最后一個(gè)界面，如果是最后一個(gè)界面了，切換回第一個(gè)界面 if (currentItem == imagerUrls.size()-1) { currentItem=0; }else{ currentItem++; } //設(shè)置viewpager顯示下一個(gè)界面 mViewPager.setCurrentItem(currentItem); //切換一次完成，還要緊接著切換第二次 handler.sendEmptyMessageDelayed(0, 3000); }; }; handler.sendEmptyMessageDelayed(0, 3000);//只有執(zhí)行此方法，才會(huì)發(fā)送延遲消息，不執(zhí)行就不發(fā)送 }2.設(shè)置viewpager的界面切換監(jiān)聽(tīng)，實(shí)現(xiàn)切換界面顯示界面對(duì)應(yīng)的文本 //監(jiān)聽(tīng)viewpager的界面切換，實(shí)現(xiàn)切換一個(gè)界面顯示一個(gè)界面對(duì)應(yīng)的文本 mViewPager.addOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int position) { mTitle.setText(titles.get(position)); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int state) { // TODO Auto-generated method stub } });viewpager的手動(dòng)滑動(dòng)
當(dāng)滑動(dòng)到小viewpager的最后一個(gè)界面的時(shí)候，外面的viewpager要將小的viewpager的觸摸事件攔截，當(dāng)滑動(dòng)小的viewpager的不是最后一個(gè)界面的時(shí)候，外面的viewpager不攔截小viewpager的觸摸事件讓小viewpager進(jìn)行滑動(dòng)操作創(chuàng)建自定義Viewpager進(jìn)行操作//事件分發(fā)的@Overridepublic boolean dispatchTouchEvent(MotionEvent ev) { //請(qǐng)求父控件不要攔截事件，true:不攔截，false:攔截 //getParent().requestDisallowInterceptTouchEvent(disallowIntercept); //1.需要判斷是左右滑動(dòng)還是上下滑動(dòng)，因?yàn)橹挥凶笥也攀莢iewpager手動(dòng)滑動(dòng)的操作 switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: //getParent().requestDisallowInterceptTouchEvent(false); //獲取按下的x和y的坐標(biāo) downX = (int) ev.getX(); downY = (int) ev.getY(); break; case MotionEvent.ACTION_MOVE: //獲取移動(dòng)的x和y的坐標(biāo) int moveX = (int) ev.getX(); int moveY = (int) ev.getY(); //判斷是上下還是左右滑動(dòng) if (Math.abs(moveX-downX) > Math.abs(moveY-downY)) { //左右 //從右往左，如果是最后一個(gè)條目，父控件攔截事件，實(shí)現(xiàn)切換界面的操作，如果不是最后一個(gè)條目，切換下一張圖片 //getAdapter() : 獲取ViewPager設(shè)置的adapter if (downX - moveX > 0 && getCurrentItem() == getAdapter().getCount()-1) { getParent().requestDisallowInterceptTouchEvent(false); }else if(downX - moveX > 0 && getCurrentItem() < getAdapter().getCount()-1){ getParent().requestDisallowInterceptTouchEvent(true); } //從左往右,如果是第一個(gè)條目，父控件攔截事件，打開(kāi)側(cè)拉菜單，如果不是第一個(gè)條目，切換到上一張圖片 else if(downX - moveX < 0 && getCurrentItem() == 0){ getParent().requestDisallowInterceptTouchEvent(false); }else if(downX - moveX < 0 && getCurrentItem() > 0){ getParent().requestDisallowInterceptTouchEvent(true); } }else{ //上下 getParent().requestDisallowInterceptTouchEvent(false); } break; case MotionEvent.ACTION_UP: break; } return super.dispatchTouchEvent(ev);}ViewPager和View的事件響應(yīng)規(guī)則
如果是緩慢的移動(dòng)很短的距離，viewpager和view的事件都會(huì)執(zhí)行如果是快速滑動(dòng)很長(zhǎng)的距離，view的事件會(huì)執(zhí)行cancel事件，結(jié)束view的觸摸操作，只去viewpager的事件具體操作 //設(shè)置view的觸摸事件事件，實(shí)現(xiàn)按下viewpager停止自動(dòng)滑動(dòng)，抬起，viewpager重新進(jìn)行自動(dòng)滑動(dòng)操作 rootView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: //按下viewpager停止滑動(dòng) handler.removeCallbacksAndMessages(null);//取消handler發(fā)送延遲消息，如果是null，全部handler都會(huì)被取消發(fā)送消息 break; case MotionEvent.ACTION_UP: //抬起viewpager重新滑動(dòng) handler.sendEmptyMessageDelayed(0, 3000); break; case MotionEvent.ACTION_CANCEL: //view的事件取消執(zhí)行的操作 handler.sendEmptyMessageDelayed(0, 3000); break; } //如果想要事件執(zhí)行，返回true,返回事件不執(zhí)行 return true; } });自定義RoolViewPager
public class RoolViewPager extends ViewPager { private int downX; private int downY; public RoolViewPager(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub } public RoolViewPager(Context context) { super(context); // TODO Auto-generated constructor stub } //事件分發(fā)的 @Override public boolean dispatchTouchEvent(MotionEvent ev) { //請(qǐng)求父控件不要攔截事件，true:不攔截，false:攔截 //getParent().requestDisallowInterceptTouchEvent(disallowIntercept); //1.需要判斷是左右滑動(dòng)還是上下滑動(dòng)，因?yàn)橹挥凶笥也攀莢iewpager手動(dòng)滑動(dòng)的操作 switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: //getParent().requestDisallowInterceptTouchEvent(false); //獲取按下的x和y的坐標(biāo) downX = (int) ev.getX(); downY = (int) ev.getY(); break; case MotionEvent.ACTION_MOVE: //獲取移動(dòng)的x和y的坐標(biāo) int moveX = (int) ev.getX(); int moveY = (int) ev.getY(); //判斷是上下還是左右滑動(dòng) if (Math.abs(moveX-downX) > Math.abs(moveY-downY)) { //左右 //從右往左，如果是最后一個(gè)條目，父控件攔截事件，實(shí)現(xiàn)切換界面的操作，如果不是最后一個(gè)條目，切換下一張圖片 //getAdapter() : 獲取ViewPager設(shè)置的adapter if (downX - moveX > 0 && getCurrentItem() == getAdapter().getCount()-1) { getParent().requestDisallowInterceptTouchEvent(false); }else if(downX - moveX > 0 && getCurrentItem() < getAdapter().getCount()-1){ getParent().requestDisallowInterceptTouchEvent(true); } //從左往右,如果是第一個(gè)條目，父控件攔截事件，打開(kāi)側(cè)拉菜單，如果不是第一個(gè)條目，切換到上一張圖片 else if(downX - moveX < 0 && getCurrentItem() == 0){ getParent().requestDisallowInterceptTouchEvent(false); }else if(downX - moveX < 0 && getCurrentItem() > 0){ getParent().requestDisallowInterceptTouchEvent(true); } }else{ //上下 getParent().requestDisallowInterceptTouchEvent(false); } break; case MotionEvent.ACTION_UP: break; } return super.dispatchTouchEvent(ev); }}xml使用
布局文件中使用<com.itheima.zhbj97.ui.RoolViewPager android:id="@+id/menunewscenteritem_vp_viewpager" android:layout_width="match_parent" android:layout_height="185dp" ></com.itheima.zhbj97.ui.RoolViewPager>新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
