快捷導(dǎo)航

Android App中使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)切換效果

更新時(shí)間：2016年03月23日 11:13:47 作者：安卓吧

這篇文章主要介紹了Android App中使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)切換效果的方法,借助Fragment可以使Activity的內(nèi)部管理邏輯更加清晰,需要的朋友可以參考下

在android應(yīng)用中，多屏滑動(dòng)是一種很常見(jiàn)的風(fēng)格，沒(méi)有采用viewpager的代碼實(shí)現(xiàn)會(huì)很長(zhǎng)，如果采用ViewPager，代碼就會(huì)短很多，但是使用ViewPager也有弊端：需要導(dǎo)入android-support-v4.jar、細(xì)節(jié)無(wú)法控制。不過(guò)現(xiàn)在情況已經(jīng)不一樣了，android-support-v4中提供了很多實(shí)用的功能，以至于現(xiàn)在新建一個(gè)android工程默認(rèn)都會(huì)導(dǎo)入這個(gè)jar包。那我們就也采用viewpager來(lái)做滑動(dòng)吧。另外一個(gè)概念就是Fragment和FragmentActivity，F(xiàn)ragment是一個(gè)特殊的類(lèi)，有著和activity一致的生命周期和view一致的界面，也就是Fragment就等于具有生命周期的View，但是，要注意的是：Fragment并不是View，它和View沒(méi)有繼承關(guān)系。使用Fragment的好處是：Fragment可以重用，而且每個(gè)Fragment可以在內(nèi)部處理自己的業(yè)務(wù)就像activity一樣，這樣模塊間耦合較低，比把所有的業(yè)務(wù)都寫(xiě)在一個(gè)activity內(nèi)部邏輯要清晰很多。還有就是，由于每個(gè)模塊的業(yè)務(wù)都在Fragment內(nèi)部來(lái)實(shí)現(xiàn)，這樣activity只要管理好幾個(gè)Fragment就行了，不需要做和業(yè)務(wù)相關(guān)的事情，最后，F(xiàn)ragment可以用來(lái)做不同分辨率機(jī)型的適配。Fragment在sdk(android 3.0及更高)和android-support-v4里面都有，但是由于兼容性的問(wèn)題，我們只能使用android-support-v4里面的Fragment，除非你想你的apk只跑在3.0以后的android手機(jī)上，F(xiàn)ragmentActivity的情況和Fragment類(lèi)似。關(guān)于Fragment和FragmentActivity，其實(shí)有一些基本的用法需要了解一下，但是考慮到Fragment不是本文的重點(diǎn)，所以這里就不介紹了，另外，本文只用Fragment做了一個(gè)簡(jiǎn)單的界面，大家應(yīng)該一看就懂，好了，言歸正傳。

ViewPager + Fragment 經(jīng)常用到代碼是從 actionbarsherlock 中提取出來(lái)的，這個(gè)效果都知道是滑動(dòng)來(lái)切換的。直接上代碼了
在這里簡(jiǎn)單說(shuō)明一下 FragmentStatePagerAdapter 和 FragmentPagerAdapter
2個(gè)adapter：
第一種 fragment狀態(tài)adapter - 在當(dāng)前只會(huì)存在前1個(gè)fragment 當(dāng)前 fragment 和下1個(gè) fragment 其他銷(xiāo)毀，適合加載多數(shù)據(jù)；
第二種 FragmentPagerAdapter - 全部存在，所以不太適合加載大量的數(shù)據(jù) 如圖片什么的，很容易內(nèi)存溢出。

工程結(jié)構(gòu)：

2016323111010106.jpg (321×250)

1.activity adapter 在一起（static類(lèi)型的 Fragment）

public class ViewPageFragment extends FragmentActivity { 
   
