ViewPager箭头指示器实现（慕课网总结）

      最近，在看慕课网上的android课程，想学习其它达人的技巧与编程方法。ViewPager箭头指示器的效果如下：

咱们主要看代码，共分三步，步骤如下：

第一步：编写ViewPagerIndicator类，代码如下：

public class ViewPagerIndicator extends LinearLayout
{
    public static final int DEFAULT_VISIBLE_TABS=4;
    private Paint paint;
    private Path path;
    private int mTriangleWidth;
    private int mTriangleHeight;
    private static final float RADIO_TRIANGEL_WIDTH=1/6f;
    private int mInitTranslationX;
    private int mTranslationX=0;

    private int visibleTabs=DEFAULT_VISIBLE_TABS;

    /**
     * 防止用户覆盖ViewPagerIndicator中的ViewPager.OnPageChangeListener，所以在这里设置一个回调接口。
     */
    private ViewPagerListener viewPagerListener;
    public interface ViewPagerListener
    {
        void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
        void onPageSelected(int position);
        void onPageScrollStateChanged(int state);
    }

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

    public ViewPagerIndicator(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        //初始化画笔
        paint=new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.parseColor("#ffffff"));
        paint.setStyle(Paint.Style.FILL);
        paint.setPathEffect(new CornerPathEffect(3));
    }

    /**
     * 设置显示的tab个数
     * @param count
     */
    public void setVisibleTabs(int count)
    {
        if(count<=0)
        {
            visibleTabs=ViewPagerIndicator.DEFAULT_VISIBLE_TABS;
        }else{
            this.visibleTabs=count;
        }
    }

    /**
     * 动态添加tab
     * @param titles
     */
    public void addTabs(List<String> titles)
    {
        for(String title:titles)
        {
            TextView tv=new TextView(getContext());
            int tabWidth=getScreenWith()/visibleTabs;
            LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(tabWidth, ViewGroup.LayoutParams.MATCH_PARENT);
            tv.setLayoutParams(lp);
            tv.setTextColor(Color.parseColor("#ffffffff"));
            tv.setTextSize(TypedValue.COMPLEX_UNIT_SP,15);
            tv.setText(title);
            tv.setGravity(Gravity.CENTER);
            addView(tv);
        }
    }

    /**
     * 设置三角形的初始位置和宽高
     * @param w
     * @param h
     * @param oldw
     * @param oldh
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh)
    {
        super.onSizeChanged(w, h, oldw, oldh);
        mTriangleWidth=(int)(w/visibleTabs*RADIO_TRIANGEL_WIDTH);
        mTriangleHeight=mTriangleWidth/2;
        mInitTranslationX=w/visibleTabs/2-mTriangleWidth/2;

        initTriangle();
    }

    /**
     * 绘制三角形
     */
    private void initTriangle()
    {
        path=new Path();
        path.moveTo(0,0);
        path.lineTo(mTriangleWidth,0);
        path.lineTo(mTriangleWidth/2,-mTriangleHeight);
        path.close();
    }

    /**
     * 更新三角形的位置
     * @param canvas
     */
    @Override
    protected void dispatchDraw(Canvas canvas)
    {
        canvas.save();
        canvas.translate(mInitTranslationX+mTranslationX,getHeight());
        canvas.drawPath(path,paint);
        canvas.restore();
        super.dispatchDraw(canvas);
    }

    /**
     * 设置tab滑动到未显示的区域
     * @param position
     * @param offset
     */
    public void scrollTo(int position,float offset)
    {
        int tabWidth=getScreenWith()/visibleTabs;
        mTranslationX=(int)(tabWidth*(offset+position));

        if((position+2)>=visibleTabs&&offset>0&&visibleTabs<getChildCount())
        {
            if(visibleTabs!=1)
            {
                this.scrollTo((int)(tabWidth*(offset+position+2-visibleTabs)),0);
            }else{
                this.scrollTo(mTranslationX,0);
            }
        }
        invalidate();
    }

    /**
     * 设置ViewPager
     * @param viewPager
     */
    public void setViewPager(ViewPager viewPager)
    {
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
            {
                scrollTo(position,positionOffset);
                if(viewPagerListener!=null)
                {
                    viewPagerListener.onPageScrolled(position,positionOffset,positionOffsetPixels);
                }
            }

            @Override
            public void onPageSelected(int position) {
                if(viewPagerListener!=null)
                {
                    viewPagerListener.onPageSelected(position);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                if(viewPagerListener!=null)
                {
                    viewPagerListener.onPageScrollStateChanged(state);
                }
            }
        });
    }
    public void setViewPagerListener(ViewPagerListener viewPagerListener)
    {
        this.viewPagerListener=viewPagerListener;
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
    }

    private int getScreenWith()
    {
        WindowManager windowManager=(WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE);
        Point point=new Point();
        windowManager.getDefaultDisplay().getSize(point);
        return point.x;
    }
}

第二步：在布局文件中引用，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.zfeng.viewpagerindicator.MainActivity"
    android:background="@android:color/white">
    <com.zfeng.widget.ViewPagerIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="40dip"
        android:background="@android:color/holo_blue_light"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

第三步，在MainActivity中引用，代码如下：

public class MainActivity extends AppCompatActivity
{
    private ViewPagerIndicator indicator;
    private ViewPager viewPager;

    private List<String> mTitles= Arrays.asList("tab1","tab2","tab3","tab4","tab5","tab6","tab7","tab8","tab9");
    private List<FragmentSimple> mFragments=new ArrayList<>();
    private FragmentPagerAdapter fragmentPagerAdapter;

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

        initView();
        initDatas();
        indicator.setVisibleTabs(4);
        indicator.addTabs(mTitles);
        viewPager.setAdapter(fragmentPagerAdapter);
        indicator.setViewPager(viewPager);
        indicator.setViewPagerListener(new ViewPagerIndicator.ViewPagerListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
    private void initView()
    {
        indicator=(ViewPagerIndicator)findViewById(R.id.indicator);
        viewPager=(ViewPager)findViewById(R.id.viewpager);
    }
    private void initDatas()
    {
        for(String str:mTitles)
        {
            FragmentSimple fragmentSimple=FragmentSimple.newInstance(str);
            mFragments.add(fragmentSimple);
        }
        fragmentPagerAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments.size();
            }
        };
    }
}
public class FragmentSimple extends Fragment
{
    private String title;
    public static final String ARGS="FragmentSimpleArgs";

    public static FragmentSimple newInstance(String title)
    {
        Bundle bundle=new Bundle();
        bundle.putString(FragmentSimple.ARGS,title);
        FragmentSimple fragmentSimple=new FragmentSimple();
        fragmentSimple.setArguments(bundle);
        return fragmentSimple;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState)
    {
        Bundle bundle=getArguments();
        if(bundle!=null)
        {
            title=bundle.getString(FragmentSimple.ARGS);
        }else{
            title="title";
        }

        TextView tv=new TextView(getContext());
        tv.setText(title);
        tv.setTextColor(Color.parseColor("#000000"));
        tv.setGravity(Gravity.CENTER);
        return tv;
    }
}