自定义圆形进度条跟随logo及数字进度

想说最近公司在出一个设计，需要绘制一个圆形进度条，还得要有数字进度，还要求要有动画，当时看到这个，讲真，我是懵逼的。其实之前很少接触到View的绘制这一块，而且很多时候都是利用人家写好的框架，自己直接嵌套使用就OK了，但是我们公司这个，应该是新颖的进度。我没办法找到一模一样的进度条，无奈之下，只好自己来进行绘制了。

先给你们看看我们的设计图：

对，就是你们看到的这样，这个进度条要由四个部分组成：圆弧区域代表进度、水滴图代表进度的结尾、电量图片作为文字的背景，而文字自然而然就代表着我们的实际进度的数值嘛。

拿着这个图，我就开始抠脑壳了，还挺麻烦的，真心的。

下面和大家一起分享一下我的思路好了。

首先就是绘制圆弧的时候，这个比较简单，只要你找到圆心，就不难。但是要注意的是，我们在绘制View的时候，默认的方向是3点钟，顺时针旋转，你如果要使顶点作为你画圆弧的起点，就需要调整一下角度。我的做法是将我的坐标系旋转了270°。此时画圆弧的角度就 = 360*你的进度百分比。

其次，是画水滴。我想过好多种方法，最开始朋友给我的意见是让我直接算坐标，根据角度，半径，其实就可以算出水滴的坐标，但是我觉得那个样子其实是有点不正确的，至少我实践过程中是存在很大的误差的。而我的解决办法是，旋转坐标系。将坐标系再次旋转到圆弧的结束位置，我们就只需要算x和y轴的距离就可以画我们的水滴。

最最困扰我的，其实是画进度值。

我首先想到的办法是直接在我的水滴后面画，因为其实此时的坐标系是经过改变了的，对吧？但是有个问题是什么：你的进度值啊什么的，此时不在水平线上，它会沿着你当前的坐标系画下去。而且，当角度大于了180之后，旋转过去，字体是倒立的。所以这个方法是不可行的！

然后，我想到的是平移、旋转我的坐标系。

画的有点丑，不要介意，左边的交点处就是我们此时水滴的位置哈，假设，我们的坐标系就要从右边那个样子变成左边这个样子才得行，平移很好说，因为我们知道水滴的位置，但是旋转的话，就需要我们求角度，在我分析之后，发现 >180 和<180 它们旋转的角度是有差异的，你们可以去画画就知道了。好，我们就算这个样子哈，平移旋转之后，就达到了现在这种效果：

其实很多都完善了你们可以看到，有一个问题是啥子喃？我们的字体还是倒立的是不是？而且这种麻烦的是啥子，你没得办法旋转字啊！！字是由画布canvas画出来的，所以我们咋个办？想了一下午，最后咋个做的喃，在画字之前，我们是把字的背景图画好了的，再次平移、旋转我们的坐标系。是不是觉得很神，我自己都觉得神的很 - -。我们此时把我们的坐标系平移到我们的背景那个位置，旋转的话就直接再旋转个180度，它就翻回来了。所以最后就成了：

可能我的字和图的间距还没有调整好，但是画成这个样子真心的，我自己都佩服我自己了。哈哈哈。多多练习才是好的。在这里很感谢，很多先例的朋友们的博客给我的启发，特别是我看到了一个温度计的绘制。感触颇多。http://www.developersite.org/904-160145-android大家感兴趣可以去看看。

CircleProgress类：

