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

2022-11-07 11:28:22

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