自定义view圆形加载（小三角沿圆滑动）

给大家带来一个自定义view圆形图绕圆滑动

自定义view在我们的开发中是我们大家经常用到的一种东西，所以给大家做一个小demo，供大家参考

首先我们先来自定义我们的圆和绕圆滑动的小三角：

import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.View;import android.widget.Toast;import com.example.mycustomcirclearrowviewdemo.R;/** * Created by hasee on 2017/9/4. */public class MyCustomCircleArrowView extends View {    //从xml中获取的颜色    private int circleBoundColor;    private float circleBoundWidth;    //当前画笔画圆的颜色    private int CurrenCircleBoundColor;    private Paint paint;    public MyCustomCircleArrowView(Context context) {        super(context);        initVeiw(context);    }    public MyCustomCircleArrowView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        initVeiw(context);        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyCustomCircleArrowView);        for (int i = 0; i < typedArray.getIndexCount(); i++) {            //就是我们自定义的属性的资源id            int attr = typedArray.getIndex(i);            switch (attr) {                case R.styleable.MyCustomCircleArrowView_circlr_bound_color:                    circleBoundColor = typedArray.getColor(attr, Color.RED);                    CurrenCircleBoundColor = circleBoundColor;                    break;                case R.styleable.MyCustomCircleArrowView_circlr_bound_width:                    circleBoundWidth = typedArray.getDimension(attr, 3);                    break;            }        }    }    private void initVeiw(Context context) {        paint = new Paint();    }    public void setColor(int color) {        if (CurrenCircleBoundColor != color) {            CurrenCircleBoundColor = color;        } else {            CurrenCircleBoundColor = circleBoundColor;        }    }    //圆心    private float pivotX;    private float pivotY;    private float radius = 130;    private float currentDegree = 0;    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        paint.setAntiAlias(true);        paint.setColor(CurrenCircleBoundColor);        paint.setStrokeWidth(circleBoundWidth);        paint.setStyle(Paint.Style.STROKE);        pivotX = getWidth() / 2;        pivotY = getHeight() / 2;        canvas.drawCircle(pivotX, pivotY, radius, paint);        canvas.save();        //旋转画布 , 如果旋转的的度数大的话,视觉上看着是旋转快的        canvas.rotate(currentDegree, pivotX, pivotY);        //提供了一些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.BLACK);        canvas.drawPath(path, paint);        canvas.restore();        //旋转的度数一个一个度数增加,  如果乘以一个速度的话,按一个速度速度增加        currentDegree += 1 * currentSpeed;        if (!isPause) {            invalidate();        }    }    private int currentSpeed = 1;    private boolean isPause = false;    public void speed() {        ++currentSpeed;        if (currentSpeed >= 10) {            currentSpeed = 10;            Toast.makeText(getContext(), "我比闪电还快", Toast.LENGTH_SHORT).show();        }    }    public void slowDown() {        --currentSpeed;        if (currentSpeed <=1) {            currentSpeed = 1;        }    }    public void pauseOrStart() {        //如果是开始状态的话去重新绘制        if (isPause) {            isPause = !isPause;            invalidate();        } else {            isPause = !isPause;        }    }

下面就是 给定义我们的xml布局

<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.example.mycustomcirclearrowviewdemo.MainActivity">    <Button        android:id="@+id/set_color_btn"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:onClick="onClick"        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:onClick="add"        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:onClick="slow"        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:onClick="pauseOrStart"        android:text="暂定/开始" />    <com.example.mycustomcirclearrowviewdemo.view.MyCustomCircleArrowView        android:id="@+id/my_view"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        app:circlr_bound_color="@color/colorAccent"        app:circlr_bound_width="3dp" /></RelativeLayout>

最后就是实现我们的代码：

import android.graphics.Color;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import com.example.mycustomcirclearrowviewdemo.view.MyCustomCircleArrowView;public class MainActivity extends AppCompatActivity {    private MyCustomCircleArrowView myCustomCircleArrowView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        myCustomCircleArrowView = (MyCustomCircleArrowView) findViewById(R.id.my_view);    }    //点击改变颜色    public void onClick(View view) {        myCustomCircleArrowView.setColor(Color.BLUE);    }    //点击加速    public void add(View view) {        myCustomCircleArrowView.speed();    }   //点击减速    public void slow(View view) {        myCustomCircleArrowView.slowDown();    }   //点击暂停、开始    public void pauseOrStart(View view) {        myCustomCircleArrowView.pauseOrStart();    }

这就是我们简单实现的一个效果图