自定义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点击下载