自定义WIFI正在连接View 动态效果

自定义view代码

package lud.com.wifiviewdemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by win7 on 2016/9/14.
 */

public class NoNetView extends View {

    private Paint bottomCirclePaint;//画笔
    private Paint topPaint;//上层画笔

    private int viewWidth;//view宽
    private int viewHeight;//view高
    private int bottomCircleRadios = 40;
    private int marginBottom = 100;
    //圆弧间的距离
    private float verticalSpace = 100;

    private int flag = -1;

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

    public NoNetView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public NoNetView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        final TypedArray a = context.obtainStyledAttributes(
                attrs, R.styleable.WifiAttr);
        strokeWidth = a.getDimension(R.styleable.WifiAttr_strokeWidth, 20f);
        paintUnderColor = a.getColor(R.styleable.WifiAttr_paintUnderColor, 0x666666);
        paintAboveColor = a.getColor(R.styleable.WifiAttr_paintAboveColor, 0x00ff00);
        initPaint();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        viewHeight = h;
        viewWidth = w;
    }

    //画笔宽度
    private float strokeWidth;
    //底部画笔颜色
    private int paintUnderColor;
    //顶部发射时的颜色
    private int paintAboveColor;

    public float getStrokeWidth() {
        return strokeWidth;
    }

    public void setStrokeWidth(float strokeWidth) {
        this.strokeWidth = strokeWidth;
    }

    public int getPaintUnderColor() {
        return paintUnderColor;
    }

    public void setPaintUnderColor(int paintUnderColor) {
        this.paintUnderColor = paintUnderColor;
    }

    public int getPaintAboveColor() {
        return paintAboveColor;
    }

    public void setPaintAboveColor(int paintAboveColor) {
        this.paintAboveColor = paintAboveColor;
    }

    private void initPaint() {
        bottomCirclePaint = new Paint();
        bottomCirclePaint.setStrokeWidth(strokeWidth);
        bottomCirclePaint.setAntiAlias(true);
        bottomCirclePaint.setStyle(Paint.Style.STROKE);
        bottomCirclePaint.setStrokeCap(Paint.Cap.ROUND);
        topPaint = new Paint(bottomCirclePaint);

        topPaint.setColor(paintAboveColor);
        bottomCirclePaint.setColor(paintUnderColor);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //底部圆圆心
        float circleX = viewWidth / 2;
        float circleY = viewHeight - marginBottom;
        float startAngle = -40;
        float sweepAngle = -100;
        canvas.drawCircle(circleX, circleY, bottomCircleRadios, bottomCirclePaint);

        RectF rectF1 = new RectF(circleX - bottomCircleRadios - verticalSpace, circleY - bottomCircleRadios - verticalSpace, circleX + bottomCircleRadios + verticalSpace, circleY + bottomCircleRadios + verticalSpace);
        canvas.drawArc(rectF1, startAngle, sweepAngle, false, bottomCirclePaint);

        RectF rectF2 = new RectF(circleX - bottomCircleRadios - 2 * verticalSpace, circleY - bottomCircleRadios - 2 * verticalSpace, circleX + bottomCircleRadios + 2 * verticalSpace, circleY + bottomCircleRadios + 2 * verticalSpace);
        canvas.drawArc(rectF2, startAngle, sweepAngle, false, bottomCirclePaint);

        RectF rectF3 = new RectF(circleX - bottomCircleRadios - 3 * verticalSpace, circleY - bottomCircleRadios - 3 * verticalSpace, circleX + bottomCircleRadios + 3 * verticalSpace, circleY + bottomCircleRadios + 3 * verticalSpace);
        canvas.drawArc(rectF3, startAngle, sweepAngle, false, bottomCirclePaint);

        switch (flag) {
            case 0:
                canvas.drawCircle(circleX, circleY, bottomCircleRadios, topPaint);
                break;
            case 1:
                canvas.drawArc(rectF1, startAngle, sweepAngle, false, topPaint);
                break;
            case 2:
                canvas.drawArc(rectF2, startAngle, sweepAngle, false, topPaint);
                break;
            case 3:
                canvas.drawArc(rectF3, startAngle, sweepAngle, false, topPaint);
                break;
        }
    }

    private MyRunnable runnable = new MyRunnable();

    private class MyRunnable implements Runnable {
        @Override
        public void run() {
            flag++;
            flag = flag % 4;
            if (count != 0) {
                if (flag == 0) {
                    currentCount++;
                    if (currentCount <= count) {
                        postInvalidate();
                        handler.postDelayed(runnable, 300);
                    } else {
                        stop();
                    }
                } else {
                    postInvalidate();
                    handler.postDelayed(runnable, 300);
                }
            } else {
                postInvalidate();
                handler.postDelayed(runnable, 300);
            }
        }
    }


    public void start() {
        if (isRunning != true) {
            isRunning = true;
            flag = -1;
            currentCount = 0;
            topPaint.setColor(paintAboveColor);
            handler.postDelayed(runnable, 300);
        }
    }

    public void stop() {
        if (isRunning == true) {
            isRunning = false;
            topPaint.setColor(paintUnderColor);
            invalidate();
            handler.removeCallbacks(runnable);
        }
    }

    int count;
    int currentCount = 0;
    private boolean isRunning = false;

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

    Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case 0:
                    postInvalidate();
                    break;
            }
        }
    };
}

attrs文件定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="WifiAttr">
        <attr name="strokeWidth" format="dimension" />
        <attr name="paintUnderColor" format="color"/>
        <attr name="paintAboveColor" format="color"/>
    </declare-styleable>
</resources>

mainactivity代码

package lud.com.wifiviewdemo;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {
    private NoNetView noNetView;
    Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            noNetView.stop();
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        noNetView = (NoNetView) findViewById(R.id.noNetView);
        noNetView.runCount(3);//设计轮播次数
    }
    //开始
    public void start(View view) {
        noNetView.start();
    }
    //结束
    public void stop(View view) {
        handler.sendEmptyMessage(0);
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:wifi="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="lud.com.wifiviewdemo.MainActivity">

    <lud.com.wifiviewdemo.NoNetView
        android:id="@+id/noNetView"
        android:layout_width="306dp"
        android:layout_height="244dp"
        android:background="#acacac"
        wifi:paintAboveColor="#00ffff"
        wifi:paintUnderColor="#666666"
        wifi:strokeWidth="10dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignStart="@+id/noNetView"
        android:layout_marginBottom="22dp"
        android:onClick="start"
        android:text="start" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_alignEnd="@+id/noNetView"
        android:onClick="stop"
        android:text="stop" />
</RelativeLayout>

demo点击下载