Android实现指针刻度转盘(终点指针最长)

一. 先上个效果图,实现如图所示刻度转盘和2个文本的绘制,最后1个刻度绘制的比较长一些(后期会添加动画效果,未完待续…):
在这里插入图片描述

二. 话不多说,上代码,Timber可使用Log代替,也可根据自身需求将配置属性放到attrs.xml中去:

package com.landleaf.householdtype.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import androidx.annotation.Nullable;

import timber.log.Timber;

public class PanelTempCircle extends View {
    private static final String TAG = PanelTempCircle.class.getSimpleName();
    //#EFEFEF
    //#47C496
    private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    //画笔宽度,线段长度,最后一条大线条的长度 比其他线段长的长度
    private int strokeWidth = 7, lineLength = 40, maxLineLength = 10;

    //绘制文本距离圆
    private int txtMargin = 10;

    //中心点坐标
    private int centerX, centerY;

    //内圆半径,外圆半径
    private int innerRadius, outRadius;

    //绘制文本
    private String leftText = "0", rightText = "30";

    //绘制文本的字体大小
    private int textSize = 25;

    //背景 or 进度条颜色
    private int colorBackground = Color.parseColor("#EFEFEF");
    private int colorProgress = Color.parseColor("#18C8C7");
    private int colorText = Color.parseColor("#999999");

    float fullAngle = 180f;
    float cutAngle = 90f;

    //每个线段相隔的宽度
    private static final int perAngle = 6;

    private int startAngle = -12;

    public PanelTempCircle(Context context) {
        super(context);
        initPaint(context, null);
    }

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

    private void initPaint(Context context, AttributeSet attrs) {
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setTextSize(textSize);
        paint.setStrokeWidth(strokeWidth);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setColor(colorBackground);
    }

    public PanelTempCircle(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawCircle(startAngle, 60, canvas, paint);
    }

    private void drawCircle(float startAngle, float endAngle, Canvas canvas, Paint paint) {

        for (float i = startAngle; i <= fullAngle - startAngle; i = i + perAngle) {
            //-12.-6,0,6....180,186,192
            //得出坐标
            int startM, startN, endM, endN, startX, startY, endX, endY;
            int startPaintRadius = innerRadius;
            int endPaintRadius = outRadius;
            float currentAngle = i;
            if (i <= 0) {
                currentAngle = Math.abs(i);
            } else if (currentAngle > fullAngle) {
                currentAngle = i - fullAngle;
            }
            //当前进度=结束进度
            if (i == endAngle) {
                startPaintRadius = innerRadius - maxLineLength;
                endPaintRadius = outRadius + maxLineLength;
            }
            //起始点
            double angleSin = Math.sin(Math.PI * (Math.abs(currentAngle) / fullAngle));
            //起始点 高度 宽度
            startM = (int) (angleSin * startPaintRadius);
            startN = (int) Math.sqrt(Math.pow(startPaintRadius, 2) - Math.pow(startM, 2));
            //结束点 高度 宽度
            endM = (int) (angleSin * endPaintRadius);
            endN = (int) Math.sqrt(Math.pow(endPaintRadius, 2) - Math.pow(endM, 2));
//            Log.i(TAG, startM + "," + startN + "," + endM + "," + endN);
            //获得起始点和结束点的坐标
            if (i < 0) {
                //第三象限
                startX = centerX - startN;
                endX = centerX - endN;

                startY = centerY + startM;
                endY = centerY + endM;
            } else if (i > fullAngle) {
                //第二象限
                startX = centerX + startN;
                endX = centerX + endN;

                startY = centerY + startM;
                endY = centerY + endM;
            } else {
                if (i < cutAngle) {
                    //第四象限
                    startX = centerX - startN;
                    endX = centerX - endN;

                    startY = centerY - startM;
                    endY = centerY - endM;
                } else {
                    //第一象限
                    startX = centerX + startN;
                    endX = centerX + endN;

                    startY = centerY - startM;
                    endY = centerY - endM;
                }
            }
            //设置线条绘制颜色
            if (i <= endAngle) {
                paint.setColor(colorProgress);
            } else {
                paint.setColor(colorBackground);
            }
            canvas.drawLine(startX, startY, endX, endY, paint);
            //判断是否需要绘制文本
            if (i == startAngle) {
                int textWidth = getTextWidth(paint, leftText);
                paint.setColor(colorText);
                canvas.drawText(leftText, startX + textWidth + txtMargin, startY, paint);
                Timber.tag(TAG).i("绘制左侧文本:" + (startX + textWidth + txtMargin) + "," + startY);
            }
            if (i == fullAngle - startAngle) {
                int textWidth = getTextWidth(paint, rightText);
                paint.setColor(colorText);
                canvas.drawText(rightText, startX - textWidth - txtMargin, startY, paint);
                Timber.tag(TAG).i("绘制右侧文本:" + (startX - textWidth - txtMargin) + "," + startY);
            }
        }
    }

    public int getTextWidth(Paint paint, String str) {
        int iRet = 0;
        if (str != null && str.length() > 0) {
            int len = str.length();
            float[] widths = new float[len];
            paint.getTextWidths(str, widths);
            for (int j = 0; j < len; j++) {
                iRet += (int) Math.ceil(widths[j]);
            }
        }
        return iRet;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        innerRadius = (getMeasuredWidth() - lineLength * 2 - maxLineLength * 2) / 2;
        outRadius = lineLength + innerRadius;
        Timber.tag(TAG).i("内圈半径:" + innerRadius + ",外圈半径:" + outRadius);
        centerX = outRadius + maxLineLength;
        centerY = outRadius + maxLineLength;
        Timber.tag(TAG).i("中心坐标:(x=" + centerX + ",y=" + centerY + ")");

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if (heightMode == MeasureSpec.AT_MOST) {
            double angleSin = Math.sin(Math.PI * (Math.abs(startAngle) / fullAngle));
            int endPaintRadius = outRadius + maxLineLength;
            int height = (int) (endPaintRadius + angleSin * endPaintRadius);
            setMeasuredDimension(widthMeasureSpec, height);
        }
    }
}

三. xml中使用方式:
说明:主要申明宽度即可,高度会在代码中进行计算;

    <com.landleaf.householdtype.widget.PanelTempCircle
        android:id="@+id/mptc_set_temp"
        android:layout_width="270dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/tvHumidity"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.3" />
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值