目錄: 一、Viewpager的簡單介紹 二、簡單的Viewpager使用 三、簡單顯示圖片的Viewpager實現 四、廣告圖的實現及Viewpager指示器(小圓點)的實現 五、APP引導頁的實現 一、ViewPager介紹 官方文檔解釋: Layout manager that allows ...
目錄:
一、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,還有跳過功能,直接顯示出主界面