自定义ViewPager Indicator

先上效果图：

上面的指示器ViewPager Indicator是继承自LinearLayout，随着手指的滑动不断的向前滚动，指示器滚动到对应的标签并且文字出现高亮，指示器上的小三角型，也随之滚动。
下面是布局代码`

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:hyman="http://schemas.android.com/apk/res/com.example.administrator.myviewpageindicator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <com.example.administrator.view.ViewPageIndicator
        hyman:visable_tab_count="4"
        android:id="@+id/id_indlicator"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/head"
        android:orientation="horizontal">
    </com.example.administrator.view.ViewPageIndicator>
    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        >
    </android.support.v4.view.ViewPager>
</LinearLayout>

注意一下：hyman:visable_tab_count=”4”这是一个自定义的属性不会的童鞋可以网上查一哈如何自定义，在这里就暂时不做说明了。

整个布局上面自定义的ViewPageIndicator，下面是ViewPage，里面填充的Fragment。
先来看一下ViewPageIndicator的实现，

package com.example.administrator.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.administrator.myviewpageindicator.R;

import org.w3c.dom.ls.LSInput;

import java.net.Proxy;
import java.util.List;

/**
 * Created by Administrator on 2016/3/20.
 */
public class ViewPageIndicator extends LinearLayout {

    private Paint mPaint;
    private Path mPath;
    //小三角的宽度
    private int mTriangleWith;
    //小三角的高度
    private int mTriangleHeigh;
    private int mInitTranslationX;
    private int mTranslationX = 0;
    //可视标签
    private int mTabVisableCount;
    private List<String> mTitles;
    private static final int COUNT_DEFAULT = 4;
    private static final int COLOR_TEXT_NORMAL = 0x77FFFFFF;
    private static final int COLOR_TEXT_HIGHLIGHT = 0xFFFFFFFF;
    private static final float RADIO_TRIANGLE_WIDTH = 1 / 6F;
    /**
     * s三角形的最大宽度
     */
    private final int DEMENSION_TRIAGE_WIDTH_MAX = (int) (getScreenwith() / 3 * RADIO_TRIANGLE_WIDTH);

    public ViewPageIndicator(Context context) {
        this(context, null);

    }

    public ViewPageIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        //获取tab的数量
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ViewPageIndicator);
        mTabVisableCount = a.getColor(R.styleable.ViewPageIndicator_visable_tab_count, COUNT_DEFAULT);

        if (mTabVisableCount < 0) {
            mTabVisableCount = COUNT_DEFAULT;
        }
        a.recycle();
        //初始化画笔
        mPaint = new Paint();
        // mPaint.setStrokeWidth(5);
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.parseColor("#eeffffff"));
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setPathEffect(new CornerPathEffect(3));
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        canvas.save();
        canvas.translate(mInitTranslationX + mTranslationX, getHeight());
        canvas.drawPath(mPath, mPaint);
        canvas.restore();
        super.dispatchDraw(canvas);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mTriangleWith = (int) (w / mTabVisableCount * RADIO_TRIANGLE_WIDTH);
//动态的根据标签个数去计小三角形的宽度。设置最大值与最小值
// ，防止在一个标签或者多个标签出现过大或者过小的时间发生。
        mTriangleWith = Math.min(mTriangleWith, DEMENSION_TRIAGE_WIDTH_MAX);
        mInitTranslationX = w / mTabVisableCount / 2 - mTriangleWith / 2;
        initTriangle();
    }

    /**
     * 初始化三角形
     */
    private void initTriangle() {
        mTriangleHeigh = mTriangleWith / 2;
        mPath = new Path();
        mPath.moveTo(0, 0);
        mPath.lineTo(mTriangleWith, 0);
        mPath.lineTo(mTriangleWith / 2, -mTriangleHeigh);
        mPath.close();
    }

    /**
     * 指示器跟随手指移动
     *
     * @param position
     * @param offset
     */
    public void scroll(int position, float offset) {
        int tabWith = getWidth() / mTabVisableCount;
        mTranslationX = (int) (tabWith * (offset + position));

        //容器移动，当tab处于移动至最后一个时
//        if (position >= (mTabVisableCount - 2) && offset > 0 && getChildCount() > mTabVisableCount) {
//            if (mTabVisableCount != 1) {
//                this.scrollTo(((position - (mTabVisableCount - 2)) * tabWith) + (int) (tabWith * offset), 0);
//            } else {
//                this.scrollTo((int) (tabWith * (position + offset)), 0);
//            }
//
//        }
        if (position >= mTabVisableCount - 2 && offset > 0 && getChildCount() > mTabVisableCount) {
//容器移动的距离
            if (mTabVisableCount == 1 && position < getChildCount() - 1) {//只有一个可见的tab
                this.scrollTo((int) (position * tabWith + tabWith * offset), 0);
            } else if (mTabVisableCount == 2 && position < getChildCount() - 2) {//只有两个可见tab
                this.scrollTo((int) (position * tabWith + tabWith * offset), 0);
            } else if (position < getChildCount() - 2) {
                this.scrollTo((int) ((position - (mTabVisableCount - 2)) * tabWith + tabWith * offset), 0);
            }
        }
        invalidate();
    }
//在XML文件加载完执行的该事件
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        int cCount = getChildCount();
        if (cCount == 0) return;

        for (int i = 0; i < cCount; i++) {
            View view = getChildAt(i);
            LinearLayout.LayoutParams lp = (LayoutParams) view.getLayoutParams();
            lp.weight = 0;
            lp.width = getScreenwith() / mTabVisableCount;
            view.setLayoutParams(lp);
        }
        setItemClickEvent();
    }

    /**
     * 获得屏幕的宽度
     *
     * @return
     */
    private int getScreenwith() {
        WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.widthPixels;
    }


    /**
     * 动态设置tab
     */
    public void setTabItemTittles(List<String> titles) {
        if (titles != null && titles.size() > 0) {
            mTitles = titles;
        }
        for (String title : mTitles) {
            addView(generateTextView(title));
        }
        setItemClickEvent();
    }


    /**
     * 设置可见的tab数量，需要在
     *
     * @param count
     */
    public void setmTabVisableCount(int count) {

        mTabVisableCount = count;
    }

    /**
     * 根据title创建tab
     *
     * @param title
     * @return
     */
    private View generateTextView(String title) {

        TextView mTextView = new TextView(getContext());
        LinearLayout.LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        lp.width = getScreenwith() / mTabVisableCount;
        mTextView.setText(title);
        mTextView.setGravity(Gravity.CENTER);
        mTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
        mTextView.setTextColor(COLOR_TEXT_NORMAL);
        mTextView.setLayoutParams(lp);
        return mTextView;
    }

    private ViewPager mViewPager;

    public interface PageOnchangeLinstener {
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

        public void onPageSelected(int position);

        public void onPageScrollStateChanged(int state);
    }

    public PageOnchangeLinstener mLinstener;

    public void AddOnPageChangeLinstener(PageOnchangeLinstener linstene) {

        this.mLinstener = linstene;
    }

    /***
     * 设置划过的的ViewPage
     *
     * @param viewPage
     * @param pos
     */
    public void setViewPage(ViewPager viewPage, int pos) {
        mViewPager = viewPage;
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                scroll(position, positionOffset);
                if (mLinstener != null) {
                    mLinstener.onPageScrolled(position, positionOffset, positionOffsetPixels);
                }
            }

            @Override
            public void onPageSelected(int position) {

                if (mLinstener != null) {
                    mLinstener.onPageSelected(position);
                }
                higtLight(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                if (mLinstener != null) {
                    mLinstener.onPageScrollStateChanged(state);
                }
            }
        });

        mViewPager.setCurrentItem(pos);
        higtLight(pos);
    }

    /**
     * 设置tab的Title高亮
     *
     * @param pos
     */
    private void higtLight(int pos) {
        resetTextColor();
        View view = getChildAt(pos);
        if (view instanceof TextView) {
            ((TextView) view).setTextColor(COLOR_TEXT_HIGHLIGHT);
        }
    }

    /**
     * 重置文本颜色
     */
    private void resetTextColor() {
        for (int i = 0; i < getChildCount(); i++) {
            View view = getChildAt(i);
            if (view instanceof TextView) {
                ((TextView) view).setTextColor(COLOR_TEXT_NORMAL);
            }
        }
    }

    /**
     * 设置tab的点击事件
     */
    private void setItemClickEvent() {

        int cCount = getChildCount();
        for (int i = 0; i < cCount; i++) {
            final int j = i;
            View view = getChildAt(i);
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    mViewPager.setCurrentItem(j);
                }
            });
        }
    }
}

里面的这些接口是

 public interface PageOnchangeLinstener {
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

        public void onPageSelected(int position);

        public void onPageScrollStateChanged(int state);
    }

是ViewPage的一些接口只是我们把它放出来，为以后的使用做准备。
@Override protected void onFinishInflate()这个方法是在XML文件被加载完成后执行的。在里面处理了指示器的点击事件，和获取可见指示的个数并计算每个指示标签的宽度。
Fragment的代码很简单在里面获取了上面指示标签上的文字。
“`
package com.example.administrator.myviewpageindicator;

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;