public class CircleProgress extends View {private static final String TAG = "CircleProgress";private Context mContext;//默认大小
    private int mDefaultSize;//是否开启抗锯齿
    private boolean antiAlias;//绘制提示
    private TextPaint mHintPaint;private CharSequence mHint;private int mHintColor;private float mHintSize;private float mHintOffset;//绘制单位
    private TextPaint mUnitPaint;private CharSequence mUnit;private int mUnitColor;private float mUnitSize;private float mUnitOffset;//绘制数值
    private TextPaint mValuePaint;private float mValue;private float mMaxValue;private float mValueOffset;private int mPrecision;private String mPrecisionFormat;private int mValueColor;private float mValueSize;//绘制圆弧
    private Paint mArcPaint;private float mArcWidth;private float mStartAngle, mSweepAngle;private RectF mRectF;private RectF mOuterRectF;//渐变的颜色是360度，如果只显示270，那么则会缺失部分颜色
    private SweepGradient mSweepGradient;//当前进度，[0.0f,1.0f]
    private float mPercent;//动画时间
    private long mAnimTime;//属性动画
    private ValueAnimator mAnimator;//绘制背景圆弧
    private Paint mBgArcPaint;private int mBgArcColor;private float mBgArcWidth;//圆心坐标，半径
    private Point mCenterPoint;private float mRadius;private float mTextOffsetPercentInRadius;public CircleProgress(Context context, AttributeSet attrs) {super(context, attrs);init(context, attrs);}private void init(Context context, AttributeSet attrs) {mContext = context;mDefaultSize = MiscUtil.dipToPx(mContext, Constant.DEFAULT_SIZE);mAnimator = new ValueAnimator();mRectF = new RectF();mOuterRectF = new RectF();mCenterPoint = new Point();initAttrs(attrs);initPaint();setValue(mValue);}private void initAttrs(AttributeSet attrs) {TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar);antiAlias = typedArray.getBoolean(R.styleable.CircleProgressBar_antiAlias, Constant.ANTI_ALIAS);mHint = typedArray.getString(R.styleable.CircleProgressBar_hint);mHintColor = typedArray.getColor(R.styleable.CircleProgressBar_hintColor, Color.BLACK);mHintSize = typedArray.getDimension(R.styleable.CircleProgressBar_hintSize, Constant.DEFAULT_HINT_SIZE);mValue = typedArray.getFloat(R.styleable.CircleProgressBar_value, Constant.DEFAULT_VALUE);mMaxValue = typedArray.getFloat(R.styleable.CircleProgressBar_maxValue, Constant.DEFAULT_MAX_VALUE);//内容数值精度格式
        mPrecision = typedArray.getInt(R.styleable.CircleProgressBar_precision, 0);mPrecisionFormat = MiscUtil.getPrecisionFormat(mPrecision);mValueColor = typedArray.getColor(R.styleable.CircleProgressBar_valueColor, Color.BLACK);mValueSize = typedArray.getDimension(R.styleable.CircleProgressBar_valueSize, Constant.DEFAULT_VALUE_SIZE);mUnit = typedArray.getString(R.styleable.CircleProgressBar_unit);mUnitColor = typedArray.getColor(R.styleable.CircleProgressBar_unitColor, Color.BLACK);mUnitSize = typedArray.getDimension(R.styleable.CircleProgressBar_unitSize, Constant.DEFAULT_UNIT_SIZE);mArcWidth = typedArray.getDimension(R.styleable.CircleProgressBar_arcWidth, Constant.DEFAULT_ARC_WIDTH);mStartAngle = typedArray.getFloat(R.styleable.CircleProgressBar_startAngle, Constant.DEFAULT_START_ANGLE);mSweepAngle = typedArray.getFloat(R.styleable.CircleProgressBar_sweepAngle, Constant.DEFAULT_SWEEP_ANGLE);mBgArcColor = typedArray.getColor(R.styleable.CircleProgressBar_bgArcColor, Color.WHITE);mBgArcWidth = typedArray.getDimension(R.styleable.CircleProgressBar_bgArcWidth, Constant.DEFAULT_ARC_WIDTH);mTextOffsetPercentInRadius = typedArray.getFloat(R.styleable.CircleProgressBar_textOffsetPercentInRadius, 0.33f);//mPercent = typedArray.getFloat(R.styleable.CircleProgressBar_percent, 0);
        mAnimTime = typedArray.getInt(R.styleable.CircleProgressBar_animTime, Constant.DEFAULT_ANIM_TIME);int gradientArcColors = typedArray.getResourceId(R.styleable.CircleProgressBar_arcColors, 0);typedArray.recycle();}private void initPaint() {mHintPaint = new TextPaint();// 设置抗锯齿,会消耗较大资源，绘制图形速度会变慢。
        mHintPaint.setAntiAlias(antiAlias);// 设置绘制文字大小
        mHintPaint.setTextSize(mHintSize);// 设置画笔颜色
        mHintPaint.setColor(mHintColor);// 从中间向两边绘制，不需要再次计算文字
        mHintPaint.setTextAlign(Paint.Align.CENTER);mValuePaint = new TextPaint();mValuePaint.setAntiAlias(antiAlias);mValuePaint.setTextSize(mValueSize);mValuePaint.setColor(mValueColor);// 设置Typeface对象，即字体风格，包括粗体，斜体以及衬线体，非衬线体等
        mValuePaint.setTypeface(Typeface.DEFAULT_BOLD);mValuePaint.setTextAlign(Paint.Align.CENTER);mUnitPaint = new TextPaint();mUnitPaint.setAntiAlias(antiAlias);mUnitPaint.setTextSize(mUnitSize);mUnitPaint.setColor(mUnitColor);mUnitPaint.setTextAlign(Paint.Align.CENTER);mArcPaint = new Paint();mArcPaint.setAntiAlias(antiAlias);// 设置画笔的样式，为FILL，FILL_OR_STROKE，或STROKE
        mArcPaint.setStyle(Paint.Style.STROKE);mArcPaint.setColor(Color.BLUE);// 设置画笔粗细
        mArcPaint.setStrokeWidth(mArcWidth);// 当画笔样式为STROKE或FILL_OR_STROKE时，设置笔刷的图形样式，如圆形样式
        // Cap.ROUND,或方形样式 Cap.SQUARE
        mArcPaint.setStrokeCap(Paint.Cap.ROUND);mBgArcPaint = new Paint();mBgArcPaint.setAntiAlias(antiAlias);mBgArcPaint.setColor(mBgArcColor);mBgArcPaint.setStyle(Paint.Style.STROKE);mBgArcPaint.setStrokeWidth(mBgArcWidth);mBgArcPaint.setStrokeCap(Paint.Cap.ROUND);}@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);setMeasuredDimension(MiscUtil.measure(widthMeasureSpec, mDefaultSize),MiscUtil.measure(heightMeasureSpec, mDefaultSize));}@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);Log.d(TAG, "onSizeChanged: w = " + w + "; h = " + h + "; oldw = " + oldw + "; oldh = " + oldh);//求圆弧和背景圆弧的最大宽度
        float maxArcWidth = Math.max(mArcWidth, mBgArcWidth);//求最小值作为实际值
        int minSize = Math.min(w - getPaddingLeft() - getPaddingRight() - 2 * (int) maxArcWidth,h - getPaddingTop() - getPaddingBottom() - 2 * (int) maxArcWidth);//减去圆弧的宽度，否则会造成部分圆弧绘制在外围
        mRadius = minSize / 4;//获取圆的相关参数
        mCenterPoint.x = w / 2;mCenterPoint.y = h / 2;//绘制圆弧的边界
        mRectF.left = mCenterPoint.x - mRadius - maxArcWidth / 2;mRectF.top = mCenterPoint.y - mRadius - maxArcWidth / 2;mRectF.right = mCenterPoint.x + mRadius + maxArcWidth / 2;mRectF.bottom = mCenterPoint.y + mRadius + maxArcWidth / 2;//绘制圆弧的边界
        mOuterRectF.left = maxArcWidth / 2;mOuterRectF.top = maxArcWidth / 2;mOuterRectF.right = minSize - maxArcWidth / 2;mOuterRectF.bottom = minSize - maxArcWidth / 2;//计算文字绘制时的 baseline
        //由于文字的baseline、descent、ascent等属性只与textSize和typeface有关，所以此时可以直接计算
        //若value、hint、unit由同一个画笔绘制或者需要动态设置文字的大小，则需要在每次更新后再次计算
        mValueOffset = mCenterPoint.y + getBaselineOffsetFromY(mValuePaint);mHintOffset = mCenterPoint.y - mRadius * mTextOffsetPercentInRadius + getBaselineOffsetFromY(mHintPaint);mUnitOffset = mCenterPoint.y + mRadius * mTextOffsetPercentInRadius + getBaselineOffsetFromY(mUnitPaint);Log.d(TAG, "onSizeChanged: 控件大小 = " + "(" + w + ", " + h + ")"
                + "圆心坐标 = " + mCenterPoint.toString()+ ";圆半径 = " + mRadius
                + ";圆的外接矩形 = " + mRectF.toString());}private float getBaselineOffsetFromY(Paint paint) {return MiscUtil.measureTextHeight(paint) / 2;}@Override
    protected void onDraw(Canvas canvas) {super.onDraw(canvas);//drawText(canvas);
        drawArc(canvas);}/**
     * 绘制内容文字
     *
     * @param canvas
     */
    private void drawText(Canvas canvas) {// 计算文字宽度，由于Paint已设置为居中绘制，故此处不需要重新计算
        // float textWidth = mValuePaint.measureText(mValue.toString());
        // float x = mCenterPoint.x - textWidth / 2;
        canvas.drawText(String.format(mPrecisionFormat, mValue), mCenterPoint.x, mValueOffset, mValuePaint);if (mHint != null) {canvas.drawText(mHint.toString(), mCenterPoint.x, mHintOffset, mHintPaint);}if (mUnit != null) {canvas.drawText(mUnit.toString(), mCenterPoint.x, mUnitOffset, mUnitPaint);}}private void drawArc(Canvas canvas) {// 绘制背景圆弧
        // 从进度圆弧结束的地方开始重新绘制，优化性能
        canvas.save();float currentAngle = mSweepAngle * mPercent;Bitmap dot = BitmapFactory.decodeResource(getResources(), R.drawable.dot);// 取得想要缩放的matrix参数
        Matrix matrix = new Matrix();matrix.postScale(((float) MiscUtil.dipToPx(getContext(), dot.getWidth())) / dot.getWidth(), ((float) MiscUtil.dipToPx(getContext(), dot.getHeight())) / dot.getHeight());Bitmap newDot = Bitmap.createBitmap(dot, 0, 0, dot.getWidth(), dot.getHeight(), matrix, true);canvas.drawBitmap(newDot, mCenterPoint.x - newDot.getWidth() / 2, mCenterPoint.y - newDot.getHeight() / 2, mArcPaint);canvas.rotate(mStartAngle, mCenterPoint.x, mCenterPoint.y);canvas.drawArc(mRectF, 0, currentAngle, false, mArcPaint);canvas.translate(mCenterPoint.x, mCenterPoint.y);canvas.rotate(currentAngle);if (currentAngle != 0) {// 取得想要缩放的matrix参数
            Matrix matrix1 = new Matrix();matrix1.postScale(((float) MiscUtil.dipToPx(getContext(), dot.getWidth() / 3)) / dot.getWidth(), ((float) MiscUtil.dipToPx(getContext(), dot.getHeight() / 3)) / dot.getHeight());matrix1.postRotate(90 - currentAngle);// 得到新的图片
            Bitmap newDot1 = Bitmap.createBitmap(dot, 0, 0, dot.getWidth(), dot.getHeight(), matrix1, true);Bitmap sch = BitmapFactory.decodeResource(getResources(), R.drawable.schedule);Matrix matrix2 = new Matrix();matrix2.postScale((float) MiscUtil.dipToPx(getContext(), sch.getWidth() / 3.5f) / sch.getWidth(), (float) MiscUtil.dipToPx(getContext(), sch.getHeight() / 3) / sch.getHeight());Bitmap newSc = Bitmap.createBitmap(sch, 0, 0, sch.getWidth(), sch.getHeight(), matrix2, true);canvas.drawBitmap(newDot1, mRadius - newDot1.getWidth() / 2, -newDot1.getHeight() / 2, mArcPaint);canvas.translate(mRadius - newDot1.getWidth() / 2, -newDot1.getHeight() / 2);if (currentAngle < 180) {canvas.rotate(90 - currentAngle);canvas.drawBitmap(newSc, currentAngle >= 90 ? newDot1.getWidth() / 2 : newDot1.getWidth(), currentAngle >= 90 ? newDot1.getHeight() * 2 / 3 : -newDot1.getHeight() * 2 / 3, mArcPaint);canvas.drawText(String.format(mPrecisionFormat, mValue) + "%", (currentAngle >= 90 ? newDot1.getWidth() / 2 : newDot1.getWidth()) + newSc.getWidth() / 2 + mArcWidth, newSc.getHeight() + (currentAngle >= 90 ? newDot1.getHeight() / 2 : -newDot1.getHeight() + mArcWidth), mValuePaint);} else if (currentAngle > 180 && currentAngle <= 270) {canvas.rotate(270 - currentAngle);canvas.drawBitmap(newSc, newDot1.getWidth(), 0, mArcPaint);canvas.translate(newDot1.getWidth(), 0);canvas.rotate(180);canvas.drawText(String.format(mPrecisionFormat, mValue) + "%", -newSc.getWidth() / 2, -newSc.getHeight() / 3, mValuePaint);//canvas.drawText(String.format(mPrecisionFormat, mValue) + "%", newDot1.getWidth() + newSc.getWidth() / 2 + mArcWidth, newSc.getHeight() * 2 / 3, mValuePaint);
            } else {canvas.rotate(270 - currentAngle);canvas.drawBitmap(newSc, currentAngle > 270 ? newDot1.getWidth() / 2 : -newDot1.getWidth() / 2, currentAngle > 270 ? newDot1.getHeight() / 2 : -newSc.getWidth(), mArcPaint);canvas.translate(newDot1.getWidth(), 0);canvas.rotate(180);canvas.drawText(String.format(mPrecisionFormat, mValue) + "%", -newSc.getWidth() / 3, -newSc.getHeight(), mValuePaint);//canvas.drawText(String.format(mPrecisionFormat, mValue) + "%", (currentAngle > 270 ? newDot1.getWidth() / 2 : -newDot1.getWidth()) + newSc.getWidth() / 2 + mArcWidth, (currentAngle > 270 ? newDot1.getHeight() / 3 : -newDot.getHeight() / 3) + newSc.getHeight(), mValuePaint);
            }}canvas.restore();}/**
     * 更新圆弧画笔
     */
    private void updateArcPaint() {// 设置渐变
        int[] mGradientColors = {Color.GREEN};mSweepGradient = new SweepGradient(mCenterPoint.x, mCenterPoint.y, mGradientColors, null);mArcPaint.setShader(mSweepGradient);}public boolean isAntiAlias() {return antiAlias;}public CharSequence getHint() {return mHint;}public void setHint(CharSequence hint) {mHint = hint;}public CharSequence getUnit() {return mUnit;}public void setUnit(CharSequence unit) {mUnit = unit;}public float getValue() {return mValue;}/**
     * 设置当前值
     *
     * @param value
     */
    public void setValue(float value) {if (value > mMaxValue) {value = mMaxValue;}float start = mPercent;float end = value / mMaxValue;startAnimator(start, end, mAnimTime);}private void startAnimator(float start, float end, long animTime) {mAnimator = ValueAnimator.ofFloat(start, end);mAnimator.setDuration(animTime);mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Override
            public void onAnimationUpdate(ValueAnimator animation) {mPercent = (float) animation.getAnimatedValue();mValue = mPercent * mMaxValue;if (BuildConfig.DEBUG) {Log.d(TAG, "onAnimationUpdate: percent = " + mPercent
                            + ";currentAngle = " + (mSweepAngle * mPercent)+ ";value = " + mValue);}invalidate();}});mAnimator.start();}/**
     * 获取最大值
     *
     * @return
     */
    public float getMaxValue() {return mMaxValue;}/**
     * 设置最大值
     *
     * @param maxValue
     */
    public void setMaxValue(float maxValue) {mMaxValue = maxValue;}/**
     * 获取精度
     *
     * @return
     */
    public int getPrecision() {return mPrecision;}public void setPrecision(int precision) {mPrecision = precision;mPrecisionFormat = MiscUtil.getPrecisionFormat(precision);}/**
     * 设置渐变
     *
     * @param gradientColors
     */
    public void setGradientColors(int[] gradientColors) {updateArcPaint();}public long getAnimTime() {return mAnimTime;}public void setAnimTime(long animTime) {mAnimTime = animTime;}/**
     * 重置
     */
    public void reset() {startAnimator(mPercent, 0.0f, 1000L);}@Override
    protected void onDetachedFromWindow() {super.onDetachedFromWindow();//释放资源
    }
}

