一看就会的自定义指示器适用tab与viewpager

最新推荐文章于 2018-11-02 17:46:45 发布

原创最新推荐文章于 2018-11-02 17:46:45 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

自定义控件同时被 2 个专栏收录

7 篇文章

订阅专栏

ui美化

3 篇文章

订阅专栏

本文介绍了一个自定义的Indicator组件实现方法，该组件可以根据Viewpager的滑动改变指示器的位置，并带有圆角效果。通过简单的代码示例展示了如何创建并设置Indicator的各项属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说直接看效果

/**
 * Created by sunshaobei on 2017/3/6.
 */

public class Indicator extends View {

    private Paint paint;

    private float count = 3;
    private Paint paint2;
    private int position =0;
    private float offset;
    private int width;
    private float offset2;
    private int offwidth = 15;
    private int backcolor;


    public Indicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        //初始化画笔
        initPaint();
    }

    public void setOffwidth(int width)
    {
        this.offwidth = px2dip(getContext(),width);
        //设置属性之后记得刷新画布
        invalidate();
    }
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
    public void setBackcolor(int color)
    {
        this.backcolor = color;
        invalidate();
    }

    private void initPaint() {
        paint = new Paint();
        paint.setAntiAlias(true);

        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.WHITE);
        paint2 = new Paint();
        paint2.setColor(Color.RED);
        paint2.setStyle(Paint.Style.FILL);
        paint2.setAntiAlias(true);

    }

    public void setCount(int count)
    {
        this.count = count;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int height = canvas.getHeight();
        width = canvas.getWidth();
        canvas.drawColor(backcolor);


        //画指示器，带圆角
        for (int i = 0; i < count; i++) {
            RectF rectf = new RectF(i* width /count+ width /count/3+offwidth, 0, i* width /count+2* width /count/3-offwidth, height);
            canvas.drawRoundRect(rectf, 6, 6, paint);
        }
        RectF rectf2 = new RectF(position* width / count + width / count / 3+offwidth+offset, 0,position* width / count + 2*width / count / 3+offset -offwidth-offset2, height);
        canvas.drawRoundRect(rectf2, 6, 6, paint2);


    }
    public void onMove(float f,int position)
    {
        this.position = position;
        if (position == count-1)
        {
            offset = 0;
        }else
        {
            offset = (width/count)*f;
            offset2 = (width/count/3)*(0.5f-Math.abs(0.5f-f));
        }
        invalidate();
   }

*代码部分很简单，易学会用就行，看懂也不难，实在不行就copy
*看效果
![这里写图片描述](https://img-blog.youkuaiyun.com/20170406085225070?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU5NTkyMzE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
没有gif是浑蛋，我偏不信，太麻烦我不弄gif了，这个indicator随着viewpager滑动而滑动，在viewpager的pagerchangerlistener的onchanger方法中调用onmove方法即可`