ViewPager 实现标题栏和内容对应滑动效果

 好久没用到此控件了复习一下。

先上一下效果图：

效果如上，，上面有标题，下面是内容可以滑动。点击上面下面内容会改变，滑动下面上面标题也会改变。

MainActivity.java:

package com.example.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.graphics.Color;
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.FragmentStatePagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.FrameLayout;
public class MainActivity extends FragmentActivity {
 private ViewPager vp;
 /**
  * 此对象实现多页面滑动效果
  */
 private PagerTabStrip pts;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  // 这个就是活的viewPager的id,由于viewPager外面没有显示布局，所以默认的是framelayout,记得到framelayout的
  // 第一个child的就是viewpager.
  vp = (ViewPager) ((FrameLayout) findViewById(android.R.id.content))
    .getChildAt(0);
// vp=(ViewPager)findViewById(R.id.vp);
  pts = (PagerTabStrip) vp.findViewById(R.id.pts);
  // vp.setId(100);
  //设置标题哪里滑动的效果的颜色
  pts.setTabIndicatorColor(Color.BLUE);
  MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
  vp.setAdapter(adapter);
  vp.setOnPageChangeListener(new OnPageChangeListener() {
   @Override
   public void onPageSelected(int arg0) {
// 此方法是页面跳转完后得到调用，arg0是你当前选中的页面的Position（位置编号）。
   }
   @Override
   public void onPageScrolled(int arg0, float arg1, int arg2) {
    //当页面在滑动的时候会调用此方法，在滑动被停止之前，此方法回一直得到,
// arg0 :当前页面，及你点击滑动的页面
// arg1:当前页面偏移的百分比
// arg2:当前页面偏移的像素位置
   }

   @Override
   public void onPageScrollStateChanged(int state) {
    //，此方法是在状态改变的时候调用，有三种状态（0，1，2）。state ==1的时辰默示正在滑动，state==2的时辰默示滑动完毕了，state==0的时辰默示什么都没做。
    switch (state) {
    case ViewPager.SCROLL_STATE_SETTLING:
     break;
    }
   }
  });
 }
 private class MyAdapter extends FragmentStatePagerAdapter {
  private List<Fragment> frags;

  public MyAdapter(FragmentManager fm) {
   super(fm);
   frags = new ArrayList<Fragment>();
   frags.add(ColorFragment.getFragment(Color.RED));
   frags.add(ColorFragment.getFragment(Color.GREEN));
   frags.add(ColorFragment.getFragment(Color.BLUE));
   frags.add(ColorFragment.getFragment(Color.YELLOW));
  }
  @Override
  public Fragment getItem(int position) {
   return frags.get(position % frags.size());
  }
  @Override
  public int getCount() {
   //返回有多少页，取得是整数的最大值，实现无限滑动的效果
   return Integer.MAX_VALUE;
  }
  @Override
  public CharSequence getPageTitle(int position) {
   //设置标题的名称
   int po=position % frags.size();
   switch (po) {
   case 0:
    return "红色";
   case 1:
    return "绿色";
   case 2:
    return "蓝色";
   case 3:
    return "黄色";
   }
   return super.getPageTitle(position);
  }
 }
}

布局文件：

activity_main.xml

<!-- viewPager是一定要设置id的。 -->
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/vp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
<!-- 下面的对象实现多页面滑动效果，可是通过 android:layout_gravity="top"设置它的位置， -->
    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pts"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_gravity="top" />

</android.support.v4.view.ViewPager>

ColorFragment.java

package com.example.viewpagerdemo;
import java.util.Random;
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;
public class ColorFragment extends Fragment {
 private int color;
 public static final String COLOR_KEY = "color_key";
 private Random rnd = new Random();
 public static ColorFragment getFragment(Integer color) {
  ColorFragment cf = new ColorFragment();
  if (color != null) {
   //生成bundle对象，
   Bundle data = new Bundle();
   data.putInt(COLOR_KEY, color);
   //传递参数，因为直接通过构造传递参数的话，当Activity重新创建时，会重新构建所管理的Fragment，原先的Fragment的字段值将会全部丢失，但是通过Fragment.setArguments(Bundle bundle)方法设置的bundle会保留下来
   cf.setArguments(data);
  }
  return cf;
 }
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  //接收参数。
  Bundle data = getArguments();
  if (data != null) {
   color = data.getInt(COLOR_KEY);
  } else {
   color = rnd.nextInt(0x00FFFFFF + 1) | 0xFF000000;
  }
 }
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  //动态生成一个textview
  return new TextView(getActivity(), null, 0);
 }
 @Override
 public void onViewCreated(View view, Bundle savedInstanceState) {
  super.onViewCreated(view, savedInstanceState);
  view.setBackgroundColor(color);
 }
}

源码下载地址