首页 > 代码库 > 转：ViewPager+Fragment基本使用方法(附源码)

转：ViewPager+Fragment基本使用方法(附源码)

2024-07-24 05:41:50   218人阅读

ViewPager+Fragment可以做出多页面滑动效果,让我们的应用程序界面操作起来更加灵活

对于ViewPager和Fragment组件还不熟悉的朋友,可以先看看相关的资料

首先在activity_main.xml布局文件中加入ViewPager组件

 

查看文本打印?
  1. <android.support.v4.view.ViewPager  
  2.     android:id="@+id/viewpager"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent">  


既然要实现左右的页面滑动,肯定要往ViewPager中添加一些View视图或者Fragment,这里创建了3个Fragment的布局文件


这3个布局文件非常简单,跟Activity的布局用法一模一样,代码就不贴出来了,直接看Activity的java代码

 

查看文本打印?
  1. package huahua.viewpager;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6.   
  7. import android.os.Bundle;  
  8. import android.app.Activity;  
  9. import android.support.v4.app.Fragment;  
  10. import android.support.v4.app.FragmentActivity;  
  11. import android.support.v4.app.FragmentManager;  
  12. import android.support.v4.app.FragmentPagerAdapter;  
  13. import android.support.v4.app.FragmentStatePagerAdapter;  
  14. import android.support.v4.view.PagerTabStrip;  
  15. import android.support.v4.view.PagerTitleStrip;  
  16. import android.support.v4.view.ViewPager;  
  17. import android.util.Log;  
  18. import android.view.ViewGroup;  
  19.   
  20. public class MainActivity extends FragmentActivity {  
  21.     private ViewPager m_vp;  
  22.     private fragment1 mfragment1;  
  23.     private fragment2 mfragment2;  
  24.     private fragment3 mfragment3;  
  25.     //页面列表  
  26.     private ArrayList<Fragment> fragmentList;  
  27.     //标题列表  
  28.     ArrayList<String>   titleList    = new ArrayList<String>();  
  29.     //通过pagerTabStrip可以设置标题的属性  
  30.     private PagerTabStrip pagerTabStrip;  
  31.       
  32.     private PagerTitleStrip pagerTitleStrip;  
  33.     @Override  
  34.     protected void onCreate(Bundle savedInstanceState) {  
  35.         super.onCreate(savedInstanceState);  
  36.         setContentView(R.layout.activity_main);  
  37.           
  38.         m_vp = (ViewPager)findViewById(R.id.viewpager);  
  39.           
  40.         pagerTabStrip=(PagerTabStrip) findViewById(R.id.pagertab);  
  41.         //设置下划线的颜色  
  42.         pagerTabStrip.setTabIndicatorColor(getResources().getColor(android.R.color.holo_green_dark));   
  43.         //设置背景的颜色  
  44.         pagerTabStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_dark));  
  45.           
  46. //      pagerTitleStrip=(PagerTitleStrip) findViewById(R.id.pagertab);  
  47. //      //设置背景的颜色  
  48. //      pagerTitleStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_dark));  
  49.           
  50.         mfragment1 = new fragment1();  
  51.         mfragment2 = new fragment2();  
  52.         mfragment3 = new fragment3();  
  53.   
  54.         fragmentList = new ArrayList<Fragment>();  
  55.         fragmentList.add(mfragment1);  
  56.         fragmentList.add(mfragment2);  
  57.         fragmentList.add(mfragment3);  
  58.           
  59.         titleList.add("第一页 ");  
  60.         titleList.add("第二页");  
  61.         titleList.add("第三页 ");  
  62.           
  63.         m_vp.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager()));  
  64.     }  
  65.       
  66.     public class MyViewPagerAdapter extends FragmentPagerAdapter{  
  67.         public MyViewPagerAdapter(FragmentManager fm) {  
  68.             super(fm);  
  69.             // TODO Auto-generated constructor stub  
  70.         }  
  71.           
  72.         @Override  
  73.         public Fragment getItem(int arg0) {  
  74.             return fragmentList.get(arg0);  
  75.         }  
  76.   
  77.         @Override  
  78.         public int getCount() {  
  79.             return fragmentList.size();  
  80.         }  
  81.   
  82.         @Override  
  83.         public CharSequence getPageTitle(int position) {  
  84.             // TODO Auto-generated method stub  
  85.             return titleList.get(position);  
  86.         }  
  87.   
  88.           
  89.     }  
  90.   
  91. }  

看到Viewpager跟ListView一样,都需要设置一个Adapter,上面代码是继承了FragmentPagerAdapter,在里面重写了3个方法.往这个Viewpager中添加了要显示的3个页面fragment和对应的3个标题

接着看fragment1.java

 

