自定义简单的ViewPagerIndicator控件

先上图

布局文件

<?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:orientation="vertical">

    <com.dfhe.viewpagerindicatordemo.VpSimpleIndicator
        android:id="@+id/id_indicator"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:orientation="horizontal"
        android:background="#AA000000">


        <TextView
            android:id="@+id/id_tv1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="首页"
            android:textSize="16sp"
            android:gravity="center"
            android:textColor="#CCFFFFFF"/>
        <TextView
            android:id="@+id/id_tv2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="新闻"
            android:textSize="16sp"
            android:gravity="center"
            android:textColor="#CCFFFFFF"/>
        <TextView
            android:id="@+id/id_tv3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="我的"
            android:textSize="16sp"
            android:gravity="center"
            android:textColor="#CCFFFFFF"/>

    </com.dfhe.viewpagerindicatordemo.VpSimpleIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

主页面MainActivity

package com.dfhe.viewpagerindicatordemo;

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.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.Window;
import android.widget.TextView;

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

public class MainActivity extends FragmentActivity implements View.OnClickListener {


    private List<String> mTitles = Arrays.asList("首页", "新闻", "我的");
    private VpSimpleIndicator mIndicater;
    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    //定义viewPager的内容
    private List<VpSimpleFragment> mContents = new ArrayList<>();
    private TextView tv1;
    private TextView tv2;
    private TextView tv3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initViews();
        initDatas();

        mViewPager.setAdapter(mAdapter);

        //VipewPager选中的监听
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //在viewPager改变的时候调用
                mIndicater.scroll(position,positionOffset);
            }

            @Override
            public void onPageSelected(int position) {
                //当ViewPager的当前选项被选中的时候，改变标题的颜色
                if (position == 0) {
                    setTextColor(tv1, tv2, tv3, Color.BLUE, Color.WHITE);
                } else if (position == 1) {
                    setTextColor(tv2, tv1, tv3, Color.BLUE, Color.WHITE);
                } else {
                    setTextColor(tv3, tv2, tv1, Color.BLUE, Color.WHITE);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initDatas() {
        for (String title : mTitles) {
            VpSimpleFragment fragment = VpSimpleFragment.newInstance(title);

            mContents.add(fragment);
        }
    }

    private void initViews() {
        tv1 = (TextView) findViewById(R.id.id_tv1);
        tv1.setTextColor(Color.BLUE);
        tv2 = (TextView) findViewById(R.id.id_tv2);
        tv3 = (TextView) findViewById(R.id.id_tv3);
        tv1.setOnClickListener(this);
        tv2.setOnClickListener(this);
        tv3.setOnClickListener(this);
        mIndicater = (VpSimpleIndicator) findViewById(R.id.id_indicator);
        mViewPager = (ViewPager) findViewById(R.id.id_viewPager);
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mContents.get(position);
            }

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

            }
        };
    }

    /**
     * 改变当前ViewPager选中的颜色
     * @param tv1
     * @param tv2
     * @param tv3
     * @param color
     * @param color2
     */
    private void setTextColor(TextView tv1, TextView tv2, TextView tv3, int color, int color2) {
        tv1.setTextColor(color);
        tv2.setTextColor(color2);
        tv3.setTextColor(color2);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.id_tv1:
                mViewPager.setCurrentItem(0);
                break;
            case R.id.id_tv2:
                mViewPager.setCurrentItem(1);
                break;
            case R.id.id_tv3:
                mViewPager.setCurrentItem(2);
                break;
        }
    }
}

自定义Indicator

package com.dfhe.viewpagerindicatordemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.widget.LinearLayout;

/**
* 项目名称：ViewPagerIndicatorDemo
* 类描述：
* 创建人：Gimi
* 创建时间：2016/3/20 10:46
* 修改人：Gimi
* 修改时间：2016/3/20 10:46
* 修改备注：
*
* @param
*/
public class VpSimpleIndicator extends LinearLayout {

private Paint mPaint;//定义画笔
private Path mPath;//画线
private int mTriangleWidth;//小三角形的宽度
private int mTriangleHeight;//小三角形的高度
private int mInitTranslationX;//初始化偏移位置
private int mTranslationX;//根据我们手指移动的变量
private static final float RADIO_TRANGLE_WIDTH = 1/6F;//三角形占用tab的六分之一


public VpSimpleIndicator(Context context) {
    this(context, null);
}

public VpSimpleIndicator(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public VpSimpleIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mPaint = new Paint();
    mPaint.setAntiAlias(true);//设置抗锯齿
    mPaint.setColor(Color.parseColor("#FFFFFF"));
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setPathEffect(new CornerPathEffect(3));//让三角形有弧度，不至于太尖锐
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mTriangleWidth = (int) (w/3 * RADIO_TRANGLE_WIDTH);
    //三角形初始时的偏移量
    mInitTranslationX = w /3/2 -mTriangleWidth/2;

    initTangle();
}

/**
 * 初始化三角形
 */
private void initTangle() {
    mTriangleHeight = mTriangleWidth/2;
    mPath = new Path();
    mPath.moveTo(0, 0);
    mPath.lineTo(mTriangleWidth, 0);
    mPath.lineTo(mTriangleWidth / 2, -mTriangleHeight);//这里三角形应该是向上的，所以是负值
    mPath.close();
}


/**
 * 这个方法是onDraw方法之后进行调用，也就是分发给子组件进行绘制
 * @param canvas
 */
@Override
protected void dispatchDraw(Canvas canvas) {
    canvas.save();
    canvas.translate(mInitTranslationX + mTranslationX, getHeight() + 2);//这里加2是为了让三角形离字稍微远点
    canvas.drawPath(mPath, mPaint);
    canvas.restore();
    super.dispatchDraw(canvas);
}

/**
 * 当手指进行滑动的时候，三角形也跟着滑动
 * @param position
 * @param positionOffset
 */
public void scroll(int position, float positionOffset) {
    //获取控件的宽度
    int tabWidth = getWidth()/3;
    //设置移动的距离
    mTranslationX = (int) (tabWidth * (position + positionOffset));
    //刷新view，重新绘制
    invalidate();
}

}

Fragment

package com.dfhe.viewpagerindicatordemo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
* 项目名称：ViewPagerIndicatorDemo
* 类描述：
* 创建人：Gimi
* 创建时间：2016/3/20 10:58
* 修改人：Gimi
* 修改时间：2016/3/20 10:58
* 修改备注：
*
* @param
*/
public class VpSimpleFragment extends Fragment {
private String mTitle;
private static final String BUNDLE_TITLE = “title”;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    Bundle bundle = getArguments();
    if(bundle != null){
        mTitle = bundle.getString(BUNDLE_TITLE);
    }

    TextView tv = new TextView(getActivity());
    tv.setText(mTitle);
    tv.setGravity(Gravity.CENTER);
    tv.setTextColor(Color.BLACK);
    return tv;
}


/**
 * 创建一个newInstance方法，对外提供参数设置
 */

public static VpSimpleFragment newInstance(String title){

    Bundle bundle = new Bundle();
    bundle.putString(BUNDLE_TITLE, title);
    VpSimpleFragment fragment = new VpSimpleFragment();
    fragment.setArguments(bundle);
    return fragment;
}

}

Demo地址下载:下载Demo