  //這個(gè)是有多少個(gè) fragment頁(yè)面 
  static final int NUM_ITEMS = 5; 
  private MyAdapter  mAdapter; 
  private ViewPager  mPager;   
  private int nowPage; 
    
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.pagers_fragment_main); 
    mAdapter = new MyAdapter(getSupportFragmentManager() ); 
    mPager = (ViewPager)findViewById(R.id.mypagers_pager); 
    mPager.setAdapter(mAdapter); 
  } 
 
 
  /** 
   * 有狀態(tài)的 ，只會(huì)有前3個(gè)存在 其他銷(xiāo)毀， 前1個(gè)， 中間， 下一個(gè) 
   */ 
  public static class MyAdapter extends  FragmentStatePagerAdapter { 
    public MyAdapter(FragmentManager fm) { 
      super(fm); 
    } 
 
    @Override 
    public int getCount() { 
      return NUM_ITEMS; 
    } 
 
    //得到每個(gè)item 
    @Override 
    public Fragment getItem(int position) { 
      return ArrayFragment.newInstance(position); 
    } 
 
     
    // 初始化每個(gè)頁(yè)卡選項(xiàng) 
    @Override 
    public Object instantiateItem(ViewGroup arg0, int arg1) { 
      // TODO Auto-generated method stub 
      return super.instantiateItem(arg0, arg1); 
    } 
     
    @Override 
    public void destroyItem(ViewGroup container, int position, Object object) { 
      System.out.println( "position Destory" + position); 
      super.destroyItem(container, position, object); 
    } 
     
  } 
 
   
  /** 
   * 無(wú)狀態(tài)的 會(huì)全部加載著， 這個(gè)適合少量的 特別多的圖片啊啥的 還是用 FragmentStatePagerAdapter 
   * @author lilei 
   */ 
//  public static class MyAdapter extends FragmentPagerAdapter { 
//   public MyAdapter(FragmentManager fm ) { 
//      super(fm); 
//     
//    } 
// 
//    @Override 
//    public int getCount() { 
//      return NUM_ITEMS; 
//    } 
// 
//    @Override 
//    public Fragment getItem(int position) { 
//     // 返回相應(yīng)的 fragment 
//      return ArrayFragment.newInstance(position); 
//    } 
//     
//    @Override 
//    public void destroyItem(ViewGroup container, int position, Object object) { 
//     System.out.println( "position Destory" + position); 
//     super.destroyItem(container, position, object); 
//    } 
//  } 
   
   
  /** 
   * 所有的 每個(gè)Fragment 
   */ 
  public static class ArrayFragment extends Fragment { 
     
    int mNum; 
    static ArrayFragment newInstance(int num) { 
      ArrayFragment array= new ArrayFragment(); 
      Bundle args = new Bundle(); 
      args.putInt("num", num); 
      array.setArguments(args); 
      return array; 
    } 
 
     
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
      super.onCreate(savedInstanceState); 
      mNum = getArguments() != null ? getArguments().getInt("num") : 1; 
      System.out.println("mNum Fragment create ="+ mNum); 
    } 
 
     
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
        Bundle savedInstanceState) { 
       System.out.println("onCreateView = "); 
       //在這里加載每個(gè) fragment的顯示的 View 
       View v = null; 
        
       if(mNum == 0){ 
         v = inflater.inflate(R.layout.pagers_fragment1, container, false); 
         ((TextView)v.findViewById(R.id.textView1)).setText(mNum+ "= mNum");             
       }else if(mNum == 1){ 
         v = inflater.inflate(R.layout.pagers_fragment1, container, false); 
         ((TextView)v.findViewById(R.id.textView1)).setText(mNum+ "= mNum"); 
       }else if(mNum == 2){ 
         v = inflater.inflate(R.layout.pagers_fragment1, container, false); 
         ((TextView)v.findViewById(R.id.textView1)).setText(mNum+ "= mNum"); 
       }else{ 
         v = inflater.inflate(R.layout.pagers_fragment1, container, false); 
         ((TextView)v.findViewById(R.id.textView1)).setText(mNum+ "= mNum"); 
       }    
      return v; 
    } 
 
    @Override 
    public void onActivityCreated(Bundle savedInstanceState) { 
      System.out.println("onActivityCreated = "); 
      super.onActivityCreated(savedInstanceState);   
    } 
     
    @Override 
    public void onDestroyView(){ 
      System.out.println(mNum + "mNumDestory"); 
      super.onDestroyView(); 
    } 
     
    @Override 
    public void onDestroy(){ 
      super.onDestroy();  
    } 
     
  } 
}

