1. 程式人生 > >Android開發——打造簡單的Viewpager指示器(小圓點指示器)

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

ges 其它 tar contex 但是 state 定義 效果 布局

準備工作:

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、效果圖

技術分享圖片

大功告成!!

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

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