一、ViewPager的基本用法
1.ViewPager概述
ViewPager是android擴(kuò)展包v4包中的類，這個(gè)類可以讓我們左右切換當(dāng)前的view。我們先來聊聊ViewPager的幾個(gè)相關(guān)知識(shí)點(diǎn)：
2.ViewPager使用案例
我們只需在xml布局文件中添加如下代碼：
activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content"> </android.support.v4.view.ViewPager></RelativeLayout>
tab.xml(作為ViewPager的子布局)：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorAccent" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab1" /></LinearLayout>
然后這里我們先創(chuàng)建4個(gè)要在ViewPager中顯示的界面，代碼如下：
ArrayList<View> viewContainter = new ArrayList<View>();View view1 = LayoutInflater.from(this).inflate(R.layout.tab1, null);View view2 = LayoutInflater.from(this).inflate(R.layout.tab2, null);View view3 = LayoutInflater.from(this).inflate(R.layout.tab3, null);View view4 = LayoutInflater.from(this).inflate(R.layout.tab4, null);//viewContainter添加viewviewContainter.add(view1);viewContainter.add(view2);viewContainter.add(view3);viewContainter.add(view4);
有了數(shù)據(jù)后我們就要?jiǎng)?chuàng)建數(shù)據(jù)適配器了，我們創(chuàng)建一個(gè)數(shù)據(jù)適配器MyPagerAdapter繼承自PagerAdapter，在PagerAdapter我們必須重寫以下幾個(gè)方法：
int getCount()
getCount():返回可以滑動(dòng)的VIew的個(gè)數(shù)
void destroyItem(ViewGroup container, int position,Object object)
從當(dāng)前container中刪除指定位置的View
Object instantiateItem(ViewGroup container, int position)
將當(dāng)前視圖添加到container中并返回當(dāng)前View視圖
boolean isViewFromObject(View arg0, Object arg1)
該函數(shù)用來判斷instantiateItem(ViewGroup, int)函數(shù)所返回來的Object與一個(gè)頁面視圖是否是代表的同一個(gè)視圖，官方建議直接返回arg0 == arg1即可。
下面我們給出MyPagerAdapters完整代碼：
/*** ViewPager的數(shù)據(jù)適配器*/class MyPagerAdapters extends PagerAdapter{ //返回可以滑動(dòng)的VIew的個(gè)數(shù) @Override public int getCount() { return viewContainter.size(); } //滑動(dòng)切換的時(shí)候銷毀當(dāng)前的組件 @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) container).removeView(viewContainter.get(position)); } //將當(dāng)前視圖添加到container中并返回當(dāng)前View視圖 @Override public Object instantiateItem(ViewGroup container, int position) { ((ViewPager) container).addView(viewContainter.get(position)); return viewContainter.get(position); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; }最后我們只要把MyPagerAdapters適配器設(shè)置給ViewPager即可：
pager = (ViewPager) this.findViewById(R.id.viewpager);pager.setAdapter(new MyPagerAdapters());
MainActivity完整代碼如下：
package com.zejian.viewpager;import android.annotation.SuppressLint;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import java.util.ArrayList;public class MainActivity extends Activity { ViewPager pager = null; PagerTabStrip tabStrip = null; ArrayList<View> viewContainter = new ArrayList<View>(); @SuppressLint("ResourceAsColor") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); pager = (ViewPager) this.findViewById(R.id.viewpager); View view1 = LayoutInflater.from(this).inflate(R.layout.tab1, null); View view2 = LayoutInflater.from(this).inflate(R.layout.tab2, null); View view3 = LayoutInflater.from(this).inflate(R.layout.tab3, null); View view4 = LayoutInflater.from(this).inflate(R.layout.tab4, null); //viewpager開始添加view viewContainter.add(view1); viewContainter.add(view2); viewContainter.add(view3); viewContainter.add(view4); //設(shè)置Adapter pager.setAdapter(new MyPagerAdapters()); } /** * ViewPager的數(shù)據(jù)適配器 */ class MyPagerAdapters extends PagerAdapter{ //返回可以滑動(dòng)的VIew的個(gè)數(shù) @Override public int getCount() { return viewContainter.size(); } //滑動(dòng)切換的時(shí)候銷毀當(dāng)前的組件 @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) container).removeView(viewContainter.get(position)); } //將當(dāng)前視圖添加到container中并返回當(dāng)前View視圖 @Override public Object instantiateItem(ViewGroup container, int position) { ((ViewPager) container).addView(viewContainter.get(position)); return viewContainter.get(position); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } }}到此，最簡單的ViewPager使用方式已經(jīng)介紹完啦。
3.PagerTitleStrip類和PagerTabStrip類
我們在編寫ViewPager的應(yīng)用時(shí)，還會(huì)使用到兩個(gè)組件類分別是PagerTitleStrip類和PagerTabStrip類，PagerTitleStrip類直接繼承自ViewGroup類，用于設(shè)置每頁的標(biāo)題，而PagerTabStrip類繼承PagerTitleStrip類用于控制Tab選擇時(shí)指示條樣式或者標(biāo)題樣式，這兩個(gè)類也都是容器類。但是有一點(diǎn)我們需要特別需要注意， 在定義XML的layout的時(shí)候，這兩個(gè)類必須是ViewPager標(biāo)簽的子標(biāo)簽，不然會(huì)出錯(cuò) 。由于PagerTabStrip類繼承PagerTitleStrip類，因此PagerTabStrip拓展了PagerTitleStrip類功能，所以這里我們僅演示PagerTabStrip用法。
首先我們在activity_main.xml文件中添加PagerTabStrip控件：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content"> <android.support.v4.view.PagerTabStrip android:id="@+id/tabstrip" android:layout_width="wrap_content" android:layout_height="50dip" android:gravity="center" /> </android.support.v4.view.ViewPager></RelativeLayout>
接著我們在MainActivity.java文件中創(chuàng)建標(biāo)題數(shù)據(jù)：
ArrayList<String> titleContainer = new ArrayList<String>();//頁簽項(xiàng)?titleContainer.add("今日頭條");?titleContainer.add("今天熱點(diǎn)");?titleContainer.add("今日財(cái)經(jīng)");?titleContainer.add("今日軍事");想要為每個(gè)標(biāo)簽頁添加標(biāo)題，我們必須重寫PagerAdapter類中的getPageTitle方法，然后根據(jù)位置position從集合數(shù)據(jù)中獲取對應(yīng)的title返回即可，該方法實(shí)現(xiàn)如下：
@Overridepublic CharSequence getPageTitle(int position) { return titleContainer.get(position);}接下來我們來通過PagerTabStrip控件改變每個(gè)Tab的下橫線指示線的style。代碼如下：
tabStrip = (PagerTabStrip) this.findViewById(R.id.tabstrip);//取消tab下面的長橫線tabStrip.setDrawFullUnderline(false);//設(shè)置tab的背景色tabStrip.setBackgroundResource(R.color.bg);//設(shè)置當(dāng)前tab頁簽的下劃線顏色tabStrip.setTabIndicatorColorResource(R.color.red);tabStrip.setTextSpacing(400);
到此標(biāo)題和指示器都設(shè)置完成，下面我們給出改版后的MainActivity代碼：
package com.zejian.viewpager;import android.annotation.SuppressLint;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import java.util.ArrayList;public class MainActivity extends Activity { ViewPager pager = null; PagerTabStrip tabStrip = null; ArrayList<View> viewContainter = new ArrayList<View>(); ArrayList<String> titleContainer = new ArrayList<String>(); @SuppressLint("ResourceAsColor") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); pager = (ViewPager) this.findViewById(R.id.viewpager); tabStrip = (PagerTabStrip) this.findViewById(R.id.tabstrip); //取消tab下面的長橫線 tabStrip.setDrawFullUnderline(false); //設(shè)置tab的背景色 tabStrip.setBackgroundResource(R.color.bg); //設(shè)置當(dāng)前tab頁簽的下劃線顏色 tabStrip.setTabIndicatorColorResource(R.color.red); tabStrip.setTextSpacing(400); View view1 = LayoutInflater.from(this).inflate(R.layout.tab1, null); View view2 = LayoutInflater.from(this).inflate(R.layout.tab2, null); View view3 = LayoutInflater.from(this).inflate(R.layout.tab3, null); View view4 = LayoutInflater.from(this).inflate(R.layout.tab4, null); //viewpager開始添加view viewContainter.add(view1); viewContainter.add(view2); viewContainter.add(view3); viewContainter.add(view4); //頁簽項(xiàng) titleContainer.add("今日頭條"); titleContainer.add("今天熱點(diǎn)"); titleContainer.add("今日財(cái)經(jīng)"); titleContainer.add("今日軍事"); pager.setAdapter(new MyPagerAdapters()); } /** * ViewPager的數(shù)據(jù)適配器 */ class MyPagerAdapters extends PagerAdapter{ //返回可以滑動(dòng)的VIew的個(gè)數(shù) @Override public int getCount() { return viewContainter.size(); } //滑動(dòng)切換的時(shí)候銷毀當(dāng)前的組件 @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) container).removeView(viewContainter.get(position)); } //將當(dāng)前視圖添加到container中并返回當(dāng)前View視圖 @Override public Object instantiateItem(ViewGroup container, int position) { ((ViewPager) container).addView(viewContainter.get(position)); return viewContainter.get(position); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public CharSequence getPageTitle(int position) { return titleContainer.get(position); } }}實(shí)際上在我們開發(fā)中很少會(huì)使用到PagerTabStrip與PagerTitleStrip，因?yàn)樗麄儗?shí)現(xiàn)的標(biāo)題欄效果很不好，不能指定一個(gè)頁面一次顯示一個(gè)，或者全部顯示，而且標(biāo)題還跟著界面滑動(dòng)。因此實(shí)際應(yīng)用中并不建議使用。我們更多的是去自定義指示器，這樣的話效果也會(huì)更好，好了，到此，本篇到此告一段落。
Fragment+ViewPager的基本用法
1.FragmentPagerAdapter與FragmentStatePagerAdapter
當(dāng)ViewPager與Fragment結(jié)合使用時(shí)，我們所需要使用的數(shù)據(jù)適配器就已不再是PagerAdapter而是官方另外提供的FragmentPagerAdapter與FragmentStatePagerAdapter數(shù)據(jù)適配器，下面我們先來聊聊這兩個(gè)FragmentPagerAdapter與FragmentStatePagerAdapter的使用方法及其主要區(qū)別。
FragmentPagerAdapter
FragmentPagerAdapter 繼承自 PagerAdapter。相比通用的 PagerAdapter，該類更專注于每一頁均為 Fragment 的情況。該類內(nèi)的每一個(gè)生成的 Fragment 都將保存在內(nèi)存之中，盡管不可見的視圖有時(shí)會(huì)被銷毀，但用戶所有訪問過的fragment都會(huì)被保存在內(nèi)存中，因此fragment實(shí)例會(huì)保存大量的各種狀態(tài)，這就造成了很大的內(nèi)存開銷。所以FragmentPagerAdapter比較適用于那些相對靜態(tài)的頁，數(shù)量也比較少的應(yīng)用情景，如主流主界面；如果需要處理有很多頁，并且數(shù)據(jù)動(dòng)態(tài)性較大、占用內(nèi)存較多的情況，應(yīng)該使用FragmentStatePagerAdapter。對應(yīng)實(shí)現(xiàn)FragmentPagerAdapter ，我們只需重寫getCount()與getItem()兩個(gè)方法，因此相對于繼承自 PagerAdapter，更方便一些。接下來我們來看看如何用代碼實(shí)現(xiàn)FragmentPagerAdapter
class MyFragmentAdapter extends FragmentPagerAdapter{ List<Fragment> list; public MyFragmentAdapter(FragmentManager fm,List<Fragment> list) { super(fm); this.list=list; } /** * 返回需要展示的fragment * @param position * @return */ @Override public Fragment getItem(int position) { return list.get(position); } /** * 返回需要展示的fangment數(shù)量 * @return */ @Override public int getCount() { return list.size(); }}代碼相當(dāng)簡單，我們這里簡單以下兩個(gè)函數(shù)
getItem(int position)
這個(gè)函數(shù)實(shí)際上是根據(jù)下標(biāo)position需要展示的fragment界面，該方法是在PagerAdapter#instantiateItem()方法中被調(diào)用的，大家只要看一下FragmentPagerAdapter源碼就清晰了。
getCount()
這個(gè)函數(shù)就更簡單了，返回需要展示的fragment的總個(gè)數(shù)。
到此我們就對FragmentPagerAdapter介紹完了，下面我們接著看看FragmentStatePagerAdapter類。
FragmentStatePagerAdapter
FragmentStatePagerAdapter 和 FragmentPagerAdapter 一樣，是繼承子 PagerAdapter。但是它們的不同點(diǎn)在于其類名中的 ‘State' 所表明的含義一樣，該 PagerAdapter 的實(shí)現(xiàn)將只保留當(dāng)前頁面，當(dāng)頁面離開視線后，就會(huì)被消除，釋放其資源；而在頁面需要顯示時(shí)，再生成新的頁面。這樣實(shí)現(xiàn)的最大好處在于當(dāng)擁有大量的頁面時(shí)，不必在內(nèi)存中占用大量的內(nèi)存。我們在實(shí)現(xiàn)FragmentStatePagerAdapter是也同樣只需重寫getCount()與getItem()兩個(gè)方法，而且其方法含義跟FragmentPagerAdapter是一樣的。下面我們來看看實(shí)現(xiàn)案例，其實(shí)就改了個(gè)繼承類而已。
class MyFragmentStateAdapter extends FragmentStatePagerAdapter{ List<Fragment> list; public MyFragmentStateAdapter(FragmentManager fm,List<Fragment> list) { super(fm); this.list=list; } /** * 返回需要展示的fragment * @param position * @return */ @Override public Fragment getItem(int position) { return list.get(position); } /** * 返回需要展示的fangment數(shù)量 * @return */ @Override public int getCount() { return list.size(); } }從代碼的角度來看就換了繼承類，其他都沒有變化。最后我們來實(shí)現(xiàn)一個(gè)簡單例子；
我們先來編寫需要的Fragment布局.fragment.xml如下：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/tv" android:textSize="20dp" android:textColor="@color/white" android:layout_width="wrap_content" android:layout_height="wrap_content" /></LinearLayout>
FragmentView.java代碼如下：
package com.zejian.activity;package com.zejian.viewpager;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/** * Created by zejian * Time 16/8/7. * Description: */public class FragmentView extends Fragment { private Bundle arg; @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); arg=getArguments(); } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view= inflater.inflate(R.layout.fragment,null); TextView tv= (TextView) view.findViewById(R.id.tv); int page=arg.getInt("pager_num"); if (page==1){ view.setBackgroundResource(R.color.colorAccent); }else if(page==2){ view.setBackgroundResource(R.color.greed); }else if(page==3){ view.setBackgroundResource(R.color.red); }else if(page==4){ view.setBackgroundResource(R.color.colorPrimary); } tv.setText(arg.getString("Title")); return view; } public static FragmentView newInstance(Bundle args) { FragmentView fragment = new FragmentView(); fragment.setArguments(args); return fragment; }}Fragment的代碼也很清新，我們通過傳遞過來的參數(shù)去判斷每個(gè)fragment的背景顏色，并設(shè)置標(biāo)題名稱，最后返回我們需要展示的view。我們再來看看actvity的布局文件
activity_vp_fg.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager></LinearLayout>
VP_FG_Activity.java
package com.zejian.viewpager;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentStatePagerAdapter;import android.support.v4.view.ViewPager;import java.util.ArrayList;import java.util.List;/** * Created by zejian * Time 16/8/7. * Description: */public class VP_FG_Activity extends FragmentActivity { private ViewPager viewPager; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_vp_fg); viewPager= (ViewPager) findViewById(R.id.vp); initData(); } public void initData(){ List<Fragment> list=new ArrayList<>(); Bundle bundle1=new Bundle(); bundle1.putString("Title","第一個(gè)Fragment"); bundle1.putInt("pager_num",1); Fragment fg1=FragmentView.newInstance(bundle1); Bundle bundle2=new Bundle(); bundle2.putString("Title","第二個(gè)Fragment"); bundle2.putInt("pager_num",2); Fragment fg2=FragmentView.newInstance(bundle2); Bundle bundle3=new Bundle(); bundle3.putString("Title","第三個(gè)Fragment"); bundle3.putInt("pager_num",3); Fragment fg3=FragmentView.newInstance(bundle3); Bundle bundle4=new Bundle(); bundle4.putString("Title","第四個(gè)Fragment"); bundle4.putInt("pager_num",4); Fragment fg4=FragmentView.newInstance(bundle4); list.add(fg1); list.add(fg2); list.add(fg3); list.add(fg4); viewPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(),list)); } class MyFragmentAdapter extends FragmentPagerAdapter{ List<Fragment> list; public MyFragmentAdapter(FragmentManager fm,List<Fragment> list) { super(fm); this.list=list; } /** * 返回需要展示的fragment * @param position * @return */ @Override public Fragment getItem(int position) { return list.get(position); } /** * 返回需要展示的fangment數(shù)量 * @return */ @Override public int getCount() { return list.size(); } } class MyFragmentStateAdapter extends FragmentStatePagerAdapter{ List<Fragment> list; public MyFragmentStateAdapter(FragmentManager fm,List<Fragment> list) { super(fm); this.list=list; } /** * 返回需要展示的fragment * @param position * @return */ @Override public Fragment getItem(int position) { return list.get(position); } /** * 返回需要展示的fangment數(shù)量 * @return */ @Override public int getCount() { return list.size(); } }}在Activity我們通過以下代碼去初始化ViewPager所需要的數(shù)據(jù)
List<Fragment> list=new ArrayList<>();Bundle bundle1=new Bundle();bundle1.putString("Title","第一個(gè)Fragment");bundle1.putInt("pager_num",1);Fragment fg1=FragmentView.newInstance(bundle1);Bundle bundle2=new Bundle();bundle2.putString("Title","第二個(gè)Fragment");bundle2.putInt("pager_num",2);Fragment fg2=FragmentView.newInstance(bundle2);Bundle bundle3=new Bundle();bundle3.putString("Title","第三個(gè)Fragment");bundle3.putInt("pager_num",3);Fragment fg3=FragmentView.newInstance(bundle3);Bundle bundle4=new Bundle();bundle4.putString("Title","第四個(gè)Fragment");bundle4.putInt("pager_num",4);Fragment fg4=FragmentView.newInstance(bundle4);list.add(fg1);list.add(fg2);list.add(fg3);list.add(fg4);viewPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(),list));最后把數(shù)據(jù)時(shí)適配器MyFragmentAdapter設(shè)置給ViewPager，這樣就完成數(shù)據(jù)的填充。這里有點(diǎn)要注意的是，Activity繼承自FragmentActivity，只有FragmentActivity才能內(nèi)嵌fragment頁面，普通Activity是不行的。
我們運(yùn)行一下程序到此我們對Fragment+ViewPager的使用方式已經(jīng)有了比較清晰的了解了，本篇也就告一段落，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
