1. 简介

ViewPager需要import android.support.v4这个jar包才可以使用
ViewPager的效果就是能够轻松实现左右滑动屏幕, 不需要使用GestureDetector。在ViewPager的内部可以嵌入PagerTitleStrip或PagerTabStrip, 可以用来设置显示页面的title内容, 但是不要妄想把它当作Tab来用(虽然我的意图本来就是这样, 但是很悲剧), 因为它不是固定的
首先获取ViewPager布局mViewPager, 或者自己用Java实现不用xml, 然后要想实现滑动翻页必须得设置它的Adapter, mViewPager.setAdapter(mAdapter)
而mAdapter应该是一个继承FragmentPagerAdapter或者FragmentStatePagerAdapter的类的实例, 它应该实现滑动时所需要展示的页面, 而这些页面可以另外用一个继承Fragment的类实现, 然后将所需要的这些页面加入一个List中
需要注意的地方有: 这其中用到的Fragment应使用android.support.v4.app.Fragment而不是android.app.Fragment, FragmentManager也是如此(因为其中用了getSupportFragmentManager方法, 它的返回值是v4包里的FragmentManager)

以上

2. 项目结构

project structure

3. 布局

main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical" >
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_tab_strip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="#636363"
            android:textColor="#fff"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"/>
    </android.support.v4.view.ViewPager>
</LinearLayout>

4. 逻辑代码

4.1 主Java程序:

package com.hecate.Apollo;
/**
 * Created by hecate-xw on 2014/8/30.
 * It's a demo that display how to swipe pages via class ViewPager.
 */
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

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

public class MyActivity extends FragmentActivity {
    /** 多个页面的list **/
    List<Fragment> fragmentList = new ArrayList<Fragment>();
    /** 多个页面的title list,用来显示PagerTabStrip的内容 **/
    List<String> titleList = new ArrayList<String>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ViewPager mViewPager = (ViewPager) findViewById(R.id.pager);
        fragmentList.add(new MyFragment("page1"));
        fragmentList.add(new MyFragment("page2"));
        fragmentList.add(new MyFragment("page3"));

        titleList.add("Artist");
        titleList.add("Song");
        titleList.add("Favorite");
        MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(
                getSupportFragmentManager(),fragmentList,titleList);
        mViewPager.setAdapter(myFragmentPagerAdapter);
    }

    class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        private List<Fragment> fragmentList;
        private List<String> titleList;

        public MyFragmentPagerAdapter(FragmentManager supportFragmentManager, List<Fragment> fragmentList, List<String> titleList) {
            super(supportFragmentManager);
            this.fragmentList = fragmentList;
            this.titleList = titleList;
        }

        @Override
        public Fragment getItem(int i) {
            return (fragmentList == null || fragmentList.size() == 0) ? null : fragmentList.get(i);
        }

        @Override
        public int getCount() {
            return ( fragmentList == null ) ? 0 : fragmentList.size();
        }

        @Override
        public CharSequence getPageTitle( int position ) {
            return (titleList.size() > position) ? titleList.get(position) : "";
        }
    }
}

4.2 MyFragment.java:

package com.hecate.Apollo;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by hecate-xw on 2014/8/30.
 * Override some methods of class Fragment.
 */
public class MyFragment extends Fragment {
    private String page;
    public MyFragment(String page) {
        super();
        this.page = page;
    }
    @Override
    public View onCreateView( LayoutInflater inflater,
                              ViewGroup container, Bundle savedInstanceState) {
        // The last two arguments ensure LayoutParams are inflated
        // properly.
        if( "page1".equals(page) ) {
            View view = inflater.inflate(
                    R.layout.swipe_fragment_1, container, false);
            return view;
        } else if( "page2".equals(page) ) {
            View view = inflater.inflate(
                    R.layout.swipe_fragment_2, container, false);
            return view;
        } else if( "page3".equals(page) ) {
            View view = inflater.inflate(
                    R.layout.swipe_fragment_3, container, false);
            return view;
        } else {
            View view = inflater.inflate(
                    R.layout.fragment, container, false);
            return view;
        }
    }

}

5. 测试运行

添加相应的资源文件就可以运行了
打开app开始显示的页面:
viewpager_page_1

向左滑动一次或者点击PagerTabStrip的第二个Tab:
viewpager_page_2

再向左滑动一次或者点击PagerTabStrip的第三个Tab:
viewpager_page_3

附上每个page的xml布局文件，随便写的用来测试:
swipe_fragment_1:

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

    <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/imageView" android:src="@drawable/img1" android:layout_weight="0.66"/>
    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="This is page1"
            android:id="@+id/textView"/>
</LinearLayout>

swipe_fragment_2:

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

    <RatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/ratingBar"/>
    <ProgressBar
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/progressBar"/>
    <SeekBar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/seekBar" android:indeterminate="false"/>
    <Spinner
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/spinner"/>
</LinearLayout>

swipe_fragment_3:

<?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:weightSum="1" android:orientation="vertical">

    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:ems="10"
            android:id="@+id/editText"/>
    <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="RadioButton1"
                android:id="@+id/radioButton" android:checked="false"/>
        <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="RadioButton2"
                android:id="@+id/radioButton2" android:layout_gravity="center_horizontal" android:checked="false"/>
        <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="RadioButton3"
                android:id="@+id/radioButton3" android:layout_gravity="right" android:checked="false"/>
    </RadioGroup>
    <TextClock
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textClock" android:layout_gravity="center_horizontal" android:layout_weight="0.07"/>
</LinearLayout>