自定义控件三角绕圆圈

1.创建类继承View

public class MyCustomCircleArrowView extends View {

    //创建画笔
    private Paint paint;

    //从xml中获取的颜色
    private int circleBoundColor;
    private float circleBoundWidth;

    //当前画笔画圆的颜色
    private int CurrenCircleBoundColor;

    public MyCustomCircleArrowView(Context context) {
        super(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 int pivotX;
    private int pivotY;

    private float currentDegree = 0;//旋转的度数
    private float radius=130;//半径

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setAntiAlias(true);
        paint.setColor(CurrenCircleBoundColor);//给画笔设置颜色
        paint.setStrokeWidth(circleBoundWidth);//获取圆的宽度
        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;
        }
    }
}

2.通过xml来创建给自定义控件添加颜色和宽度
在values中添加attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyCustomCircleArrowView">
        <attr name="circlr_bound_width" format="dimension"></attr>
        <attr name="circlr_bound_color" format="color"></attr>
    </declare-styleable>
</resources>

3.创建自定义控件之后在布局当中直接调用自定义的控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="加速"
        android:id="@+id/button" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="减速"
        android:layout_below="@+id/button"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:id="@+id/button2" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="改变背景颜色"
        android:layout_below="@+id/button2"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:id="@+id/button3" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="开始/停止"
        android:layout_below="@+id/button3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/button4" />
    <zss.bwie.com.zidinyiview.MyCustomCircleArrowView
        android:id="@+id/my_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:circlr_bound_color="@color/colorAccent"
        app:circlr_bound_width="3dp"
        android:layout_below="@+id/button4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

4.在Activity中获取进行展示

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button jiasu;//加速
    private Button jiansu;//减速
    private Button bianse;//变色
    private MyCustomCircleArrowView myCustomCircleArrowView;
    private Button tingzhi;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化布局控件
        isitView();
    }

    //获取布局控件
    private void isitView() {
        jiasu = (Button) findViewById(R.id.button);
        jiansu = (Button) findViewById(R.id.button2);
        bianse = (Button) findViewById(R.id.button3);
        myCustomCircleArrowView = (MyCustomCircleArrowView) findViewById(R.id.my_view);
        tingzhi = (Button) findViewById(R.id.button4);
        jiasu.setOnClickListener(this);
        jiansu.setOnClickListener(this);
        bianse.setOnClickListener(this);
        tingzhi.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.button:
                myCustomCircleArrowView.speed();
                break;
            case R.id.button2:
                myCustomCircleArrowView.slowDown();
                break;
            case R.id.button3:
                myCustomCircleArrowView.setColor(Color.BLUE);
                break;
            case R.id.button4:
                myCustomCircleArrowView.pauseOrStart();//停止
        }
    }
}

就会展示一个三角在圆上转动可加速减速停止开始

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值