Android——自定义ViewPager指示器

很多ViewPager和下面的图形绑定一块来滚动，也就是指示器，指示器可以是很多，正

方形，长方形，三角形，圆形等。

这里举一个三角形例子：

效果图：未滑动

滑动中：

这里滑动只要超过倒数第二个就自动向后滑动。

上代码：

自定义view：

public class ViewPagerIndicator extends LinearLayout {    private Paint paint;    private Path path;    private int triangleWidth;    private int triangleHeight;    private static final float RADIO_TRIANGLE_WIDTH = 1 / 6f;    private static final int HIGHCOLOR = 0xffffffff;    private static final int LOWERCOLOR = 0x88ffffff;    private int initTranslationX;    private int moveTranslationX;    private int TabVisibleCount;    private static final int COUNT_DEFAULT_TAB = 4;    private List<String> titles = new ArrayList<String>();    public ViewPagerIndicator(Context context, AttributeSet attrs) {        super(context, attrs);        // 获取可见Tab的数量        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator);        TabVisibleCount = ta.getInt(R.styleable.ViewPagerIndicator_visible_tab_count, COUNT_DEFAULT_TAB);        if (TabVisibleCount < 0) {            TabVisibleCount = COUNT_DEFAULT_TAB;        }        ta.recycle();        // 初始化画笔        paint = new Paint();        paint.setAntiAlias(true);        paint.setColor(Color.WHITE);        paint.setStyle(Style.FILL);        paint.setPathEffect(new CornerPathEffect(5));    }    public ViewPagerIndicator(Context context) {        super(context, null);        // TODO Auto-generated constructor stub    }    /**     * 绘制三角形     */    /**     * 没有背景时直接调用的是dispatchDraw()方法,draw()方法里包含了dispatchDraw()方法的调用。     * 因此要在ViewGroup上绘制东西的时候往往重写的是dispatchDraw()方法而不是onDraw()方法     */    @Override    protected void dispatchDraw(Canvas canvas) {        // TODO Auto-generated method stub        super.dispatchDraw(canvas);        /*         * 如果有save（）和restore（）， 那么平移、缩放、旋转等操作只对save（）和restore（）作用域之间的代码有效。         * 当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，         * 那么之后在画布上的元素都会受到影响，所以我们在操作之前调用canvas.save()来保存画布当前的状态，         * 当操作之后取出之前保存过的状态，这样就不会对其他的元素进行影响         */        canvas.save();        canvas.translate(initTranslationX + moveTranslationX, getHeight());        canvas.drawPath(path, paint);        canvas.restore();    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        // TODO Auto-generated method stub        super.onSizeChanged(w, h, oldw, oldh);        triangleWidth = (int) (w / TabVisibleCount * RADIO_TRIANGLE_WIDTH);        initTranslationX = w / TabVisibleCount / 2 - triangleWidth / 2;        initTrangle();    }    /**     * 在xml加载完成以后调用此方法     */    @Override    protected void onFinishInflate() {        // TODO Auto-generated method stub        super.onFinishInflate();        int count = getChildCount();        if (count == 0)            return;        for (int i = 0; i < count; i++) {            View view = getChildAt(i);            LinearLayout.LayoutParams lp = (LayoutParams) view.getLayoutParams();            // 如果之前设有weight 都设置为0            lp.weight = 0;            lp.width = getScreenWidth() / TabVisibleCount;            view.setLayoutParams(lp);        }        setItemClickEvent();    }    private int getScreenWidth() {        // TODO Auto-generated method stub        WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);        DisplayMetrics outMetrics = new DisplayMetrics();        wm.getDefaultDisplay().getMetrics(outMetrics);        return outMetrics.widthPixels;    }    /**     * 初始化三角形     */    private void initTrangle() {        // TODO Auto-generated method stub        path = new Path();        triangleHeight = (int) (triangleWidth / 2 / 1.7);        path.moveTo(0, 0);        path.lineTo(triangleWidth, 0);        path.lineTo(triangleWidth / 2, -triangleHeight);        path.close();    }    /**     * 指示器跟随手指移动     *      * @param position     *            当前页     * @param offset(0~1)     *            偏移量     */    public void scoll(int position, float offset) {        // TODO Auto-generated method stub        int tabWidth = getWidth() / TabVisibleCount;        moveTranslationX = (int) (tabWidth * (position + offset));        // 容器移动，当tab处于移动至最后一个时        if (position >= (TabVisibleCount - 2) && offset > 0 && getChildCount() > TabVisibleCount) {            if (TabVisibleCount != 1) {                scrollTo((position - (TabVisibleCount - 2)) * tabWidth + (int) (tabWidth * offset), 0);            } else {                scrollTo(position * tabWidth + (int) (tabWidth * offset), 0);            }        }        // 请求重绘三角形        invalidate();    }    // 该方法需要在setTabitemTitles方法之前调用有效，因为用到了TabVisibleCount    public void setVisibleTab(int count) {        this.TabVisibleCount = count;    }    /**     * 根据title动态创建TextView     *      * @param title     * @return     */    public void setTabitemTitles(List<String> titles) {        if (titles != null && titles.size() > 0) {            this.titles = titles;        }        for (String title : titles) {            addView(getTextView(title));        }        setItemClickEvent();    }    private View getTextView(String title) {        // TODO Auto-generated method stub        TextView tv = new TextView(getContext());        LinearLayout.LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);        lp.width = getScreenWidth() / TabVisibleCount;        tv.setText(title);        tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);        tv.setGravity(Gravity.CENTER);        tv.setLayoutParams(lp);        tv.setTextColor(LOWERCOLOR);        return tv;    }    /**     * 用户的setOnPageChangeListener回调方法供外部使用     *      * @author lpl     *     */    public interface PageChangeListener {        public void onPageScrollStateChanged(int arg0);        public void onPageScrolled(int arg0, float arg1, int arg2);        public void onPageSelected(int arg0);    }    private PageChangeListener listener;    public void setOnPageChangeListener(PageChangeListener listener) {        this.listener = listener;    }    /**     * 关联ViewPager     *      * @param pager     * @param pos     *            默认选中页     */    private ViewPager pager;    public void setViewPager(final ViewPager pager, int pos) {        this.pager = pager;        pager.setOnPageChangeListener(new OnPageChangeListener() {            @Override            public void onPageScrollStateChanged(int arg0) {                // TODO Auto-generated method stub            }            @Override            public void onPageScrolled(int arg0, float arg1, int arg2) {                // 总偏移量：arg0(position)*tabWidth+arg1(positionoffset)*tabWidth                if (listener != null) {                    listener.onPageScrolled(arg0, arg1, arg2);                }                scoll(arg0, arg1);            }            @Override            public void onPageSelected(int arg0) {                // TODO Auto-generated method stub                if (listener != null) {                    listener.onPageSelected(arg0);                }                HighTextView(arg0);            }        });        pager.setCurrentItem(pos);        HighTextView(pos);    }    public void resetColorTextView() {        for (int i = 0; i < getChildCount(); i++) {            TextView tv = (TextView) getChildAt(i);            tv.setTextColor(LOWERCOLOR);        }    }    /**     * 设置高亮的TextView     *      * @param position     */    public void HighTextView(int position) {        resetColorTextView();        TextView tv = (TextView) getChildAt(position);        tv.setTextColor(HIGHCOLOR);    }    /**     * 设置tab的点击事件     */    public void setItemClickEvent() {        for (int i = 0; i < getChildCount(); i++) {            final int j = i;            TextView tv = (TextView) getChildAt(i);            tv.setOnClickListener(new OnClickListener() {                @Override                public void onClick(View v) {                    // TODO Auto-generated method stub                    pager.setCurrentItem(j);                }            });        }    }}

在Activity中onCreate调用此控件：

// setVisibleTab该方法需要在setTabitemTitles方法之前调用有效，//因为用到了TabVisibleCount        // indicator.setVisibleTab(3);设置可见的title个数        //titles是List容器存放TextView        indicator.setTabitemTitles(titles);        //默认0是第一个title为高亮选中        indicator.setViewPager(viewpager, 0);        viewpager.setAdapter(adapter);