怎么在anndroid中利用ViewPager切換fragment

本篇文章為大家展示了怎么在anndroid中利用ViewPager切換fragment，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一、ViewPager的基本用法

1.ViewPager概述

ViewPager是android擴展包v4包中的類，這個類可以讓我們左右切換當(dāng)前的view。我們先來聊聊ViewPager的幾個相關(guān)知識點：

1. ViewPager類直接繼承了ViewGroup類，因此它一個容器類，可以添加其他的view類

2. ViewPager類需要一個PagerAdapter適配器類給它提供數(shù)據(jù)（這點跟ListView一樣需要數(shù)據(jù)適配器Adater）

3. ViewPager經(jīng)常和Fragment一起使用，并且官方還提供了專門的FragmentPagerAdapter和FragmentStatePagerAdapter類供Fragment中的ViewPager使用

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個要在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添加view
viewContainter.add(view1);
viewContainter.add(view2);
viewContainter.add(view3);
viewContainter.add(view4);

有了數(shù)據(jù)后我們就要創(chuàng)建數(shù)據(jù)適配器了，我們創(chuàng)建一個數(shù)據(jù)適配器MyPagerAdapter繼承自PagerAdapter，在PagerAdapter我們必須重寫以下幾個方法：

int getCount()
getCount():返回可以滑動的VIew的個數(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與一個頁面視圖是否是代表的同一個視圖，官方建議直接返回arg0 == arg1即可。

下面我們給出MyPagerAdapters完整代碼：

/**
*  ViewPager的數(shù)據(jù)適配器
*/
class MyPagerAdapters extends PagerAdapter{
  //返回可以滑動的VIew的個數(shù)
  @Override
  public int getCount() {
    return viewContainter.size();
  }
  //滑動切換的時候銷毀當(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{
    //返回可以滑動的VIew的個數(shù)
    @Override
    public int getCount() {
      return viewContainter.size();
    }
    //滑動切換的時候銷毀當(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)用時，還會使用到兩個組件類分別是PagerTitleStrip類和PagerTabStrip類，PagerTitleStrip類直接繼承自ViewGroup類，用于設(shè)置每頁的標(biāo)題，而PagerTabStrip類繼承PagerTitleStrip類用于控制Tab選擇時指示條樣式或者標(biāo)題樣式，這兩個類也都是容器類。但是有一點我們需要特別需要注意， 在定義XML的layout的時候，這兩個類必須是ViewPager標(biāo)簽的子標(biāo)簽，不然會出錯 。由于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>();
//頁簽項
?titleContainer.add("今日頭條");
?titleContainer.add("今天熱點");
?titleContainer.add("今日財經(jīng)");
?titleContainer.add("今日軍事");

想要為每個標(biāo)簽頁添加標(biāo)題，我們必須重寫PagerAdapter類中的getPageTitle方法，然后根據(jù)位置position從集合數(shù)據(jù)中獲取對應(yīng)的title返回即可，該方法實現(xiàn)如下：

@Override
public CharSequence getPageTitle(int position) {
  return titleContainer.get(position);
}

接下來我們來通過PagerTabStrip控件改變每個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);
    //頁簽項
    titleContainer.add("今日頭條");
    titleContainer.add("今天熱點");
    titleContainer.add("今日財經(jīng)");
    titleContainer.add("今日軍事");

    pager.setAdapter(new MyPagerAdapters());

  }

  /**
   *  ViewPager的數(shù)據(jù)適配器
   */
  class MyPagerAdapters extends PagerAdapter{
    //返回可以滑動的VIew的個數(shù)
    @Override
    public int getCount() {
      return viewContainter.size();
    }
    //滑動切換的時候銷毀當(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);
    }
  }
}

實際上在我們開發(fā)中很少會使用到PagerTabStrip與PagerTitleStrip，因為他們實現(xiàn)的標(biāo)題欄效果很不好，不能指定一個頁面一次顯示一個，或者全部顯示，而且標(biāo)題還跟著界面滑動。因此實際應(yīng)用中并不建議使用。我們更多的是去自定義指示器，這樣的話效果也會更好，好了，到此，本篇到此告一段落。

Fragment+ViewPager的基本用法

1.FragmentPagerAdapter與FragmentStatePagerAdapter

當(dāng)ViewPager與Fragment結(jié)合使用時，我們所需要使用的數(shù)據(jù)適配器就已不再是PagerAdapter而是官方另外提供的FragmentPagerAdapter與FragmentStatePagerAdapter數(shù)據(jù)適配器，下面我們先來聊聊這兩個FragmentPagerAdapter與FragmentStatePagerAdapter的使用方法及其主要區(qū)別。

