ViewPager+Fragment基本使用方法

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

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

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

查看文本打印?

<android.support.v4.view.ViewPager  

    android:id="@+id/viewpager"  

    android:layout_width="match_parent"  

    android:layout_height="match_parent">  

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



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

查看文本打印?

package huahua.viewpager;  

  

import java.util.ArrayList;  

import java.util.List;  

  

  

import android.os.Bundle;  

import android.app.Activity;  

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.PagerTabStrip;  

import android.support.v4.view.PagerTitleStrip;  

import android.support.v4.view.ViewPager;  

import android.util.Log;  

import android.view.ViewGroup;  

  

public class MainActivity extends FragmentActivity {  

    private ViewPager m_vp;  

    private fragment1 mfragment1;  

    private fragment2 mfragment2;  

    private fragment3 mfragment3;  

    //页面列表  

    private ArrayList<Fragment> fragmentList;  

    //标题列表  

    ArrayList<String>   titleList    = new ArrayList<String>();  

    //通过pagerTabStrip可以设置标题的属性  

    private PagerTabStrip pagerTabStrip;  

      

    private PagerTitleStrip pagerTitleStrip;  

    @Override  

    protected void onCreate(Bundle savedInstanceState) {  

        super.onCreate(savedInstanceState);  

        setContentView(R.layout.activity_main);  

          

        m_vp = (ViewPager)findViewById(R.id.viewpager);  

          

        pagerTabStrip=(PagerTabStrip) findViewById(R.id.pagertab);  

        //设置下划线的颜色  

        pagerTabStrip.setTabIndicatorColor(getResources().getColor(android.R.color.holo_green_dark));   

        //设置背景的颜色  

        pagerTabStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_dark));  

          

//      pagerTitleStrip=(PagerTitleStrip) findViewById(R.id.pagertab);  

//      //设置背景的颜色  

//      pagerTitleStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_dark));  

          

        mfragment1 = new fragment1();  

        mfragment2 = new fragment2();  

        mfragment3 = new fragment3();  

  

        fragmentList = new ArrayList<Fragment>();  

        fragmentList.add(mfragment1);  

        fragmentList.add(mfragment2);  

        fragmentList.add(mfragment3);  

          

        titleList.add("第一页 ");  

        titleList.add("第二页");  

        titleList.add("第三页 ");  

          

        m_vp.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager()));  

    }  

      

    public class MyViewPagerAdapter extends FragmentPagerAdapter{  

        public MyViewPagerAdapter(FragmentManager fm) {  

            super(fm);  

            // TODO Auto-generated constructor stub  

        }  

          

        @Override  

        public Fragment getItem(int arg0) {  

            return fragmentList.get(arg0);  

        }  

  

        @Override  

        public int getCount() {  

            return fragmentList.size();  

        }  

  

        @Override  

        public CharSequence getPageTitle(int position) {  

            // TODO Auto-generated method stub  

            return titleList.get(position);  

        }  

  

          

    }  

  

}  

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

接着看fragment1.java

查看文本打印?

package huahua.viewpager;  

  

  

import android.os.Bundle;  

import android.support.v4.app.Fragment;  

import android.util.Log;  

import android.view.LayoutInflater;  

import android.view.View;  

import android.view.ViewGroup;  

import android.widget.Button;  

import android.widget.TextView;  

  

  

public class fragment1 extends Fragment{  

    private View mMainView;  

    private TextView tv;  

    private Button btn;  

    @Override  

    public void onCreate(Bundle savedInstanceState) {  

        // TODO Auto-generated method stub  

        super.onCreate(savedInstanceState);  

        Log.v("huahua", "fragment1-->onCreate()");  

          

        LayoutInflater inflater = getActivity().getLayoutInflater();  

        mMainView = inflater.inflate(R.layout.fragment1, (ViewGroup)getActivity().findViewById(R.id.viewpager), false);  

          

        tv = (TextView)mMainView.findViewById(R.id.tv1);  

        btn = (Button)mMainView.findViewById(R.id.btn1);  

        btn.setOnClickListener(new View.OnClickListener() {  

              

            @Override  

            public void onClick(View v) {  

                tv.setText("Hello Viewpager\"");  

            }  

        });  

          

    }  

  

    @Override  

    public View onCreateView(LayoutInflater inflater, ViewGroup container,  

            Bundle savedInstanceState) {  

        Log.v("huahua", "fragment1-->onCreateView()");  

          

        ViewGroup p = (ViewGroup) mMainView.getParent();   

        if (p != null) {   

            p.removeAllViewsInLayout();   

            Log.v("huahua", "fragment1-->移除已存在的View");  

        }   

          

        return mMainView;  

    }  

  

    @Override  

    public void onDestroy() {  

        // TODO Auto-generated method stub  

        super.onDestroy();  

        Log.v("huahua", "fragment1-->onDestroy()");  

    }  

  

    @Override  

    public void onPause() {  

        // TODO Auto-generated method stub  

        super.onPause();  

        Log.v("huahua", "fragment1-->onPause()");  

    }  

  

    @Override  

    public void onResume() {  

        // TODO Auto-generated method stub  

        super.onResume();  

        Log.v("huahua", "fragment1-->onResume()");  

    }  

  

    @Override  

    public void onStart() {  

        // TODO Auto-generated method stub  

        super.onStart();  

        Log.v("huahua", "fragment1-->onStart()");  

    }  

  

    @Override  

    public void onStop() {  

        // TODO Auto-generated method stub  

        super.onStop();  

        Log.v("huahua", "fragment1-->onStop()");  

    }  

  

}  

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

查看文本打印?

ViewGroup p = (ViewGroup) mMainView.getParent();   

        if (p != null) {   

            p.removeAllViewsInLayout();   

            Log.v("huahua", "fragment1-->移除已存在的View");  

        }   

不然在第二次加载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还有很多其他很有用的方法,有兴趣的朋友可以试试.

源码下载地址