Android開發——Viewpager的介紹使用,androidviewpager

來源:互聯網
上載者:User

Android開發——Viewpager的介紹使用,androidviewpager
目錄:

一、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方法找到viewpager4.設定適配器

 

三、簡單顯示圖片的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設定adapter4.使用CirclePointMove實現小圓點跟隨viewpager移動

 

 5.

 

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

 Demo

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.