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);
        }
    }

}