ViewPager + Fragment 实现页面滑动

微信的界面可以左右滑动，同时也可以单击下面的选项卡切换页面，这种效果很流畅也很简洁。一开始想做这个效果的时候想的是用TabActivity，结果发现已经过时了，其实用ViewPager和Fragment可以很轻易实现这个效果。与此同时还可以设置上面有标题的效果，效果如下：





下面分别说这两个效果的实现。

一、使用PagerTitleStrip

要使用ViewPager首先当然要在布局文件中声明一个ViewPager：要注意引入了support.v4包

<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"
tools:context=".MainActivity" >

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

<android.support.v4.view.PagerTitleStrip
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
</android.support.v4.view.ViewPager>

</RelativeLayout>

在声明ViewPager的同时，在ViewPager里面声明PagerTitleStrip，这样就可以在ViewPager上面看到其标题了。

使用ViewPager时，需要设置适配器，我们这里要让每个页面都是一个Fragment，所以应该使用FragmentPagerAdapter适配器，在这个适配器中，我们要用到标题（String数组）和Fragment集合，通过构造方法传递进来。代码如下：

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{

/**
* 保存页面的队列
*/
private List<Fragment> fragments;
/**
* 标题
*/
private String[] title;

public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragments, String...title) {
super(fm);
this.fragments = fragments;
this.title = title;
}

/**
* 当前的页面
*/
public Fragment getItem(int arg0) {
return fragments.get(arg0);
}

/**
* 页面的个数
*/
public int getCount() {
return fragments.size();
}

/**
* 当前的标题
*/
public CharSequence getPageTitle(int position) {
return title[position];
}

}

那么当然还需要准备三个Fragment，分别如下：

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.guide_one, container, false);
return view;
}
}

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

public class SecondFragment extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.guide_two, container, false);
return view;
}
}

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

public class ThirdFragment extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.guide_three, container, false);
return view;
}
}

为了方便演示，每个Fragment的布局都用一张图片填充，因为三个都类似，这里只给出其中一个，和其他两个区别在与图片的不同：

<?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"
>

<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/item03"
/>

</LinearLayout>

这样在Activity中即可使用它们，代码如下：

import java.util.ArrayList;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.util.TypedValue;

/**
* 继承FragmentActivity
* @author lenovo
*
*/
public class MainActivity extends FragmentActivity{
/**
* ViewPager
*/
private ViewPager viewPager;

/**
* 保存Fragment的队列
*/
private ArrayList<Fragment> fragmentList;

/**
* 标题
*/
private String[] title = {"选项卡1", "选项卡2", "选项卡3"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}

private void initViews(){
//获取ViewPager的实例
viewPager = (ViewPager) findViewById(R.id.viewPager);
//获取标题的实例
PagerTitleStrip pagerTitle = (PagerTitleStrip) findViewById(R.id.title);
//给标题字体设置大小
pagerTitle.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 30);

//添加页面
fragmentList = new ArrayList<Fragment>();
fragmentList.add(new FirstFragment());
fragmentList.add(new SecondFragment());
fragmentList.add(new ThirdFragment());

//给ViewPager设置适配器
viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList, title));
//设置默认页面为第一个页面
viewPager.setCurrentItem(0);

}

}

这样即可实现第一种效果了。

二、下方选项卡形式

第二种效果是通过点击下方选项卡，可以控制页面的滑动，并且滑动页面也能影响下面的选项卡。

思路是所有选项卡构成一个布局，里面每个选项卡都是一个ImageView和TextView，切换选项卡，就是改变选项卡中的图片。

布局文件：

<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"
tools:context=".MainActivity" >

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

<!-- 选项卡面板 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:background="#000000" >

<LinearLayout
android:id="@+id/first_layout"
android:layout_width="0sp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/tv_guid1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/search"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选项卡1"
android:textSize="18sp" />
</LinearLayout>

<LinearLayout
android:id="@+id/second_layout"
android:layout_width="0sp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/tv_guid2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/chat"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选项卡2"
android:textSize="18sp" />
</LinearLayout>

