自定义View（5）玩转字体变色-进度条、形状切换

xunyan6234

已于 2024-06-20 19:24:06 修改

阅读量84

点赞数 1

分类专栏： # Android自定义View 文章标签： android java

于 2024-06-19 17:06:25 首次发布

本文链接：https://blog.csdn.net/xunyan6234/article/details/139808118

版权

Android自定义View 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

上几篇已经讲了自定义View即自定义View变色的基本使用，为了更熟悉自定义View的使用，上篇结尾有两个任务，这篇就来讲讲是怎么实现的，包括打造炫酷的进度条、仿58同城数据加载。
在这里插入图片描述

1. 打造炫酷的进度条

1.1 思路

我们要做的炫酷的进度条，可以继承View，也可以继承TextView，这里以继承TextView为例来实现，其实分为三部分，外圈、内圈、中间的字符串，这个跟《自定义View（3）仿QQ运动步数进度》可谓是非常相似了。不过对于外圈，除了可以用弧形表示外，也可以用圆来表示。

1.2 自定义View-炫酷的进度条

1.2.1 新建attrs.xml

首先还是新建attrs.xml，定义需要用到的自定义属性。

<!-- /CustomView/view5/app/src/main/res/values/attrs.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ProgressView">
        <attr name="outColor" format="color"/>
        <attr name="innerColor" format="color"/>
        <attr name="borderWidget" format="dimension"/>
    </declare-styleable>
</resources>

1.2.2 新建ProgressView继承TextView

// /CustomView/View5/app/src/main/java/com/example/view5/ProgressView.java
public class ProgressView extends androidx.appcompat.widget.AppCompatTextView {
    private Paint mOuterPaint;  // 总进度条画笔
    private int mOuterColor = Color.RED;  // 总进度条颜色，并设置默认
    private int mStartAngle = 0;  // 弧度开始角度
    private float mEndAngle = 360f;   // 弧度结束角度

    private Paint mInnerPaint;  // 已走画笔
    private int mInnerColor = Color.BLUE;  // 已走颜色，并设置默认

    private float mBorderWidget = 40;  // 默认圆弧宽度

    private Paint mTextPaint;  // 文字画笔
    private float mProgress = 0;
    private String mProgressText;   // 当前进度

    public ProgressView(Context context) {
        this(context,null);
    }

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

