ViewPager+Fragment实现滑动页面

多页面布局

myfragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/current_page"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

主页面布局

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="30dp"
        android:background="#f4f6f8"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textview1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="第一页"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="第二页"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="第三页"
            android:textSize="14sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_line"
        android:layout_width="100dp"
        android:layout_height="3dp"
        android:background="#fdb302"
        android:orientation="horizontal" >
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

多页面实现类

MyFragment.java

package com.example.fragmentpager;

import android.annotation.SuppressLint;
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;

@SuppressLint("ValidFragment")
public class MyFragment extends Fragment {

	private int i;

	public MyFragment() {
	}

	public MyFragment(int i) {
		this.i = i;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View view = inflater.inflate(R.layout.myfragment, null);
		TextView textView = (TextView) view.findViewById(R.id.current_page);
		textView.setText("第" + i + "页");
		return view;
	}
}

主页面实现类

MainActivity.java

package com.example.fragmentpager;

import java.util.ArrayList;
import java.util.List;

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.util.DisplayMetrics;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements OnClickListener {
	private TextView textView1;// 第一页
	private TextView textView2;// 第二页
	private TextView textView3;// 第三页
	private LinearLayout line;// 滑动条

	private List<Fragment> fragments;
	private ViewPager viewPager;
	private int width;// 屏幕宽度
	private int offset;// 当前偏移量
	private int prevOffset;// 前次偏移量

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		textView1 = (TextView) findViewById(R.id.textview1);
		textView2 = (TextView) findViewById(R.id.textview2);
		textView3 = (TextView) findViewById(R.id.textview3);
		line = (LinearLayout) findViewById(R.id.layout_line);
		viewPager = (ViewPager) findViewById(R.id.viewpager);

		textView1.setOnClickListener(this);
		textView2.setOnClickListener(this);
		textView3.setOnClickListener(this);
		setWidth();
		initView();
	}

	// 设置滑动条的宽度
	public void setWidth() {
		// 获得屏幕分辨率
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		width = dm.widthPixels;
		// 设置划线的宽度
		LayoutParams lp = line.getLayoutParams();
		// 屏幕的1/3
		lp.width = width / 3;
		line.setLayoutParams(lp);
	}

	// 初始化视图
	public void initView() {
		// 创建并添加3个Fragment页面到ArrayList<Fragment>中
		fragments = new ArrayList<Fragment>();
		for (int i = 0; i < 3; i++) {
			MyFragment myFragment = new MyFragment(i + 1);
			fragments.add(myFragment);
		}
		// 设置适配器
		viewPager.setAdapter(new MyFragmentPager(getSupportFragmentManager()));
		// 添加状态改变监听
		viewPager.setOnPageChangeListener(new PageChangeListener());
		// 默认显示第一页
		viewPager.setCurrentItem(0);
	}

	class MyFragmentPager extends FragmentPagerAdapter {

		public MyFragmentPager(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int arg0) {
			// TODO Auto-generated method stub
			return fragments.get(arg0);
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return fragments.size();
		}

	}

	class PageChangeListener implements OnPageChangeListener {

		@Override
		public void onPageSelected(int arg0) {
			// TODO Auto-generated method stub
			// 得到当前偏移量
			offset = (width / 3) * arg0;
			// X从前一个偏移量移到当前偏移量，Y不改变
			TranslateAnimation translate = new TranslateAnimation(prevOffset,
					offset, 0, 0);
			// 移动后不恢复原状态
			translate.setFillAfter(true);
			translate.setDuration(300);
			line.setAnimation(translate);
			// 移动过后标志offset为前一个偏移量
			prevOffset = offset;
		}

		@Override
		public void onPageScrollStateChanged(int arg0) {
			// TODO Auto-generated method stub

		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub
		}

	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		// 点击切换页面
		switch (v.getId()) {
		case R.id.textview1:
			viewPager.setCurrentItem(0);
			break;
		case R.id.textview2:
			viewPager.setCurrentItem(1);
			break;
		case R.id.textview3:
			viewPager.setCurrentItem(2);
			break;
		}
	}

}

FragmentPager截图