自定义加锁wifi（宽高相等的方形区域为例，可以自行调整）

自定义加锁wifi（宽高相等的方形区域为例，可以自行调整）

样式图：

实现思路：
1、绘制扇形半透明底图
2、绘制上层wifi信号等级白色扇形
3、弧形边缘擦除
4、带锁图标icon添加

绘制扇形半透明底图

获取设置的宽度：
private int wifiWidth;
onDraw()中：

wifiWidth = getWidth();
1

初始化画笔：
private Paint pDefault;

 pDefault.setAntiAlias(true);
 pDefault.setColor(ContextCompat.getColor(mContext, R.color.white));
 pDefault.setAlpha(60);
 pDefault.setStyle(Paint.Style.FILL);
 pDefault.setStrokeWidth(6);
1
2
3
4
5

平移绘制位置：
private static final int maxLevel = 4;//最大等级

 float signalRadius = wifiWidth * 1.0f / 2 / maxLevel;
 canvas.translate(0, wifiWidth / 5f + signalRadius);//绘制位置平移，根据需要自行调整
1
2

默认半透明底层扇形绘制：
private float startAngle = -135;//开始角度
private float sweepAngle = 90;//转过角度

  RectF defaultR = new RectF(0, 0, wifiWidth, wifiWidth);
  canvas.drawArc(defaultR, startAngle, sweepAngle, true, pDefault);
1
2

绘制上层wifi信号等级白色扇形

设置传递修改wifi等级的方法

 /**
     * 设置wifi等级(默认四级)
     *
     * @param level
     */
    public void setWifiLevel(int level) {
        if (level < 0 || level > 4) throw new RuntimeException("wifi等级超出范围");
        this.level = level;
        invalidate();
    }
1
2
3
4
5
6
7
8
9
10

绘制wifi覆盖图

 if (level >= 0) {
    if (level >= 1) {
            level = level - 1;
        }
        float radius = signalRadius * level;
        RectF rectf = new RectF(radius, radius, wifiWidth - radius, wifiWidth - radius);
        topPaint.setStyle(Paint.Style.FILL);
        canvas.drawArc(rectf, startAngle, sweepAngle, true, topPaint);
    }
 canvas.restore();
1
2
3
4
5
6
7
8
9
10

弧形边缘擦除

DensityUtil.java代码：

import android.content.Context;
import android.util.DisplayMetrics;

import androidx.appcompat.app.AppCompatActivity;

public class DensityUtil {

    private volatile static DisplayMetrics displayMetrics;

    private synchronized  static DisplayMetrics initDisplayMetrics(){
        if(displayMetrics == null){
            displayMetrics = new DisplayMetrics();
        }
        return displayMetrics;
    }
    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        initDisplayMetrics();
        ((AppCompatActivity)context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        float density= displayMetrics.density;
        return (int) (dpValue * density + 0.5f);
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     */
    public static int px2dip(Context context, float pxValue) {
        initDisplayMetrics();
        ((AppCompatActivity)context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        float density= displayMetrics.density;
        return (int) (pxValue / density + 0.5f);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

关闭硬件加速

 setLayerType(View.LAYER_TYPE_SOFTWARE, null);//关闭硬件加速，解决变黑问题
1

 int ll = (int) (getWidth() * 0.6f);
 int lt = (int) ((int) (getWidth() * 0.25f + DensityUtil.dip2px(mContext, 4)) + wifiWidth / 5f);
 int lr = (int) (getWidth() * 0.90f);
 int lb = (int) (getHeight() * 0.85f);
 
 Paint mp = new Paint();
 mp.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
 mp.setStyle(Paint.Style.FILL);
 RectF rt = new RectF(ll + DensityUtil.dip2px(mContext, 1), lt, lr + DensityUtil.dip2px(mContext, 4), lb);
 canvas.drawArc(rt, 150, 150, false, mp);
1
2
3
4
5
6
7
8
9
10

带锁图标icon添加

  Bitmap bitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.icon_lock);
  canvas.drawBitmap(bitmap2, null, rl, null);
1
2

完整代码：

package com.xx.demo;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import androidx.annotation.Nullable;
import androidx.core.content.ContextCompat;

public class WifiView extends View {


    Context mContext;
    int level = -1;

    public WifiView(Context context) {
        super(context);
    }

    public WifiView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;

        setLayerType(View.LAYER_TYPE_SOFTWARE, null);//禁用硬件加速，解决变黑问题

        topPaint = new Paint();
        topPaint.setAntiAlias(true);
        topPaint.setColor(ContextCompat.getColor(mContext, R.color.white));
        topPaint.setStyle(Paint.Style.FILL);
        topPaint.setStrokeWidth(6);
        pDefault = new Paint();
    }

    /**
     * 设置wifi等级(默认四级)
     *
     * @param level
     */
    public void setWifiLevel(int level) {
        if (level < 0 || level > 4) throw new RuntimeException("wifi等级超出范围");
        this.level = level;
        invalidate();
    }

    private int wifiWidth;
    private float startAngle = -135;
    private float sweepAngle = 90;
    private static final int maxLevel = 4;

    Paint topPaint;
    Paint pDefault;

    @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        wifiWidth = getWidth();

        int ll = (int) (getWidth() * 0.6f);
        int lt = (int) ((int) (getWidth() * 0.25f + DensityUtil.dip2px(mContext, 4)) + wifiWidth / 5f);
        int lr = (int) (getWidth() * 0.90f);
        int lb = (int) (getHeight() * 0.85f);

        Rect rl = new Rect(ll, lt, lr, lb);

        pDefault.setAntiAlias(true);
        pDefault.setColor(ContextCompat.getColor(mContext, R.color.white));
        pDefault.setAlpha(60);
        pDefault.setStyle(Paint.Style.FILL);
        pDefault.setStrokeWidth(6);


        float signalRadius = wifiWidth * 1.0f / 2 / maxLevel;
        canvas.translate(0, wifiWidth / 5f + signalRadius);//绘制位置平移，根据需要自行调整

        RectF defaultR = new RectF(0, 0, wifiWidth, wifiWidth);
        canvas.drawArc(defaultR, startAngle, sweepAngle, true, pDefault);

        if (level >= 0) {
            level = 4 - level;
            float radius = signalRadius * level;
            RectF rectf = new RectF(radius, radius, wifiWidth - radius, wifiWidth - radius);
            topPaint.setStyle(Paint.Style.FILL);
            canvas.drawArc(rectf, startAngle, sweepAngle, true, topPaint);
        }
        canvas.restore();

        Paint mp = new Paint();
        mp.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
        mp.setStyle(Paint.Style.FILL);

        RectF rt = new RectF(ll + DensityUtil.dip2px(mContext, 1), lt, lr + DensityUtil.dip2px(mContext, 4), lb);
        canvas.drawArc(rt, 150, 150, false, mp);

        Bitmap bitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.icon_lock);
        canvas.drawBitmap(bitmap2, null, rl, null);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

使用xml中：

 <com.xx.demo.WifiView
  android:id="@+id/wifi"
  android:layout_width="45dp"
  android:layout_height="45dp"
  />
1
2
3
4
5

java中：

WifiView wifiView;
wifiView = findViewById(R.id.wifi);
wifiView.setWifiLevel(2);
1
2
3

如果设置宽高，发现图标或者弧形偏移等情况，请自行调整，本文只提供一种思路。