attrs:

<?xml version="1.0" encoding="utf-8"?>
<resources><!-- 是否开启抗锯齿 -->
    <attr name="antiAlias" format="boolean" /><!-- 圆弧起始角度，3点钟方向为0，顺时针递增，小于0或大于360进行取余 -->
    <attr name="startAngle" format="float" /><!-- 圆弧度数 -->
    <attr name="sweepAngle" format="float" /><!-- 设置动画时间 -->
    <attr name="animTime" format="integer" /><!-- 绘制内容的数值 -->
    <attr name="maxValue" format="float" /><attr name="value" format="float" /><!-- 绘制内容的单位 -->
    <attr name="unit" format="string|reference" /><attr name="unitSize" format="dimension" /><attr name="unitColor" format="color|reference" /><!-- 绘制内容相应的提示语 -->
    <attr name="hint" format="string|reference" /><attr name="hintSize" format="dimension" /><attr name="hintColor" format="color|reference" /><!-- 精度，默认为0 -->
    <attr name="precision" format="integer" /><attr name="valueSize" format="dimension" /><attr name="valueColor" format="color|reference" /><!-- 圆弧颜色，设置多个可实现渐变 -->
    <attr name="arcColor1" format="color|reference" /><attr name="arcColor2" format="color|reference" /><attr name="arcColor3" format="color|reference" /><!-- 背景圆弧颜色，默认白色 -->
    <attr name="bgArcColor" format="color|reference" /><!-- 圆弧宽度 -->
    <attr name="arcWidth" format="dimension" /><!-- 圆弧颜色， -->
    <attr name="arcColors" format="color|reference" /><!-- 文字的偏移量。相对于圆半径而言，默认三分之一 -->
    <attr name="textOffsetPercentInRadius" format="float" /><!-- 圆形进度条 -->
    <declare-styleable name="CircleProgressBar"><attr name="antiAlias" /><attr name="startAngle" /><attr name="sweepAngle" /><attr name="animTime" /><attr name="maxValue" /><attr name="value" /><attr name="precision" /><attr name="valueSize" /><attr name="valueColor" /><attr name="textOffsetPercentInRadius" /><!-- 绘制内容相应的提示语 -->
        <attr name="hint" /><attr name="hintSize" /><attr name="hintColor" /><!-- 绘制内容的单位 -->
        <attr name="unit" /><attr name="unitSize" /><attr name="unitColor" /><!-- 圆弧宽度 -->
        <attr name="arcWidth" /><attr name="arcColors" /><!-- 背景圆弧颜色 -->
        <attr name="bgArcColor" /><!-- 背景圆弧宽度 -->
        <attr name="bgArcWidth" format="dimension" /></declare-styleable>
