ViewPager+Fragment再探：和TAB滑动条一起三者结合

Fragment前篇：

《Android Fragment初探：静态Fragment组成Activity》

ViewPager前篇：

《Android ViewPager初探：让页面滑动起来》

《Android ViewPager再探：增加滑动指示条》

这篇算是对之前学习写下的3篇博客知识总结吧~

程序的总体结构如下：

（其中listview.xml为测试项，可忽略）

其中，layout1对应Fragment1，以此类推；layout1中有listview，layout2和layout3只有根布局LinearLayout，区别是背景颜色。

layout1.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:background="#ffffff"
               android:orientation="vertical" >

     <ListView
         android:id="@+id/lv"
         android:layout_width="match_parent"
         android:layout_height="match_parent"/>
 </LinearLayout>

activity_main.xml和《Android 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"
                 tools:context=".MainActivity">

     <LinearLayout
         android:id="@+id/ll_tab"
         android:layout_width="match_parent"
         android:layout_height="45dp"
         android:background="#FFFFFF" >

         <TextView
             android:id="@+id/tv_first"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:gravity="center"
             android:text="First"
             android:textSize="20sp" />

         <TextView
             android:id="@+id/tv_second"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:gravity="center"
             android:text="Second"
             android:textSize="20sp" />

         <TextView
             android:id="@+id/tv_third"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:gravity="center"
             android:text="Third"
             android:textSize="20sp" />
     </LinearLayout>

     <ImageView
         android:id="@+id/cursor"
         android:layout_below="@id/ll_tab"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:scaleType="matrix"
         android:src="@mipmap/slidebar"
         android:contentDescription="slidebar"/>

     <android.support.v4.view.ViewPager
         android:id="@+id/viewpager"
         android:layout_below="@id/cursor"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:flipInterval="30"
         android:persistentDrawingCache="animation" />

 </RelativeLayout>

再来看布局的实现部分：

因为layout2和layout3里没什么东西，所以以Fragment1为例：

 package com.example.fragmentviewpager.fragmentviewpager;

 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.ArrayAdapter;
 import android.widget.ListView;

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

 /**
  * Created by LT on 2015/7/29.
  */
 public class Fragment1 extends Fragment {

     private ListView listView;

     public View onCreateView(LayoutInflater inflater, ViewGroup container,
                              Bundle savedInstanceState) {
         // TODO Auto-generated method stub
         View view= inflater.inflate(R.layout.layout1, container, false);
         listView = (ListView)view.findViewById(R.id.lv);
         ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(getActivity(),
                 android.R.layout.simple_list_item_1,getData());
         listView.setAdapter(arrayAdapter);

         return view;
     }

     private List<String> getData(){
         List<String> data = new ArrayList<String>();
         for(int i = 0;i <20;i++) {
             data.add(i+"");
         }
         return data;
     }
 }

此处给layout1里的listview添加了20项，名字分别是1——20，用的适配器是ArrayAdapter。

考虑到有三个fragment存在（Fragment1，Fragment2，Fragment3），为了方便viewpager管理，我们自定义一个适配器，继承自FragmentPagerAdapter：

