自定义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;        }    }}

好了大功告成效果如图