自定义View 自定义一个带箭头的圆环详解 加速 减速 暂停 变色

今天分享给大家一个带箭头会旋转的自定义view实现起来比较简单，效果是这样的

首先我们新建一个class继承view

public class MyCustomView extends View 

重写三个构造方法

public class MyCustomView extends View {
    public MyCustomView(Context context) {
        this(context,null);
    }

    public MyCustomView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public MyCustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }
}

这里前两个方法有修改不要忘记

然后在values目录下新建一个attrs.xml文件
自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyCustomView">
        <attr name="viewSize" format="dimension"></attr>
        <attr name="viewColor" format="color"></attr>
    </declare-styleable>
</resources>

布局中

<com.lx_customviewone.views.MyCustomView
        android:id="@+id/view_custom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:viewColor="@color/colorAccent"
        app:viewSize="5dp" />

然后我们回到MyCustomView类中在第三个构造里面自定义属性

    private int msize;
    private int mcolor;
    private int CurrenColor;
    private Paint paint;
    private float pivotX;
    private float pivotY;
    //设置半径
    private float radius = 150;
    private float currentDegree = 0;

public MyCustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyCustomView, defStyleAttr, 0);
        for (int i = 0; i < typedArray.getIndexCount(); i++) {
            //就是我们自定义的属性的资源id
            int attr = typedArray.getIndex(i);
            switch (attr){
                case R.styleable.MyCustomView_viewSize:
                    msize = typedArray.getDimensionPixelSize(attr, 10);
                    break;
                case R.styleable.MyCustomView_viewColor:
                    mcolor = typedArray.getColor(attr, Color.BLACK);

                    break;
            }
        }
        typedArray.recycle();
        paint = new Paint();

    }

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //设置抗锯齿
        paint.setAntiAlias(true);
        paint.setColor(mcolor);
        paint.setStrokeWidth(msize);
        //设置显示风格为空心圆
        paint.setStyle(Paint.Style.STROKE);
        pivotX = getWidth() / 2;
        pivotY = getHeight() / 2;
        canvas.drawCircle(pivotX, pivotY,radius,paint);
        canvas.save();
        //旋转画布 , 如果旋转的的度数大的话,视觉上看着是旋转快的
        canvas.rotate(currentDegree,pivotX,pivotY);
    }

做到这里已经出现圆圈了

然后我们接在刚才onDraw()方法里面继续写

        //提供了一些api可以用来画线(画路径)
        Path path = new Path();
        //从哪开始画 从A开始画
        path.moveTo(pivotX+radius,pivotY);
        //从A点画一个直线到D点
        path.lineTo(pivotX + radius - 20, pivotY -20);
        //从D点画一个直线到B点
        path.lineTo(pivotX+radius,pivotY+20);
        //从B点画一个直线到C点
        path.lineTo(pivotX+radius+20,pivotY-20);
        //闭合  --  从C点画一个直线到A点
        path.close();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLUE);
        canvas.drawPath(path, paint);
        canvas.restore();
        //旋转的度数一个一个度数增加,  如果乘以一个速度的话,按一个速度速度增加
        currentDegree += 1*currentSpeed;
        invalidate();

这一段如果看不懂的话可以看看我的图

现在一个带箭头旋转图已经做好了

然后我么再给他实现一些效果
在布局中加几个按钮

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.lx_customviewone.MainActivity">

    <Button
        android:id="@+id/set_color_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="设置颜色" />

    <Button
        android:id="@+id/add"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/set_color_btn"
        android:layout_centerHorizontal="true"
        android:text="加速" />

    <Button
        android:id="@+id/slow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/add"
        android:layout_centerHorizontal="true"
        android:text="减速" />

    <Button
        android:id="@+id/pause_or_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/slow"
        android:layout_centerHorizontal="true"
        android:text="暂定/开始" />

    <com.lx_customviewone.views.MyCustomView
        android:id="@+id/view_custom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:viewColor="@color/colorAccent"
        app:viewSize="5dp" />

</RelativeLayout>

然后我们在自定义的view中加上这几个方法

定义一个int值接收颜色

 private int CurrenColor;

然后我们让mcolor = CurrenColor
然后重写一个方法

public void setColor(int color){
            if(color!=CurrenColor){
                CurrenColor = color;
            }else{
                mcolor = CurrenColor;
            }
    }

//加速
 public void setspeed(){
        currentSpeed++;
        if(currentSpeed>=11){
            currentSpeed = 11;
            Toast.makeText(getContext(), "快如闪电了", Toast.LENGTH_SHORT).show();
        }
    }
    //减速
    public void setslowdown(){
        currentSpeed--;
        if(currentSpeed<=1){
            currentSpeed = 1;
            Toast.makeText(getContext(), "你是要停吗？", Toast.LENGTH_SHORT).show();
        }
    }

我们设置一个flag

private int flag = 1;

把onDeaw方法最后的invalidate();限制起来

if(flag ==1){
            invalidate();
        }

然后写一个方法实现暂停和开始

public void setpauseOrStart(){
        switch (flag){
            case 0:
                flag = 1;
                invalidate();
                break;
            case 1:
                flag = 0;
                break;
        }
    }

MainActivity:

package com.lx_customviewone;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

import com.lx_customviewone.views.MyCustomView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    /**
     * 设置颜色
     */
    private Button mSetColorBtn;
    /**
     * 加速
     */
    private Button mAdd;
    /**
     * 减速
     */
    private Button mSlow;
    /**
     * 暂定/开始
     */
    private Button mPauseOrStart;
    private MyCustomView mViewCustom;

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


    }

    private void initView() {
        mSetColorBtn = (Button) findViewById(R.id.set_color_btn);
        mSetColorBtn.setOnClickListener(this);
        mAdd = (Button) findViewById(R.id.add);
        mAdd.setOnClickListener(this);
        mSlow = (Button) findViewById(R.id.slow);
        mSlow.setOnClickListener(this);
        mPauseOrStart = (Button) findViewById(R.id.pause_or_start);
        mPauseOrStart.setOnClickListener(this);
        mViewCustom = (MyCustomView) findViewById(R.id.view_custom);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.set_color_btn:
                mViewCustom.setColor(Color.GREEN);
                break;
            case R.id.add:
                mViewCustom.setspeed();
                break;
            case R.id.slow:
                mViewCustom.setslowdown();
                break;
            case R.id.pause_or_start:
                mViewCustom.setpauseOrStart();
                break;
        }
    }
}

好了大功告成效果如图