FPAdapter.java:

 package com.example.fragmentviewpager.fragmentviewpager;

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

 import java.util.List;

 /**
  * Created by LT on 2015/7/29.
  */
 public class FPAdapter extends FragmentPagerAdapter {
     private List<Fragment> pFragment;

     public FPAdapter(FragmentManager fragmentManager,List<Fragment> fragments){
         super(fragmentManager);
         this.pFragment = fragments;
     }

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

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

FragmentPagerAdapter只需要重写

public Fragment getItem(int arg0)

public int getCount()

这两个函数即可。

与之对应的适配器初始化和设定代码如下：

 //构造适配器
         fragments=new ArrayList<Fragment>();
         fragments.add(new Fragment1());
         fragments.add(new Fragment2());
         fragments.add(new Fragment3());
         FPAdapter adapter = new FPAdapter(getSupportFragmentManager(), fragments);

 //设定适配器
         vp = (ViewPager)findViewById(R.id.viewpager);
         vp.setAdapter(adapter);

和上一篇《Android ViewPager再探：增加滑动指示条》的代码相结合，最终的MainActivity如下：

 package com.example.fragmentviewpager.fragmentviewpager;

 import android.graphics.BitmapFactory;
 import android.graphics.Matrix;
 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentActivity;
 import android.support.v4.view.ViewPager;
 import android.util.DisplayMetrics;
 import android.view.View;
 import android.view.animation.Animation;
 import android.view.animation.TranslateAnimation;
 import android.widget.ImageView;
 import android.widget.TextView;

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

 public class MainActivity extends FragmentActivity {
     private TextView first,second,third;

     /*滑动条相关定义*/
     private ImageView cursor;
     private int bmp_width = 0;//游标宽度
     private int offset = 0;//游标图片偏移量
     private int number = 0;//当前页面编号
     private ViewPager vp;
     private List<Fragment> fragments;

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

         //TAB初始化
         first = (TextView)findViewById(R.id.tv_first);
         second = (TextView)findViewById(R.id.tv_second);
         third = (TextView)findViewById(R.id.tv_third);

         //构造适配器
         fragments=new ArrayList<Fragment>();
         fragments.add(new Fragment1());
         fragments.add(new Fragment2());
         fragments.add(new Fragment3());
         FPAdapter adapter = new FPAdapter(getSupportFragmentManager(), fragments);

         //初始化指示器位置
         initCursorPos();

         //设定适配器
         vp = (ViewPager)findViewById(R.id.viewpager);
         vp.setAdapter(adapter);

         vp.setCurrentItem(0);//设置当前页
         vp.setOnPageChangeListener(new NewPageChangeListener());//监听页面改变

         /*Tab页面监听*/
         first.setOnClickListener(new TabOnClickListener(0));
         second.setOnClickListener(new TabOnClickListener(1));
         third.setOnClickListener(new TabOnClickListener(2));
     }

     //初始化指示器位置
     public void initCursorPos() {
         // 初始化动画
         cursor = (ImageView) findViewById(R.id.cursor);
         bmp_width = BitmapFactory.decodeResource(getResources(), R.mipmap.slidebar)
                 .getWidth();// 获取图片宽度

         DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象
         getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中
         int s_width = dm.widthPixels;// 获取分辨率宽度

         offset = (s_width / fragments.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间)

         Matrix matrix = new Matrix();
         matrix.postTranslate(offset, 0);
         cursor.setImageMatrix(matrix);// 设置动画初始位置
     }

     //页面改变监听器
     public class NewPageChangeListener implements ViewPager.OnPageChangeListener {

         int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量
         int two = one * 2;// 页卡1 -> 页卡3 偏移量

         @Override
         public void onPageSelected(int arg0) {
             Animation animation = null;
             switch (arg0) {
                 case 0:
                     if (number == 1) {
                         animation = new TranslateAnimation(one, 0, 0, 0);
                     } else if (number == 2) {
                         animation = new TranslateAnimation(two, 0, 0, 0);
                     }
                     break;
                 case 1:
                     if (number == 0) {
                         animation = new TranslateAnimation(offset, one, 0, 0);
                     } else if (number == 2) {
                         animation = new TranslateAnimation(two, one, 0, 0);
                     }
                     break;
                 case 2:
                     if (number == 0) {
                         animation = new TranslateAnimation(offset, two, 0, 0);
                     } else if (number == 1) {
                         animation = new TranslateAnimation(one, two, 0, 0);
                     }
                     break;
             }
             number = arg0;
             animation.setFillAfter(true);// True:图片停在动画结束位置
             animation.setDuration(300);
             cursor.startAnimation(animation);
         }

         @Override
         public void onPageScrolled(int arg0, float arg1, int arg2) {
         }

         @Override
         public void onPageScrollStateChanged(int arg0) {
         }
     }

     /*Tab页面点击监听*/
     public class TabOnClickListener implements View.OnClickListener{
         private int num = 0;

         public TabOnClickListener(int index){
             num = index;
         }

         @Override
         public void onClick(View v){
             vp.setCurrentItem(num);
         }
     }

 }