查看文本打印?
  1. package huahua.viewpager;  
  2.   
  3.   
  4. import android.os.Bundle;  
  5. import android.support.v4.app.Fragment;  
  6. import android.util.Log;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10. import android.widget.Button;  
  11. import android.widget.TextView;  
  12.   
  13.   
  14. public class fragment1 extends Fragment{  
  15.     private View mMainView;  
  16.     private TextView tv;  
  17.     private Button btn;  
  18.     @Override  
  19.     public void onCreate(Bundle savedInstanceState) {  
  20.         // TODO Auto-generated method stub  
  21.         super.onCreate(savedInstanceState);  
  22.         Log.v("huahua", "fragment1-->onCreate()");  
  23.           
  24.         LayoutInflater inflater = getActivity().getLayoutInflater();  
  25.         mMainView = inflater.inflate(R.layout.fragment1, (ViewGroup)getActivity().findViewById(R.id.viewpager), false);  
  26.           
  27.         tv = (TextView)mMainView.findViewById(R.id.tv1);  
  28.         btn = (Button)mMainView.findViewById(R.id.btn1);  
  29.         btn.setOnClickListener(new View.OnClickListener() {  
  30.               
  31.             @Override  
  32.             public void onClick(View v) {  
  33.                 tv.setText("Hello Viewpager\"");  
  34.             }  
  35.         });  
  36.           
  37.     }  
  38.   
  39.     @Override  
  40.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  41.             Bundle savedInstanceState) {  
  42.         Log.v("huahua", "fragment1-->onCreateView()");  
  43.           
  44.         ViewGroup p = (ViewGroup) mMainView.getParent();   
  45.         if (p != null) {   
  46.             p.removeAllViewsInLayout();   
  47.             Log.v("huahua", "fragment1-->移除已存在的View");  
  48.         }   
  49.           
  50.         return mMainView;  
  51.     }  
  52.   
  53.     @Override  
  54.     public void onDestroy() {  
  55.         // TODO Auto-generated method stub  
  56.         super.onDestroy();  
  57.         Log.v("huahua", "fragment1-->onDestroy()");  
  58.     }  
  59.   
  60.     @Override  
  61.     public void onPause() {  
  62.         // TODO Auto-generated method stub  
  63.         super.onPause();  
  64.         Log.v("huahua", "fragment1-->onPause()");  
  65.     }  
  66.   
  67.     @Override  
  68.     public void onResume() {  
  69.         // TODO Auto-generated method stub  
  70.         super.onResume();  
  71.         Log.v("huahua", "fragment1-->onResume()");  
  72.     }  
  73.   
  74.     @Override  
  75.     public void onStart() {  
  76.         // TODO Auto-generated method stub  
  77.         super.onStart();  
  78.         Log.v("huahua", "fragment1-->onStart()");  
  79.     }  
  80.   
  81.     @Override  
  82.     public void onStop() {  
  83.         // TODO Auto-generated method stub  
  84.         super.onStop();  
  85.         Log.v("huahua", "fragment1-->onStop()");  
  86.     }  
  87.   
  88. }  

可以看到Fragment中有个onCreateView方法,返回的是这个fragment的视图View,其他的生命周期方法都跟Activity一样,还要注意的是在回复View前一定要加入代码

 

查看文本打印?
  1. ViewGroup p = (ViewGroup) mMainView.getParent();   
  2.         if (p != null) {   
  3.             p.removeAllViewsInLayout();   
  4.             Log.v("huahua", "fragment1-->移除已存在的View");  
  5.         }   

不然在第二次加载onCreateView方法时会报异常:java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child‘s parent first.

其他的2个Fragment跟这个类似,代码不贴了,直接运行程序看看效果



效果图第一个页面显示出来,有个标题栏和下面的Fragment页面,主要看看在Viewpager中Fragment的生命周期是怎样的


上图中可以看到除了运行fragment1中的生命周期方法,fragment2的也运行了,然后我们向右滑动到fragment2界面看看


可以看到fragment3页面还没显示出来,其生命周期的方法就已经跑完了,再滑到fragment3


可以看到fragment3页面显示出来,这时fragment1才onPause和onStop


由此我们可以知道在Viewpager中每次显示出来一个页面Fragment时,都会把旁边的一个页面也预加载了,当然你可以控制预加载的页面的数量,

通过setOffscreenPageLimit(int pagenum)来设置,默认情况下参数是1

比如m_vp.setOffscreenPageLimit(2)是否会预加载2个页面

m_vp.setOffscreenPageLimit(0)是否会不预加载页面

看看生命周期是怎么样的

当然Viewpager和Fragment还有很多其他很有用的方法,有兴趣的朋友可以试试.


源码下载地址


转：ViewPager+Fragment基本使用方法(附源码)


联系
我们