FragmentPagerAdapter

FragmentPagerAdapter 繼承自 PagerAdapter。相比通用的 PagerAdapter，該類更專注于每一頁均為 Fragment 的情況。該類內(nèi)的每一個生成的 Fragment 都將保存在內(nèi)存之中，盡管不可見的視圖有時會被銷毀，但用戶所有訪問過的fragment都會被保存在內(nèi)存中，因此fragment實例會保存大量的各種狀態(tài)，這就造成了很大的內(nèi)存開銷。所以FragmentPagerAdapter比較適用于那些相對靜態(tài)的頁，數(shù)量也比較少的應(yīng)用情景，如主流主界面；如果需要處理有很多頁，并且數(shù)據(jù)動態(tài)性較大、占用內(nèi)存較多的情況，應(yīng)該使用FragmentStatePagerAdapter。對應(yīng)實現(xiàn)FragmentPagerAdapter ，我們只需重寫getCount()與getItem()兩個方法，因此相對于繼承自 PagerAdapter，更方便一些。接下來我們來看看如何用代碼實現(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)簡單，我們這里簡單以下兩個函數(shù)

getItem(int position)
這個函數(shù)實際上是根據(jù)下標(biāo)position需要展示的fragment界面，該方法是在PagerAdapter#instantiateItem()方法中被調(diào)用的，大家只要看一下FragmentPagerAdapter源碼就清晰了。

getCount()
這個函數(shù)就更簡單了，返回需要展示的fragment的總個數(shù)。

到此我們就對FragmentPagerAdapter介紹完了，下面我們接著看看FragmentStatePagerAdapter類。

FragmentStatePagerAdapter

FragmentStatePagerAdapter 和 FragmentPagerAdapter 一樣，是繼承子 PagerAdapter。但是它們的不同點在于其類名中的 ‘State' 所表明的含義一樣，該 PagerAdapter 的實現(xiàn)將只保留當(dāng)前頁面，當(dāng)頁面離開視線后，就會被消除，釋放其資源；而在頁面需要顯示時，再生成新的頁面。這樣實現(xiàn)的最大好處在于當(dāng)擁有大量的頁面時，不必在內(nèi)存中占用大量的內(nèi)存。我們在實現(xiàn)FragmentStatePagerAdapter是也同樣只需重寫getCount()與getItem()兩個方法，而且其方法含義跟FragmentPagerAdapter是一樣的。下面我們來看看實現(xiàn)案例，其實就改了個繼承類而已。

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();
    }
  }

從代碼的角度來看就換了繼承類，其他都沒有變化。最后我們來實現(xiàn)一個簡單例子；

我們先來編寫需要的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ù)去判斷每個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","第一個Fragment");
    bundle1.putInt("pager_num",1);
    Fragment fg1=FragmentView.newInstance(bundle1);

    Bundle bundle2=new Bundle();
    bundle2.putString("Title","第二個Fragment");
    bundle2.putInt("pager_num",2);
    Fragment fg2=FragmentView.newInstance(bundle2);

    Bundle bundle3=new Bundle();
    bundle3.putString("Title","第三個Fragment");
    bundle3.putInt("pager_num",3);
    Fragment fg3=FragmentView.newInstance(bundle3);

    Bundle bundle4=new Bundle();
    bundle4.putString("Title","第四個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","第一個Fragment");
bundle1.putInt("pager_num",1);
Fragment fg1=FragmentView.newInstance(bundle1);

Bundle bundle2=new Bundle();
bundle2.putString("Title","第二個Fragment");
bundle2.putInt("pager_num",2);
Fragment fg2=FragmentView.newInstance(bundle2);

Bundle bundle3=new Bundle();
bundle3.putString("Title","第三個Fragment");
bundle3.putInt("pager_num",3);
Fragment fg3=FragmentView.newInstance(bundle3);

Bundle bundle4=new Bundle();
bundle4.putString("Title","第四個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ù)時適配器MyFragmentAdapter設(shè)置給ViewPager，這樣就完成數(shù)據(jù)的填充。這里有點要注意的是，Activity繼承自FragmentActivity，只有FragmentActivity才能內(nèi)嵌fragment頁面，普通Activity是不行的。

上述內(nèi)容就是怎么在anndroid中利用ViewPager切換fragment，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。