2. 和 1也沒(méi)什么太大區(qū)別（個(gè)中用處看個(gè)人了）

public class ViewPageFragmentCS extends FragmentActivity { 
   
  //這個(gè)是有多少個(gè) fragment頁(yè)面 
  private MyAdapter  mAdapter; 
  private ViewPager  mPager;  
  private List<Entity> list = new ArrayList<ViewPageFragmentCS.Entity>();; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.pagers_fragment_main); 
     
    for (int i = 0; i < 7 ; i++) { 
      Entity ee = new Entity(); 
      ee.name = "ll"+ i; 
      ee.age = ""+ i; 
      list.add(ee); 
    } 
    mAdapter = new MyAdapter(getSupportFragmentManager(),list); 
    mPager = (ViewPager)findViewById(R.id.mypagers_pager); 
    mPager.setAdapter(mAdapter); 
  } 
 
 
   
  private class Entity{ 
    public String name; 
    public String age; 
  } 
   
   
  // 在這里你可以傳 list<Fragment> 也可以傳遞 list<Object>數(shù)據(jù) 
  public class MyAdapter extends FragmentStatePagerAdapter { 
    List<Entity> list_ee; 
     
    public MyAdapter(FragmentManager fm, List<Entity> ee) { 
      super(fm); 
      this.list_ee = ee ; 
    } 
 
    @Override 
    public int getCount() { 
      return list_ee.size(); 
    } 
 
    // 初始化每個(gè)頁(yè)卡選項(xiàng) 
    @Override 
    public Object instantiateItem(ViewGroup arg0, int position) { 
       
      ArrayFragment ff = (ArrayFragment)super.instantiateItem(arg0, position); 
      ff.setThings(list_ee.get(position),position); 
      return ff; 
    } 
     
    @Override 
    public void destroyItem(ViewGroup container, int position, Object object) { 
      System.out.println( "position Destory" + position); 
      super.destroyItem(container, position, object); 
    } 
 
     
    @Override 
    public Fragment getItem(int arg0) { 
      // TODO Auto-generated method stub 
      return new ArrayFragment(); 
    } 
     
  } 
 
   
   
  /** 
   * 所有的 每個(gè)Fragment 
   */ 
  public class ArrayFragment extends Fragment { 
    private Entity ee; 
    private int position; 
     
    public void setThings(Entity ee,int position){ 
      this.ee =ee ;   
      this.position = position; 
    } 
 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
      super.onCreate(savedInstanceState); 
    } 
 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
        Bundle savedInstanceState) { 
       System.out.println("onCreateView = "); 
       //在這里加載每個(gè) fragment的顯示的 View 
       View v = inflater.inflate(R.layout.pagers_fragment1, container, false); 
      ((TextView)v.findViewById(R.id.textView1)).setText(ee.name+ "= ee.Name -=age"+ ee.age);  
      return v; 
    } 
 
    @Override 
    public void onActivityCreated(Bundle savedInstanceState) { 
      System.out.println("onActivityCreated = "); 
      super.onActivityCreated(savedInstanceState);   
    } 
     
    @Override 
    public void onDestroyView(){ 
      System.out.println("onDestroyView = "+ position); 
      super.onDestroyView(); 
    } 
     
    @Override 
    public void onDestroy(){ 
      System.out.println("onDestroy = "+ position); 
      super.onDestroy();  
    }     
  } 
}

直接復(fù)制過(guò)去就可以看效果了別忘記 V4包，xml 布局文件自己隨便整個(gè)吧。
滑動(dòng)到第3個(gè)頁(yè)面的時(shí)候可以看到第1個(gè)頁(yè)面銷(xiāo)毀第4個(gè)生成，當(dāng)前存在2、3、4：

2016323111113586.jpg (630×136)