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截圖