Android開發——打造簡單的Viewpager指示器(小圓點指示器)


准備工作:

1.兩張不同顏色的小圓點圖片,可以去阿里巴巴矢量圖網站搜索

我把我使用的圖片貼出來

 

 

2.一個簡單的Viewpager的實現

下面是簡單的Viewpager實現步驟:

1.布局文件使用Viewpager

2.定義一個適配器類使其繼承PagerAdapter,復寫其中的四個方法,分別是getCount,isViewFromObject,instantiateItem和destroyItem

  @Override
    public int getCount() { return 3;//在Viewpager顯示3個頁面  } @Override public boolean isViewFromObject(View view, Object object) { return view==object; } @Override public Object instantiateItem(ViewGroup container, int position) { TextView tv = new TextView(container.getContext()); tv.setGravity(Gravity.CENTER); tv.setTextSize(20); tv.setText("第" + position + "頁"); // 添加到ViewPager容器  container.addView(tv); // 返回填充的View對象 return tv; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); }

 

3.findviewbyid方法找到viewpager

4.設置適配器

效果圖:

 

開始:

1.布局的設計

我們來到xml文件中,原本里面只有一個viewpager,我們需要再增加個linearlayout,之后用三個linaerlayout水平放置,並且將其平分(平分使用權重weight屬性),中間的linearlayout中水平放入三個ImageView,這個三個ImageView同樣使用權重將中間的linearlayout給平分,相信這個布局還是比較簡單的吧

 

我們放入ImageView之后,將第一個的ImageView的src設置為藍色的,其他兩個則是設置為灰色的,因為剛開始就是顯示viewpager的第一頁嘛,這個相信大家都能明白

 

2.復寫onpagechangeclicklistener中的onPageSelected方法

首先,要說明一下,viewpager有一個接口名為onpagechangeclicklistener

onPagechangeclicklistener說明:

ViewPage使用時,最關鍵的代碼就是setOnPageChangeListener,需要注意的是,高版本好像沒有這個方法了,改為了addOnPageChangeListener,名稱變了,參數沒有變化

參數是一個ViewPager.SimpleOnPageChangeListener對象。

ViewPager.SimpleOnPageChangeListener是個接口,有三個方法,下面做介紹。

注:ViewPager有兩個操作,一個是用手指滑動翻頁,一個是直接setCurrentItem(一般用於點擊上面的tab直接setCurrentItem)。

下面的方法介紹也會針對這兩種情況分別介紹,最后還會討論這三個方法相對執行順序的問題

1.onPageSelected(int position):

這個方法有一個參數position,代表哪個頁面被選中。當用手指滑動翻頁的時候,如果翻動成功了(滑動的距離夠長),手指抬起來就會立即執行這個方法,position就是當前滑動到的頁面。如果直接setCurrentItem翻頁,那position就和setCurrentItem的參數一致,這種情況在onPageScrolled執行方法前就會立即執行。
2.onPageScrolled(int position,float positionOffset, int positionOffsetPixels):

這個方法會在屏幕滾動過程中不斷被調用。
有三個參數,第一個position,這個參數要特別注意一下。當用手指滑動時,如果手指按在頁面上不動,position和當前頁面index是一致的;如果手指向左拖動(相應頁面向右翻動),這時候position大部分時間和當前頁面是一致的,只有翻頁成功的情況下最后一次調用才會變為目標頁面;如果手指向右拖動(相應頁面向左翻動),這時候position大部分時間和目標頁面是一致的,只有翻頁不成功的情況下最后一次調用才會變為原頁面。
當直接設置setCurrentItem翻頁時,如果是相鄰的情況(比如現在是第二個頁面,跳到第一或者第三個頁面),如果頁面向右翻動,大部分時間是和當前頁面是一致的,只有最后才變成目標頁面;如果向左翻動,position和目標頁面是一致的。這和用手指拖動頁面翻動是基本一致的。
如果不是相鄰的情況,比如我從第一個頁面跳到第三個頁面,position先是0,然后逐步變成1,然后逐步變成2;我從第三個頁面跳到第一個頁面,position先是1,然后逐步變成0,並沒有出現為2的情況。
positionOffset是當前頁面滑動比例,如果頁面向右翻動,這個值不斷變大,最后在趨近1的情況后突變為0。如果頁面向左翻動,這個值不斷變小,最后變為0。
positionOffsetPixels是當前頁面滑動像素,變化情況和positionOffset一致。
3.onPageScrollStateChanged(int state):

這個方法在手指操作屏幕的時候發生變化。有三個值:0(END),1(PRESS) , 2(UP) 。
當用手指滑動翻頁時,手指按下去的時候會觸發這個方法,state值為1,手指抬起時,如果發生了滑動(即使很小),這個值會變為2,然后最后變為0 。

總共執行這個方法三次。一種特殊情況是手指按下去以后一點滑動也沒有發生,這個時候只會調用這個方法兩次,state值分別是1,0 。

當setCurrentItem翻頁時,會執行這個方法兩次,state值分別為2 , 0 。
三個方法的執行順序為:用手指拖動翻頁時,最先執行一遍onPageScrollStateChanged(1),然后不斷執行onPageScrolled,放手指的時候,直接立即執行一次onPageScrollStateChanged(2),然后立即執行一次onPageSelected,然后再不斷執行onPageScrollStateChanged,最后執行一次onPageScrollStateChanged(0)。
其它的情況由這個可以推出來,不再贅述。

這個原理其實我們只需要關注第一個方法即可,即onPageSelected(int position),當我們翻頁了,這個方法就會執行,是viewpager顯示參數為position的那頁的內容

我們為viewpager設置這個監聽器,復寫其中的onPageSelected方法,position為0的時候即是第一頁,我們為第一個ImageView設置為藍色圓形,position為1時,為第二個ImageView設置為藍色圓形,以此類推,記得在之前的xml文件中給三個ImageView定義一個id哦

3、效果圖

 

 

大功告成!!

本來是實現圓點能夠移動的,但是,看不懂大神們寫的代碼,只能簡單的實現這樣的小圓點了。。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM