Android開發——Viewpager的介紹使用


目錄:

一、Viewpager的簡單介紹

二、簡單的Viewpager使用

三、簡單顯示圖片的Viewpager實現

四、廣告圖的實現及Viewpager指示器(小圓點)的實現

五、APP引導頁的實現

一、ViewPager介紹

官方文檔解釋:

Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.
ViewPager is most often used in conjunction with android.app.Fragment, which is a convenient way to supply and manage the lifecycle of each page. There are standard adapters implemented for using fragments with the ViewPager, which cover the most common use cases. These are android.support.v4.app.FragmentPagerAdapter and android.support.v4.app.FragmentStatePagerAdapter; each of these classes have simple code showing how to build a full user interface with them.
Views which are annotated with the ViewPager.DecorView annotation are treated as part of the view pagers 'decor'. Each decor view's position can be controlled via its android:layout_gravity attribute. For example:
   <android.support.v4.view.ViewPager
       android:layout_width="match_parent"
       android:layout_height="match_parent">
 
       <android.support.v4.view.PagerTitleStrip
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_gravity="top" />
 
   </android.support.v4.view.ViewPager>
   
For more information about how to use ViewPager, read Creating Swipe Views with Tabs.
You can find examples of using ViewPager in the API 4+ Support Demos and API 13+ Support Demos sample code.

大概的意思為:

  • 布局管理器允許左右翻轉帶數據的頁面,你想要顯示的視圖可以通過實現PagerAdapter來顯示。這個類其實是在早期設計和開發的,它的API在后面的更新之中可能會被改變,當它們在新版本之中編譯的時候可能還會改變源碼。

  • ViewPager經常用來連接Fragment,它很方便管理每個頁面的生命周期,使用ViewPager管理Fragment是標准的適配器實現。最常用的實現一般有FragmentPagerAdapter和FragmentStatePagerAdapter。

  • FragmentPagerAdapter和FragmentStatePagerAdapter是ViewPager和Fragment一起使用時才會用到,后面會詳細介紹,這里就不介紹了

二、簡單的ViewPager使用

使用方法其實與Listview和RecyclerView的方法類似

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.設置適配器

效果圖:

 

三、簡單顯示圖片的Viewpager實現

1.布局中使用viewpager

 

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

 private int [] mImage; public AdvertiseViewpagerAdapter(int[] mImage) { this.mImage = mImage;//接收傳入的mIamge
 } @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) { ImageView imageView = new ImageView(container.getContext()); imageView.setImageResource(mImage[position]);//ImageView設置圖片 container.addView(imageView); // 添加到ViewPager容器 return imageView;// 返回填充的View對象
 } // 銷毀條目對象
 @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); }

 

這里注意看紅色的代碼,我們在適配類中定義了一個成員變量,用來接收參數傳入的圖片資源id,之后在instantiateItem方法中,new一個ImageView,將其的圖片設置為數組中存放的圖片資源id,其他的代碼與之前一樣,這里就不多解釋了

3.在activity文件中聲明一個整型數組,將圖片資源id存放進去

4.new一個適配器,將整型數組傳入

5.findviewbyid找到viewpager,為其設置適配器

 

效果圖:

四、廣告圖的實現及Viewpager指示器(小圓點)的實現

 本來開始寫的時候,我還是用的別人的庫來實現小圓點功能,之后,研究了一下,發現實現其實很簡單,想要了解的同學可以看我這一篇Android開發——打造簡單的Viewpager指示器(小圓點指示器)

今天寫的就是拿別人的來使用

項目名稱CircleIndicator,github

第一步,添加依賴

 

第二步,在xml中使用

 

第三步,為circleIndicator綁定viewpager

 

 

 效果圖:

    顏色有些白,可能看得不太清楚。。

 

 

PS:可以通過自定義屬性修改顏色,不過,修改顏色就變成了正方形了,不太懂是怎么回事

 

 五、APP引導頁的實現

首先,我們理解一下引導頁的邏輯

這里有個問題,如何才能判斷是否是第一次進入APP呢?其實很簡單,使用 SharedPreferences,這里我不多說了

我這一篇有用到SharedPreferences,可以參考參考Android開發模板代碼(二)——為ImageView設置圖片,退出后能保存ImageView的狀態

 

1.在xml中使用viewpager

這里我們還可以加上一個圓形指示器,這樣比較好看,市場上的大部分APP都是有個圓形指示器的嘛,我們也隨主流

這里我們可以使用之前的那個開源庫CircleIndicator,如果你是想實現移動的小圓點指示器,打一波廣告,推薦使用開源庫CIrclePointMove

這個開源庫是我用兩天寫出來的,簡單設置之后就能實現小圓點移動的功能

提示:

使用RelativeLayout,可以使得小圓點指示器顯示在Viewpager上方

layout_above 該控件顯示在fragmentViewpager的上方

layout_alignParentBottom 該控件是否貼近父布局的底部

 

2.定義個適配類,這里我們使用viewpager裝載fragment

我這里用了兩個Fragment,一個fragment顯示第一頁,來一個顯示第二頁

代碼與之前類似,相信大家也是看到明白,不過,這里提一下,ViewPager的FragmentAdapter有兩種,一種是FragmentPagerAdapter,另外一種則是FragmentPageStateAdapter,這兩種的區別在於,前者在換到其他頁時不會銷毀之前的頁面內容,適合頁面較少的情況使用,后者則是換到其他頁會將之前的頁面給銷毀,返回到之前的頁面就是重新加載,適合頁面過多的情況使用

3.為Viewpager設置adapter

4.使用CirclePointMove實現小圓點跟隨viewpager移動

 

 5.效果圖

 

 PS:我這里只是簡單地演示了Fragment,你也可以使用我上面的提示,在下面加個按鈕實現下一頁,需要使用到Viewpager的setCurrentItem方法,參數為position,還有跳過功能,直接顯示出主界面

 Demo

 


免責聲明!

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



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