</resources>

MisUtil:

public class MiscUtil {private static final String TAG = "CircleProgress";/**
     * 测量 View
     *
     * @param measureSpec
     * @param defaultSize View 的默认大小
     * @return
     */
    public static int measure(int measureSpec, int defaultSize) {int result = defaultSize;int specMode = View.MeasureSpec.getMode(measureSpec);int specSize = View.MeasureSpec.getSize(measureSpec);if (specMode == View.MeasureSpec.EXACTLY) {result = specSize;} else if (specMode == View.MeasureSpec.AT_MOST) {result = Math.min(result, specSize);}return result;}/**
     * dip 转换成px
     *
     * @param dip
     * @return
     */
    public static int dipToPx(Context context, float dip) {float density = context.getResources().getDisplayMetrics().density;return (int) (dip * density + 0.5f * (dip >= 0 ? 1 : -1));}public static float getDensity(Context context) {Log.i(TAG, "dipToPx: ===" + context.getResources().getDisplayMetrics().density);return context.getResources().getDisplayMetrics().density;}/**
     * 获取数值精度格式化字符串
     *
     * @param precision
     * @return
     */
    public static String getPrecisionFormat(int precision) {return "%." + precision + "f";}/**
     * 反转数组
     *
     * @param arrays
     * @param <T>
     * @return
     */
    public static <T> T[] reverse(T[] arrays) {if (arrays == null) {return null;}int length = arrays.length;for (int i = 0; i < length / 2; i++) {T t = arrays[i];arrays[i] = arrays[length - i - 1];arrays[length - i - 1] = t;}return arrays;}/**
     * 测量文字高度
     *
     * @param paint
     * @return
     */
    public static float measureTextHeight(Paint paint) {Paint.FontMetrics fontMetrics = paint.getFontMetrics();return (Math.abs(fontMetrics.ascent) - fontMetrics.descent);}
}

