Android 自定义View (一)

一、前言

 

本文通过一个简单的旋转环控件，了解自定义view 的一些基本知识。在进一步的解释之前，先上效果图

 

                             

 

二、代码

 

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

import androidx.annotation.Nullable;

/*
 * Created by kwy on 2020/5/11
 */

public class RotatingRing extends View {

    private int centerX; // 圆环旋转中心X
    private int centerY; // 圆环旋转中心Y

    private Paint paint; // 用于绘制的画笔

    private RectF rectF; // 用于绘制圆环的矩形参数

    private int radius; // 圆环半径
    private int width; // 圆环宽度

    int angle; // 圆环的旋转角度
    int duration; // 旋转一圈耗时

    int startAngle; // 圆环初始角度 3点钟方向为 0°
    int sweepAngle; // 圆环扫过的角度

    int startColor; // 首部颜色
    int endColor; // 尾部颜色

    /**
     * 默认的构造函数
     * @param context 上下文
     */
    public RotatingRing(Context context) {
        super(context);
        radius = 100;
        width = 20;
        startAngle = 0;
        sweepAngle = 270;
        startColor = Color.WHITE;
        endColor = Color.BLUE;
        duration = 1000;
    }

    public RotatingRing(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public RotatingRing setColor(int endColor) {
        this.endColor = endColor;
        return this;
    }

    public RotatingRing setColor(int startColor, int endColor) {
        this.startColor = startColor;
        this.endColor = endColor;
        return this;
    }

    public RotatingRing setRadius(int radius) {
        this.radius = radius;
        return this;
    }

    public RotatingRing setWidth(int width) {
        this.width = width;
        return this;
    }

    public RotatingRing setAngle(int startAngle, int sweepAngle) {
        this.startAngle = startAngle;
        this.sweepAngle = sweepAngle;
        return this;
    }

    public RotatingRing setDuration(int duration) {
        this.duration = duration;
        return this;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.rotate(angle, centerX, centerY);
        canvas.drawArc(rectF, paint.getStrokeCap() == Paint.Cap.ROUND ? startAngle + width/2f: startAngle,
                sweepAngle, false, paint);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w / 2;
        centerY = h / 2;
        rectF = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
        setPaint();
    }

    /**
     * 初始化画笔
     */
    private void setPaint(){
        paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setShader(new SweepGradient(centerX, centerY,
                new int[]{startColor, endColor},
                new float[]{startAngle/360f*1.0f, sweepAngle/360f*1.0f}));
        paint.setAntiAlias(true);
        paint.setStrokeWidth(width);
    }

    public void startAnim(){
        final ValueAnimator animator = ValueAnimator.ofInt(0,360);
        animator.setDuration(duration);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                angle = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator.start();
    }
}

　　

三、应用

 

在 activity_main.xml 中添加该自定义view，如下所示

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <你的包名.RotatingRing
        android:id="@+id/rotating_ring"
        android:layout_width="400dp"
        android:layout_height="400dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

　　

在 MainActivity.java 中，开启动画

 

import android.graphics.Color;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    RotatingRing rotatingRing;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rotatingRing = findViewById(R.id.rotating_ring);
        rotatingRing.setWidth(30)
                .setRadius(150)
                .setAngle(40,260)
                .setColor(Color.BLUE)
                .setDuration(1500)
                .startAnim();
    }
}

 

完成！下节 将对代码进行简单的解释