android笔记:ViewPager实现界面的滑动

最近在学习ViewPager实现界面的滑动，拜读了郭神的博客文章，并抽取归纳了自己对ViewPager的理解。

ViewPager实现界面滑动的步骤如下：

1.在xml布局内加入控件android.support.v4.view.ViewPager

2.初始化ViewPager并通过findViewById加载

3.编写适配器，通过继承FragmentPagerAdapter并重写getCount()和getItem()来完成

4.编写界面，官方推荐使用Fragment来表示用于滑动的界面

5.实例化适配器，构造方法的参数为FragmentManager，可由getSupportFragmentManager()获取.

6.为ViewPager添加适配器

注意：

1.界面显示的是Fragment，创建活动界面应继承FragmentActivity而不是Activity,适配器应继承FragmentPagerAdapter

2.android.support.v4.app.Fragment和android.app.Fragment这两个包是不同的。

ViewPager来源于support.v4包，因此配合使用的Fragment也应该是support.v4里的包。

导入了错误的Fragment包，可能会报错：

Caused by: java.lang.ClassCastException: com.example.Fragment cannot be cast to android.support.v4.app.Fragment

具体代码如下所示：

activity_main.java

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/page"
        />

</RelativeLayout>

MainActivity.java

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.view.Menu;

public class MainActivity extends FragmentActivity {
    private ChatFragment chatFragment;
    private FoundFragment foundFragment;
    private ContactsFragment contactsFragment;

    private ViewPager mViewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager=(ViewPager)findViewById(R.id.page);
        //为ViewPager设置适配器
        mViewPager.setAdapter(new myPagerAdapter(getSupportFragmentManager()));
    }

 //继承并定义适配器，构造方法
 public class myPagerAdapter extends FragmentPagerAdapter{
    public myPagerAdapter(FragmentManager fm) {
        super(fm);
        // TODO Auto-generated constructor stub
    }

    private final String[] titles = { "聊天", "发现", "通讯录" };

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

    @Override
    public int getCount() {
        return titles.length;
    }

    //获取并返回对应的Fragment界面
    @Override
    public Fragment getItem(int position) {
        switch (position) {
        case 0:
            if (chatFragment == null) {
                chatFragment = new ChatFragment();
            }
            return chatFragment;
        case 1:
            if (foundFragment == null) {
                foundFragment = new FoundFragment();
            }
            return foundFragment;
        case 2:
            if (contactsFragment == null) {
                contactsFragment = new ContactsFragment();
            }
            return contactsFragment;
        default:
            return null;
        }
    }
 }

//加载选项菜单
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
     getMenuInflater().inflate(R.menu.main, menu);
     return true;
 }
}

res/values/string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">ViewPagerDemo</string>
    <string name="action_settings">Settings</string>

    <string name="first">界面一,向右滑得到界面二</string>
    <string name="second">界面二，向右滑得到界面三</string>
    <string name="third">界面三，向左滑得到界面二</string>
</resources>

fragment_first.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:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/first"
        android:text="@string/first"
        />

</LinearLayout>

FirstFragment.java

package com.example.viewpagerdemo;

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

public class FirstFragment extends Fragment{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // 加载视图
        View view =inflater.inflate(R.layout.fragment_first, null);
        return view;
    }
}

接下来的SecondFragment、ThirdFragmentation都和FirstFragment一样。。不再赘述

运行效果如下所示：

向右滑动到界面二，如下示：

参考的文章链接：

http://blog.csdn.net/guolin_blog/article/details/26365683