自定义圆形进度条跟随logo及数字进度相关推荐

android圆形点击效果,Android 三种方式实现自定义圆形页面加载中效果的进度条
[实例简介] Android 三种方式实现自定义圆形页面加载中效果的进度条 [实例截图] [核心代码] ad376a86-a9aa-49bc-8cea-321bcff2c0c3 └── AnimRou ...
【正点原子I.MX6U-MINI】修改开机内核Logo和进度条界面Logo（一）
参考:[正点原子]I.MX6U 修改开机进度条及内核logo参考手册V1.0.pdf 1.修改进度条其及其logo 1 下载psplash源码可以在网上下载 psplash 源码,正点原子也提供了修 ...
android 进度条图标方形_Android - 条纹进度条实现，调整view宽度仿进度条
相关代码请参阅: https://github.com/RustFisher/aboutView/blob/master/app/src/main/java/com/rust/aboutview/ac ...
java 进度条 swt_SWT综合实例+SWT进度条对话框代码
说明:SWT综合实例实现了一个QQ的简化界面,基本上用到了SWT的各方面; 使用SWT要先导入一个SWT的dll文件,本例导入的dll文件名为:swt-win32-3139.dll QQ.java源文 ...
vue实现进度条隐藏_实现带有进度条的Vue延迟加载
下面Vue.js栏目给大家介绍一下给Vue的惰性加载添加进度条的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面 ...
php上传进度条问题,php上传进度条
分页:用于多条数据展示时可设置分页展示,每页展示固定数据条数. 高级选项树:树形结构选择设置.适用于要展示的数据为树形结构. 步骤条:步骤进度条.可设置总步骤数和每一步的展示名称. 时间轴:一般绑定 ...
进度条上的起伏_进度条（ProgressBar）的功能与用法
进度条也是UI界面中一种非常实用的组件,通常用于向用户显示某个耗时操作完成的的百分比.进度条可以动态的显示进度,因此避免长时间的执行某个耗时的操作,让用户感觉程序失去了响应,从而更好的提高用户界面的友 ...
Android自定义View,Android炫酷的音乐频谱进度条,变化自如的音乐进度条
前段时间,公司项目有个UI需求,要做一个这么的东西 : 一个仿音乐频率谱线进度条(这是什么鬼?),那好,就先将这个控件命名为:音乐频谱进度条:) 废话不多说,先来看一下效果图: 附上在GitHub上的 ...
自定义Seebar进度条、进度条背景颜色，更换进度滑动icon。
1.先上效果图 2.自定义Seebar进度条.进度条背景颜色在drawable中新建文件SeeBar.xml,如下 <layer-list xmlns:android="http:/ ...

自定义圆形进度条跟随logo及数字进度

自定义圆形进度条跟随logo及数字进度相关推荐

最新文章

热门文章