ViewPager之使用PagerTabStrip添加标题栏，实现滑动效果

1.首先，转自：

(1).《ViewPager 详解（三）---PagerTabStrip与PagerTitleStrip添加标题栏的异同》 这篇文章写得不错，大家可以参考一下。

(2). ViewPager与Fragment的使用方法  首先是参考这篇文章的代码，发现标题栏里的标题不能显示出来，可能代码中为ViewPager设置适配器时，有些问题，使用上面第一篇文章一改便可以了！

2.接下来新建一个项目，项目名称为ViewPagerTest，先看下效果，效果如下：

3.打开activity_main文件，如果没有android.support.v4.jar包，要下载并导入这个jar包，才能使用ViewPager实现滑动效果，代码如下：

<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.support.v4.view.ViewPager
        android:id="@+id/viewPager1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

       <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagerTabStrip1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:layout_gravity="top"/>
        
    </android.support.v4.view.ViewPager>

</RelativeLayout>

4.我们在layout目录下新建3个xml文件，用于分别显示视图：

fragment1.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="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|center_horizontal"
        android:text="@string/text"
        android:textColor="#CC99CC"
        android:textSize="21sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/text1"
        android:textSize="19sp" />

</LinearLayout>

fragment2.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="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|center_horizontal"
        android:text="@string/text2"
        android:textColor="#CC99CC"
        android:textSize="21sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/text3"
        android:textSize="19sp" />

</LinearLayout>

fragment3.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="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|center_horizontal"
        android:text="@string/text4"
        android:textColor="#CC99CC"
        android:textSize="21sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/text5"
        android:textSize="19sp" />
    
    <ImageView 
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background"/>

</LinearLayout>

在这里需要的字符放在了strings.xml文件下，strings.xml文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">ViewPagerTest</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
	<string name="text">如风</string>
	<string name="text1">来又如风离又如风,或世事通通不过是场梦,人在途中人在时空,相识也许不过擦过梦中,来又如风离又如风,或我亦不应再这般心痛,但我不过是人非梦,总有些真笑亦有真痛.</string>
	<string name="text2">棋子</string>
	<string name="text3">我像是一颗棋,进退任由你决定,我不是你眼中唯一将领,却是不起眼的小兵,我像是一颗棋子,来去全不由自己,举手无回你从不曾犹豫,我却受控在你手里。</string>
	<string name="text4">王菲</string>
	<string name="text5">王菲：1969年8月8日出生于北京，中国女歌手、影视演员。</string>
</resources>

5.接下来打开MainActivity.java文件，代码如下：

package xg.viewpagertest;

import java.util.ArrayList;

import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends FragmentActivity {
	private ViewPager viewPager1;
	private View view1,view2,view3;
	//页面列表
	private ArrayList<View> viewList;
	//标题列表
	ArrayList<String> titleList=new ArrayList<String>();
	//通过pagerTabStrip可以设置标题的属性
	private PagerTabStrip pagerTabStrip1;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager1=(ViewPager)findViewById(R.id.viewPager1);
        LayoutInflater inflater=getLayoutInflater();
        view1=inflater.inflate(R.layout.fragment1,null);
        view2=inflater.inflate(R.layout.fragment2, null);
        view3=inflater.inflate(R.layout.fragment3, null);
        
        viewList=new ArrayList<View>();//将要分页显示的视图装入ArrayList中
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);
    
        titleList=new ArrayList<String>();//每个页面的标题数据
        titleList.add("第一页");
        titleList.add("第二页");
        titleList.add("第三页");
        
        pagerTabStrip1=(PagerTabStrip)findViewById(R.id.pagerTabStrip1);
        //设置下划线的颜色
        pagerTabStrip1.setTabIndicatorColor(getResources().getColor(android.R.color.holo_green_dark));
        //设置背景的颜色
        pagerTabStrip1.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_dark));
        
        viewPager1.setAdapter(new MyViewPagerAdapter());//为ViewPager设置适配器
    }


   public  class MyViewPagerAdapter extends PagerAdapter{

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

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0==arg1;
	}

	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		container.removeView(viewList.get(position));
	}

	@Override
	public CharSequence getPageTitle(int position) {
		return titleList.get(position);
	}

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		container.addView(viewList.get(position));
		return viewList.get(position);
	}
   }
}

这样就可以实现上面的那种效果了，如果想要理解更深的，可以借鉴这篇文章http://blog.csdn.net/harvic880925/article/details/38521865，这位大牛还写了关于ViewPager的系列文章，可以参考！