自定義View 自定義圓點指示LinearLayout實現紅色小圓點功能

 

前言

項目需求：界面有一處地方需要在控件右上角添加一個小紅點，如下圖所示

方法可能有很多種，比如FrameLayout 中添加一張小圓點圖片，默認隱藏，在需要時顯示，但我們這裏使用自定義view 實現

話不多說，直接上代碼

我們先定義一個Paint 以及一個布爾變量控制圓點的顯示與隱藏

 private Paint redPaint ;//畫筆
 private Boolean isShow = false;//是否顯示 默認隱藏

重寫onFinishInflate 在控件加載完成之後配置paint 

 @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        redPaint = new Paint();
        redPaint.setColor(Color.RED);
        redPaint.setAntiAlias(true);//抗鋸齒
        redPaint.setDither(true);//防抖動
        redPaint.setStyle(Paint.Style.FILL_AND_STROKE);//全部填充
    }

 然後提供方法控制其顯示與隱藏

 public void setIsShow(Boolean isShow){
        this.isShow = isShow;
        invalidate();
    }

    public Boolean getIsShow(){
        return isShow;
    }

最後重寫onDraw方法即可

//重寫onDraw
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (isShow){
            canvas.drawCircle(getWidth()-6,6,6,redPaint);
        }
    }

此處我們可以再新建一個方法來控制Paint ,大家可以傳入自己的paint 

public void setRedPaint(Paint paint){
    this.redPaint = paint;
    this.isShow = true;
    invalidate();
} 

最後在activity中使用，這裏通過點擊按鈕控制小圓點的隱藏或者顯示

 public void change(View view){
        if (redDotView.getIsShow()) redDotView.setIsShow(false);
        else  redDotView.setIsShow(true);
    }

 另外我們再加一個按鈕傳入自己的Paint 

public void paint(View view){
        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setStyle(Paint.Style.STROKE);
        redDotView.setRedPaint(paint);
    }

效果圖如下

 

源碼點擊這裏 : 點我點我點我