    public ProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mProgressText = getText().toString();
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ProgressView);
        mBorderWidget = ta.getDimension(R.styleable.ProgressView_borderWidget, mBorderWidget);
        mOuterColor = ta.getColor(R.styleable.ProgressView_outColor, mOuterColor);
        mInnerColor = ta.getColor(R.styleable.ProgressView_innerColor, mInnerColor);
        ta.recycle();  // 回收

        mOuterPaint = new Paint(); // 创建总画笔
        mOuterPaint.setAntiAlias(true); // 取消锯齿
        mOuterPaint.setColor(mOuterColor);  // 设置颜色
        mOuterPaint.setStrokeWidth(mBorderWidget);  // 设置圆弧宽度
        mOuterPaint.setStyle(Paint.Style.STROKE);  // 设置圆弧Style
        mOuterPaint.setStrokeCap(Paint.Cap.ROUND);  // 设置起始，结束圆角

        mInnerPaint = new Paint();  // 创建进度画笔
        mOuterPaint.setAntiAlias(true);  // 抗锯齿
        mInnerPaint.setColor(mInnerColor);  // 设置颜色
        mInnerPaint.setStrokeWidth(mBorderWidget);  // 设置圆弧宽度
        mInnerPaint.setStyle(Paint.Style.STROKE);  // 设置圆弧Style
        mInnerPaint.setStrokeCap(Paint.Cap.ROUND);  // 设置起始，结束圆角

        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);   // 设置抗锯齿
        mTextPaint.setDither(true);      // 设置放抖动
        mTextPaint.setTextSize(getTextSize());  // 设置文字的大小，就是xml设置的大小
        mTextPaint.setColor(Color.RED);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);

        // 画外圆弧
        // 问题：边缘显示不全   描边有宽度  mBorderWidget
        float half = mBorderWidget / 2;
        // 描边有宽度borderWidget，如果不重新算rectF，绘制就会显示不全。这里将整个图多绘制半个宽度后，就刚刚好了。
        @SuppressLint("DrawAllocation") RectF rectF = new RectF(half, half, getWidth() - half, getHeight() - half);
        // canvas.drawArc(rectF, mStartAngle, mEndAngle, false, mOuterPaint); // 这里如果是True的话，下面就是闭合的
        int center = getWidth()/2;
        canvas.drawCircle(center,center,center-half,mOuterPaint);  // 画一个360°的圆弧，或者画一个圆都行

        // 画内圆弧
        canvas.drawArc(rectF, mStartAngle, mEndAngle/100*mProgress, false, mInnerPaint);
        // canvas.drawArc(rectF, mStartAngle, mProgress, false, mInnerPaint);  // 第二种方法

        // 画文本
        mProgressText = mProgress + "%";
        // mProgressText = Math.round(mProgress / mEndAngle * 100) + "%";  // 第二种方法
        // 获取文字排版信息
        Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
        int baseLine = getHeight() / 2 + (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;  // 计算基线
        // 获取文本宽度
        float textWidget = mTextPaint.measureText(mProgressText);
        int dx = (int) (getWidth() / 2 - textWidget / 2);  // 控件的一半减去文字的一半，算出文字的初始绘制值
        canvas.drawText(mProgressText, dx, baseLine, mTextPaint);
    }

    public synchronized void setProgress(int progress) {
        this.mProgress = progress;
        //不断绘制 invalidate中会调用onDraw方法
        invalidate();
    }

    public synchronized void setAnimatorStep(int progress) {
        // 属性动画
        ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0,progress);  // 从0变化到1
        valueAnimator.setDuration(3000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(@NonNull ValueAnimator animation) {
                float currentStep = (float) animation.getAnimatedValue();
                setProgress((int) currentStep);
            }
        });
        valueAnimator.start();
    }
}

1.2.3 修改activity_main.xml

<!-- /CustomView/View5/app/src/main/res/layout/activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.example.view5.ProgressView
        android:layout_gravity="center"
        android:id="@+id/progress_view"
        android:background="@color/grey"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:text="Hello World!"
        android:textSize="40sp"
        app:outColor="@color/white"
        app:innerColor="@color/black"
        />

</LinearLayout>

1.2.4 修改MainActivity.java

// /CustomView/View5/app/src/main/java/com/example/view5/MainActivity.java
public class MainActivity extends AppCompatActivity {

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

        @SuppressLint({"MissingInflatedId", "LocalSuppress"}) final ProgressView progressView = (ProgressView) findViewById(R.id.progress_view);
        progressView.setAnimatorStep(100);
//        progressView.setAnimatorStep(360);  第二种方法
    }
}

1.2.5 效果展示

在这里插入图片描述

2. 仿58同城数据加载

2.1 思路

画三个图形，分别是正方形、三角形、圆形。然后每秒钟画其中一个。这里的正方形和圆形都有现存的方法可以调用，而三角形相对比较复杂，需要用到Path。
在这里插入图片描述

2.2 自定义View-仿58同城数据加载

2.2.1 添加attrs.xml

<!-- /CustomView/View5/app/src/main/res/values/attrs.xml -->
    ...
    <declare-styleable name="ShapeView">
        <attr name="squareColor" format="color"/>
        <attr name="triangleColor" format="color"/>
        <attr name="circleColor" format="color"/>
    </declare-styleable>

2.2.2 新建ShapeView继承View

// /CustomView/View5/app/src/main/java/com/example/view5/ShapeView.java
public class ShapeView extends View {
    private Paint mSquarePaint;
    private int mSquareColor = Color.RED;
    private Paint mTrianglePaint;
    private int mTriangleColor = Color.YELLOW;
    private Paint mCirclePaint;
    private int mCircleColor = Color.BLUE;
    private String mProgress = "";
    private Path mPath;
    private final String[] shape = {"Square","Triangle","Circle"};
    int currentIndex = 0;
    int aimIndex = 0;
    public ShapeView(Context context) {
        this(context, null);
    }

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

