ViewPager结合Fragment实现页面左右滑动

之前简单介绍了ViewPager的用法，这里就不多说了。因为ViewPager要结合Fragment，所以activity要继承FragmentActivty，适配器要实现FragmentPagerAdapter，

首先看下activity

package com.fei.viewpager.test;
import android.annotation.SuppressLint;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.app.FragmentTransaction;
import android.content.Intent;
import android.os.Bundle;
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.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import com.fei.viewpager.R;
public class MyPagerActivity extends FragmentActivity implements TabListener{
	private ViewPager mViewPager;
	private FragmentPagerAdapter mAdapter;
	private ActionBar mActionBar;
	
	@SuppressLint("NewApi") @Override
	protected void onCreate(Bundle arg0) {
		super.onCreate(arg0);
		setContentView(R.layout.activity_viewpager);
		mViewPager = (ViewPager) findViewById(R.id.viewpager);
		mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
		mViewPager.setAdapter(mAdapter);
		mActionBar = getActionBar();
		//设置副标题
		mActionBar.setSubtitle("ActionBar");
		//设置标题是否可见
		mActionBar.setDisplayShowTitleEnabled(true);
		//设置图标是否可见,如果要將tab显示在actionbar下面，此项必须为true
		mActionBar.setDisplayShowHomeEnabled(true);
		//在actionbar上显示tab
		mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
		for(int i = 0;i <4;i++){
			//给每个tab添加监听，如果没有监听，那么点击tab就不会切换页面
			mActionBar.addTab(mActionBar.newTab().setText(i+"").setTabListener(this));
		}		
		//给Viewpager设置监听,如果不加监听，就不会和tab对应
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				mActionBar.getTabAt(position).select();
			}
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
			}
			@Override
			public void onPageScrollStateChanged(int arg0) {
			}
		});
	}
	@Override
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
		mViewPager.setCurrentItem(tab.getPosition(),true);
	}
	@Override
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {
	}
	@Override
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
	}
	
}	

布局文件和之前一样，里面也是只有一个ViewPager。viewpager和每一个tab必须添加监听，否则就不会同步

自定义adapter实现FragmentPagerAdapter.

package com.fei.viewpager.test;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * FragmentPagerAdapter
 * 和ViewPager结合使用
 * @author fei
 *
 */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

	public MyFragmentPagerAdapter(FragmentManager fm) {
		super(fm);
	}
	@Override
	public Fragment getItem(int position) {
		MyFragment mFragment = new MyFragment();
		Bundle bundle = new Bundle();    //使用bundle可以传参,将当前位置传到fragment里
		bundle.putInt("position", position);
		mFragment.setArguments(bundle);
		return mFragment;
	}
	@Override
	public int getCount() {
		return 4;      //共有多少个fragment
	}
}

然后在自定义一个fragment，继承自 Fragment，其中的onCreateView必须要实现，否则将不会有内容显示

package com.fei.viewpager.test;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.fei.viewpager.R;

public class MyFragment extends Fragment {

	private TextView mTextView;
	private Bundle mBundle;
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		mBundle = getArguments();
	}
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment, container, false);
		mTextView = (TextView) view.findViewById(R.id.tv_text);
		//这里可以获取到传过来的参数
		int position = mBundle.getInt("position");    
		StringBuffer sb = new StringBuffer();
		for(int i = 0;i<20;i++){
			sb.append(position+"");
		}
		mTextView.setText(sb.toString());
		return view;
	}
}

这个fragment里面的布局也很简单，只有一个textview，这里就不贴代码了。

当然，你也可以定义多个fragment，这里只是简单介绍下。一般情况下每个itemView里都是一个fragment。

到这里，基本就可以实现界面左右滑动了，如果你想在滑动的时候有动态效果，那么就要设置viewpager的属性

mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());

其中ZoomOutPageTransformer()这个类是拷贝api上的，如果有能力的话可以自己写你想要的动画效果。

运行结果：

     

因为是截图，所以动画效果不是很明显。如果大家有什么疑问，希望多多留言交流