ViewPager 滑动条 动画

百度上关于ViewPager 滑动条 的文章 有一大堆，但总有点不详细。直接把代码复制 还是有细微的问题导致效果不理想。。。
效果图：

淡蓝色横线 滑动动画
思路：1、滑动之前 需要对 Imager进行缩放处理(细微的问题 就是出现在这)。
2、使用 animation 达到 imager 滑动效果

先看 ViewPager所在的 main.xml 文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <include layout="@layout/top_title"/>  // title

    <ImageView    // 滑动条 
        android:id="@+id/line"
        android:layout_width="fill_parent"
        android:scaleType="matrix"
        android:layout_height="5dp" />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

top_title.xml 文件其实就是 一个横向排列的LinearLayout ，linearLayout中有四个 TextView。每个TextView 的width 为 屏幕的四分之一。

MainActivity.class :

package com.yezq.myapplication;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
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 Activity implements ViewPager.OnPageChangeListener{

    TextView tv1,tv2,tv3,tv4; //title 中的四个textView
    ViewPager vp;
    ImageView line; // 滑动条
    Animation animation; 
    int currentItem ;//ViewPager 当前显示页面的position
    int offset; // imager的滑动偏移量
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    // 下面三行 根据 屏幕width 计算出滑动偏移量
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        offset = dm.widthPixels / 4;

        initLine();
        initTopTitle();
        initViewPager();
    }

    /**
    * 初始化 ViewPager
    */
    private void initViewPager() {
        vp = (ViewPager) findViewById(R.id.viewpager);

        //设置ViewPager 的item，
        //R.layout.xxx 是 一个Root为 LinearLayout 的xml布局文件，只设置了颜色用于区分 
        List<View> list = new ArrayList<View>();
        LayoutInflater lif = getLayoutInflater();
        list.add(lif.inflate(R.layout.one, null));
        list.add(lif.inflate(R.layout.two, null));
        list.add(lif.inflate(R.layout.three, null));
        list.add(lif.inflate(R.layout.four,null));
        vp.setAdapter(new VPAdapter(list,this)); 

        vp.setCurrentItem(0);//设置ViewPager 默认显示Item
        currentItem = 0;//当前显示界面的 position
        vp.setOnPageChangeListener(this);//设置 滑动事件监听

    }

    private void initLine() {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.line);
        //把bitmap进行缩放(放大)处理 ，得到合适宽度的图片
        // createScaledBitmap(Bitmap , int ,int,boolean);
        // 两个int参数是设置 图片缩放(或放大)后的  width,height .
        //boolean 参数为true可以进行滤波处理，有助于改善新图像质量;flase时，计算机不做过滤处理。
        bitmap = Bitmap.createScaledBitmap(bitmap, offset, bitmap.getHeight(),true);
        line = (ImageView) findViewById(R.id.line);
        line.setImageBitmap(bitmap);
    }

/**
* 滑动条 滑动方法。
* position 是 滑动后 显示界面的position
*/
    public void lineSlide(int position){
    //TranslateAnimation（滑动前X位置,滑动后X位置,滑动前Y位置,滑动后Y位置）
        animation = new TranslateAnimation(currentItem * offset,position * offset,0,0);
        currentItem = position;
        animation.setFillAfter(true);//设置动画停止在 动画结束的位置
        animation.setDuration(1000);
        line.setAnimation(animation);//给滑动条设置动画
    }

    /**
    *  初始化title 中textView，
    */
    public void initTopTitle(){
        tv1 = (TextView) findViewById(R.id.tv1);
        tv2 = (TextView) findViewById(R.id.tv2);
        tv3 = (TextView) findViewById(R.id.tv3);
        tv4 = (TextView) findViewById(R.id.tv4);
    }


    @Override
    public void onPageSelected(int position) {
        lineSlide(position);//滑动结束后调用 lineSlide()
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageScrollStateChanged(int i) {

    }
}

VPAdapter.class:

package com.yezq.myapplication;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;


public class VPAdapter extends PagerAdapter {

    List<View> list;
    Context context;
    public VPAdapter(List<View> list , Context context){
        this.list = list;
        this.context = context;
    }
    /**
    *  ViewPager 中item的个数
    */
    @Override
    public int getCount() {
        return list.size();
    }
   /**
    *  判断当前显示item 是否是 instantiateItem()返回的item
    */
    @Override
    public boolean isViewFromObject(View view, Object o) {
        return view == o;
    }

    /**
    *  销毁 滑动前显示的View
    */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(list.get(position));
    }

    /**
    *  初始化当前(滑动后)显示的View，并返回
    */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(list.get(position));
        return list.get(position);
    }
}

以上代码 只能让 滑动条在ViewPager滑动结束后 进行滑动。 滑动条跟随 ViewPager 一起滑动的效果 不知道咋搞。。。