    public ShapeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ShapeView);
        mSquareColor = ta.getColor(R.styleable.ShapeView_squareColor, mSquareColor);
        mTriangleColor = ta.getColor(R.styleable.ShapeView_triangleColor, mTriangleColor);
        mCircleColor = ta.getColor(R.styleable.ShapeView_circleColor, mCircleColor);
        ta.recycle();

        mSquarePaint = new Paint();
        mSquarePaint.setAntiAlias(true); // 取消锯齿
        mSquarePaint.setStyle(Paint.Style.FILL);  // 实心，不设置其实默认也是实心
        mSquarePaint.setColor(mSquareColor);  // 设置颜色

        mTrianglePaint = new Paint();
        mTrianglePaint.setAntiAlias(true); // 取消锯齿
        mTrianglePaint.setColor(mTriangleColor);  // 设置颜色

        mCirclePaint = new Paint();
        mCirclePaint.setAntiAlias(true); // 取消锯齿
        mCirclePaint.setColor(mCircleColor);  // 设置颜色
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (Objects.equals(mProgress, "")) {return;}
        switch (mProgress){
            case "Square":
                canvas.drawRect(0,0,getWidth(),getHeight(),mSquarePaint);
                break;
            case "Triangle":
                float y = (float) (0.5 * Math.sqrt(3) * getHeight());
                if (mPath == null) {
                    // 添加if判断，不需要反复new Path()，减少开销
                    mPath = new Path();  // 通过路线来画，依次传入三个点的坐标，连起来。
                    mPath.moveTo(0, y);
                    mPath.lineTo(getWidth()/2, 0);
                    mPath.lineTo(getWidth(), y);
                    mPath.close();   // 路径闭合
                }
                canvas.drawPath(mPath, mTrianglePaint);
                break;
            case "Circle":
                int center = getWidth()/2;
                canvas.drawCircle(center,center,center,mCirclePaint);  // 画一个360°的圆弧，或者画一个圆都行
                break;
        }
    }

    public synchronized void setProgress(String progress) {
        this.mProgress = progress;
        //不断绘制 invalidate中会调用onDraw方法
        invalidate();
    }

    public synchronized void setAnimatorStep() {
        ScheduledExecutorService executorService = Executors.newSingleThreadScheduledExecutor();
        Runnable task = new Runnable() {
            @Override
            public void run() {
                setProgress(shape[currentIndex]);
                currentIndex = (currentIndex + 1) % shape.length; // 循环数组
                aimIndex++;
                // 数组处理完毕，关闭执行器
                if (aimIndex >= 100) {
                    // executorService.shutdown();
                }
            }
        };

        // 每秒执行一次任务
        executorService.scheduleAtFixedRate(task, 0, 1, TimeUnit.SECONDS);
    }
}

2.2.3 修改activity_main.xml

<!-- /CustomView/View5/app/src/main/res/layout/activity_main.xml -->
    ...
    <TextView
        android:layout_width="match_parent"
        android:layout_height="10dp" />

    <com.example.view5.ShapeView
        android:layout_gravity="center"
        android:id="@+id/shape_view"
        android:layout_width="200dp"
        android:layout_height="200dp" />

2.2.4 修改

// /CustomView/View5/app/src/main/java/com/example/view5/MainActivity.java
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        final ShapeView shapeView = findViewById(R.id.shape_view);
        shapeView.setAnimatorStep();
    }

2.2.5 效果展示

在这里插入图片描述

xunyan6234

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义View（5）玩转字体变色-进度条、形状切换

上几篇已经讲了自定义View即自定义View变色的基本使用，为了更熟悉自定义View的使用，上篇结尾有两个任务，这篇就来讲讲是怎么实现的，包括打造炫酷的进度条、仿58同城数据加载。
复制链接

扫一扫