<LinearLayout
android:id="@+id/third_layout"
android:layout_width="0sp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/tv_guid3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/shopping"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选项卡3"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>

</RelativeLayout>

因为不用PagerTitleStrip，所以适配器也简单了很多：

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{

private List<Fragment> fragments;

public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}

@Override
public Fragment getItem(int arg0) {
return fragments.get(arg0);
}

@Override
public int getCount() {
return fragments.size();
}

}

MainActivity中代码：

import java.util.ArrayList;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.TypedValue;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;

/**
* 继承FragmentActivity并实现页面滑动监听OnPageChangeListener和事件监听OnClickListener
*
* @author lenovo
*
*/
public class MainActivity extends FragmentActivity implements
OnPageChangeListener, OnClickListener {
/**
* ViewPager
*/
private ViewPager viewPager;

/**
* 保存Fragment的队列
*/
private ArrayList<Fragment> fragmentList;

/**
* 选项卡的图片数组
*/
private ImageView[] images;

/**
* 选项卡中图片的id，方便操作
*/
private int[] imageViewIds = { R.id.tv_guid1, R.id.tv_guid2, R.id.tv_guid3 };

/**
* 图片资源id
*/
private int[] imageIds = {R.drawable.search, R.drawable.chat, R.drawable.shopping};
private int[] imagePressIds = {R.drawable.search_press, R.drawable.chat_press, R.drawable.shopping_press};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}

private void initViews() {
// 获取ViewPager实例
viewPager = (ViewPager) findViewById(R.id.viewPager);

// 添加页面
fragmentList = new ArrayList<Fragment>();
fragmentList.add(new FirstFragment());
fragmentList.add(new SecondFragment());
fragmentList.add(new ThirdFragment());

// 设置监听器
viewPager.setAdapter(new MyFragmentPagerAdapter(
getSupportFragmentManager(), fragmentList));
// 设置当前页面为第一个页面
viewPager.setCurrentItem(0);
// 添加页面滑动监听
viewPager.setOnPageChangeListener(this);

// 获取页面下方三个选项卡
View firstLayout = findViewById(R.id.first_layout);
View secondLayout = findViewById(R.id.second_layout);
View thirdLayout = findViewById(R.id.third_layout);
// 为它们添加事件监听
firstLayout.setOnClickListener(this);
secondLayout.setOnClickListener(this);
thirdLayout.setOnClickListener(this);

// /初始化选项卡中的图片
images = new ImageView[imageViewIds.length];
for (int i = 0; i < imageViewIds.length; i++) {
images[i] = (ImageView) findViewById(imageViewIds[i]);
}
// 设置当前选中的为第一个选项卡
images[0].setImageResource(R.drawable.search_press);
}

@Override
public void onPageScrollStateChanged(int arg0) {
// 页面滑动状态改变的监听
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// 页面滑动的监听
}

/**
* 选中的页面，滑动后改变选项卡状态
*/
@Override
public void onPageSelected(int position) {
// 将所有选项卡置为未选中
clearImageState();
// 改变选项卡中的图片
images[position].setImageResource(imagePressIds[position]);
}

@Override
public void onClick(View v) {
// 将所有选项卡置为未选中
clearImageState();
// 设置当前页面对应的选项卡被选中
switch (v.getId()) {
case R.id.first_layout:
// 改变当前页面为第一个页面
viewPager.setCurrentItem(0);
// 改变选项卡中的图片
images[0].setImageResource(R.drawable.search_press);
break;
case R.id.second_layout:
// 改变当前页面为第二个页面
viewPager.setCurrentItem(1);
// 改变选项卡中的图片
images[1].setImageResource(R.drawable.chat_press);
break;
case R.id.third_layout:
// 改变当前页面为第三个页面
viewPager.setCurrentItem(2);
// 改变选项卡中的图片
images[2].setImageResource(R.drawable.shopping_press);
break;
}
}

/**
* 将所有选项卡置为未选中
*/
private void clearImageState() {
for(int i = 0; i < images.length; i++){
images[i].setImageResource(imageIds[i]);
}
}
}

因为Fragment没变，所以不再赘述Fragment中的代码。

这样即可实现第二种效果