/**
* Created by Administrator on 2016/3/24.
*/
public class VpSimplaeFragment extends Fragment {
private String mTitle;
public 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 mTextView=new TextView(getActivity());
    mTextView.setText(mTitle);
    mTextView.setGravity(Gravity.CENTER);
    return mTextView;
}

public static VpSimplaeFragment newInstance(String  title) {
    Bundle args = new Bundle();
    args.putString(BUNDLE_TITLE,title);
    VpSimplaeFragment fragment = new VpSimplaeFragment();
    fragment.setArguments(args);
    return fragment;
}

}

MainAcivity中的代码也很简单
``
package com.example.administrator.myviewpageindicator;
import android.app.Activity;
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.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import com.example.administrator.view.ViewPageIndicator;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public class MainActivity extends FragmentActivity {
    private ViewPager mViewPager;
    private ViewPageIndicator mPageIndicator;
    private List<String> mTitles = Arrays.asList("短信1", "收藏2", "推荐3", "短信4", "收藏5", "推荐6", "短信7", "收藏8", "推荐8");
    private List<VpSimplaeFragment> mContents = new ArrayList<VpSimplaeFragment>();
    private FragmentPagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //设置无标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main2);

        initViews();
        initData();
        //设置屏幕上可见的指示标签
        mPageIndicator.setmTabVisableCount(3);
        mPageIndicator.setTabItemTittles(mTitles);

        mViewPager.setAdapter(mAdapter);
        mPageIndicator.setViewPage(mViewPager, 0);
    }

    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        mPageIndicator = (ViewPageIndicator) findViewById(R.id.id_indlicator);
    }

    private void initData() {
        for (String title : mTitles) {
            VpSimplaeFragment vpSimplaeFragment = VpSimplaeFragment.newInstance(title);
            mContents.add(vpSimplaeFragment);

        }
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mContents.get(position);
            }
            @Override
            public int getCount() {
                return mContents.size();
            }
        };
    }
}

因为里面的内容很简单，只用了一个Fragment呈现，里面的文字信息根据滑动获取到。
下载地址杵这儿