自定义随动indicator附带title颜色渐变

1. 前言

在观看了#慕课网#hyman讲师所制作的视频《Android-自定义ViewPager指示器》之后，公司刚好遇到了类似的需求，于是自己按照hyman所讲根据自己的需求写了这个指示器，优化了一些代码和加入了简单的动画和title的点击联动部分，希望这个demo能帮到有类似需求的朋友。如果对此控件思路不太熟的朋友，可以看下这个视频讲解，本文是在此视频上做扩展说明。

《Android-自定义ViewPager指示器》链接地址：http://www.imooc.com/learn/615

2. 自定义随动指示器

先上效果图：

1. 基本思路：

一般我们在做类似的指示器的时候，都会先做指示器，也就是title部分然后再做viewpager部分，通过viewpager联动title实现对应的变化。当然本文的思路也基本类似，通过将title部分进行封装，并将viewpager的OnPageChangeListener中的三个方法中的对应参数传入指示器内，让指示器内部进行相应的显示处理。代码如下：

package com.example.titleindicator;

import java.util.ArrayList;
import com.example.titleindicator.CustomizeIndicator.OnTitleClickListener;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;

public class MainActivity extends Activity implements OnPageChangeListener, OnTitleClickListener {
   

    private CustomizeIndicator indicator;
    private ViewPager viewpager;
    private MyViewPagerAdapter adapter;

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

        initalWeight();
        initialIndicator();
    }

    private void initialIndicator() {
        //第一步:找到该控件
        indicator = (CustomizeIndicator) findViewById(R.id.myCustomizeIndicator);
        //第二步：设置title的显示文字
        ArrayList<String> titleName = new ArrayList<String>();
        titleName.add("TitleOne");
        titleName.add("TitleTwo");
        titleName.add("TitleThree");
        titleName.add("TitleFour");
        titleName.add("TitleFive");
        titleName.add("TitleSix");
        indicator.setTitle(titleName);
        //第三步：设置indicator的点击事件
        indicator.setOnTitleClickListener(this);
    }

    private void initalWeight() {
        viewpager = (ViewPager) findViewById(R.id.myViewPager);
        LayoutInflater inflater = getLayoutInflater();
        View view1 = inflater.inflate(R.layout.views, null);
        view1.setBackgroundColor(
        getResources().getColor(R.color.red_color));
        View view2 = inflater.inflate(R.layout.views, null);
        getResources().getColor(R.color.green_color));
        View view3 = inflater.inflate(R.layout.views, null);
        view3.setBackgroundColor(
        getResources().getColor(R.color.blue_color));
        View view4 = inflater.inflate(R.layout.views, null);
        getResources().getColor(R.color.purple_color));
        View view5 = inflater.inflate(R.layout.views, null);
        view5.setBackgroundColor(
        getResources().getColor(R.color.orange_color));
        View view6 = inflater.inflate(R.layout.views, null);
        view6.setBackgroundColor(
        getResources().getColor(R.color.black_color));
        ArrayList<View> viewList = new ArrayList<View>();
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);
        viewList.add(view4);
        viewList.add(view5);
        viewList.add(view6);
        adapter = new MyViewPagerAdapter(viewList);
        viewpager.setAdapter(adapter);
        viewpager.setOnPageChangeListener(this);
    }
    //第四步：在viewpager的OnpageChangeListener的三个方法中
    //分别添加indicator的对应的三个方法
    @Override
    public void onPageScrollStateChanged(int state) {

        indicator.setOnPageScrollStateChanged(state);

    }

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

        indicator.setOnPageScrolled(position, positionOffset);

    }

    @Override
    public void onPageSelected(int position) {

        indicator.setOnPageSelected(position);

    }

    @Override
    public void TitleClick(View v, int position) {
        //View v是对应的那个title，position是title所在的位置，跟传入位置一致
        viewpager.setCurrentItem(position);
    }

从上面代码中我们可以知道，title部分是按照你传入的titleName个数来自动生成的，所以对应Tab的位置也是按照传入的titleName顺序而定。指示器中点击的每个Tab，也会通过方法TitleClick回调出来，参数View v和int position就是你所点击的那个Tab和它所在的位置。

以上就是通常我们所用到的需求，当然如果还需要在指示器中做一些其他的需求，可以在后续进行修改。

接下来就是两个关键的部分！

2.字体颜色的渐变思路

在效果图中，字体的颜色改变是通过手指滑动的时候进行渐变。当选中的位置时titleOne，然后准备滑动到titleTwo的过程中，titleOne的颜色由白色逐渐加深至黑色，titleTwo的颜色相反变化，很明显，在这动态变换的过程中，肯定有一个动态值来控制颜色的逐渐改变，这个动态值就是在ViewPager的onPageScrolled中的positionOffset这个值