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

时间：2022-12-01 03:57:10

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的布局文件

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

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

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

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

接着看fragment1.java

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

可以看到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跟这个类似,代码不贴了,直接运行程序看看效果

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

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

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

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

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

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

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

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

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

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

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

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

看看生命周期是怎么样的

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

源码下载地址

相关文章