Android自定义View——使用贝塞尔曲线实现流量进度条

最新推荐文章于 2022-12-09 16:06:21 发布
最新推荐文章于 2022-12-09 16:06:21 发布
阅读量1.5k 收藏 4
点赞数 1
分类专栏： Android 文章标签： android 控件 自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25193681/article/details/51791421
版权

今天就聊聊自定义View里面的知识点

第一次写带图片的博客，多少还是有点紧张，效果不好，请将就着看，前面的图是今天要写的控件的效果图，元素不多，分别是一个按钮和一个自定义的控件。

在此以前，我看过许多的书，比如《Android群英传》、《第一行代码》等，也看了很多大神的博客，但是即便是这样，当我看到这么多代码的时候，一直都没有真正的动手去敲过这些代码，以至于我总是觉得自定义View是一个多么高深莫测的技术，我们这些小白是难以触及的，但是当昨晚看了一篇鸡汤之后，觉得人还是要学会专注，要耐得住寂寞，要沉得住气。所以在未来的几天，我也会持续的更新自己的博客，希望能够得到大家的监督，也希望能够一起成长。

一般来说，不到迫不得已，还是不要去自定义自己的控件，毕竟现在Android API已经给我提供了功能这么强大的控件了，而且你也能够发现，就算是这么强大的谷歌，很多控件也还是有自己的bug，更何况我们自己写的控件，当然了，通过自定义控件，来加深我们对Android系统的控件的了解，这也是进阶的一个好方法。好了，废话我先说到这里，下面开始今天的主题。

贝塞尔曲线这个话题，很多大神的文章都有涉及，在郭神的微信公众号里面专门有一篇文章讲到了：http://mp.weixin.qq.com/s?__biz=MzA5MzI3NjE2MA==&mid=2650236243&idx=1&sn=00f003c809b1e3a3e5e7cb372d3ec970&scene=0#wechat_redirect ，所以我这里就不谈这个了。下面就开始进入编码阶段

新建一个Class文件，命名为MyLineView，让它继承View，实现它的三个构造函数，紧接着初始化一些画笔、Path，圆等数据。代码如下：
1.定义变量

    private Paint mPaint, mPaint2;
    private Path mPath = new Path();
    protected int mViewWidth, mViewHeight;
    protected int mWidth, mHeight;
    private float r, rArc, x;
    private float percent = 0.5f;
    private RectF rectF;
    private PointF mPointF = new PointF(0, 0);

在构造函数里面初始化数据

    public MyLineView(Context context, AttributeSet attrs) {
        super(context, attrs);

        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(3);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setTextSize(100);

        mPaint2 = new Paint();
        mPaint2.setColor(Color.CYAN);
        mPaint2.setStrokeWidth(8);
        mPaint2.setStyle(Paint.Style.FILL);

    }

准备工作已经做好了，紧接着我们复写View的一个onSizeChanged()方法，故名思议，就是当控件的大小发生改变的时候调用。我们在这里对变量进行赋值，代码如下：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        /**控件的高宽*/
        mViewWidth = w;
        mViewHeight = h;
        /**与屏幕左边的距离和距离右边的距离*/
        mWidth = mViewWidth - getPaddingLeft() - getPaddingRight();
        mHeight = mViewHeight - getPaddingTop() - getPaddingBottom();
        /**定义半径*/
        r = Math.min(mWidth, mHeight) * 0.4f;
        rectF = new RectF(-r, -r, r, r);
    }

好了，这个时候的变量已经拥有值了，那可以开始写最重要的操作了，开始写onDraw();

    @Override
    protected void onDraw(Canvas canvas) {
        // super.onDraw(canvas);
        /**
         * 画曲线和外围的圆
         */
        canvas.translate(mViewWidth / 2, mViewHeight / 2);
        canvas.drawCircle(0, 0, r, mPaint);
        rArc = r * (1 - 2 * percent);
        double angle = Math.acos((double) rArc / r);
        x = r * (float) Math.sin(angle);
        mPath.addArc(rectF, 90 - (float) Math.toDegrees(angle),
                (float) Math.toDegrees(angle) * 2);
        mPath.moveTo(-x, rArc);
        mPath.rQuadTo(x / 2, -r / 8, x, 0);
        mPath.rQuadTo(x / 2, r / 8, x, 0);
        canvas.drawPath(mPath, mPaint2);
        mPath.rewind();
        /**
         * 画文字
         */
        NumberFormat numberFormat = NumberFormat.getPercentInstance();
        numberFormat.setMinimumFractionDigits(1);
        textCenter(new String[] { numberFormat.format(percent) }, mPaint,
                canvas, mPointF, Paint.Align.CENTER);
    }

文字的处理：

    /**
     * 多行文本居中、居右、居左
     * 
     * @param strings
     *            文本字符串列表
     * @param paint
     *            画笔
     * @param canvas
     *            画布
     * @param point
     *            点的坐标
     * @param align
     *            居中、居右、居左
     */
    protected void textCenter(String[] strings, Paint paint, Canvas canvas,
            PointF point, Paint.Align align) {
        paint.setTextAlign(align);
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float top = fontMetrics.top;
        float bottom = fontMetrics.bottom;
        int length = strings.length;
        float total = (length - 1) * (-top + bottom)
                + (-fontMetrics.ascent + fontMetrics.descent);
        float offset = total / 2 - bottom;
        for (int i = 0; i < length; i++) {
            float yAxis = -(length - i - 1) * (-top + bottom) + offset;
            canvas.drawText(strings[i], point.x, point.y + yAxis, paint);
        }
    }

好了，截止目前已经把控件写好了，但是作为一个控件，数据不可能固定不变，所以向外暴露一个方法，用于改变进度的大小；

    public void setProgress(float percent) {
        if (percent != 0) {
            this.percent = percent;
        } else {
            this.percent = 0;
        }
        /**重绘*/
        invalidate();
    }

好了全部流程都在这里了，最后再贴上全部的代码；

package com.example.view.weight;

import java.text.NumberFormat;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * 贝塞尔曲线
 * 
 * @author cheng
 * 
 */
public class MyLineView extends View {

    private Paint mPaint, mPaint2;
    private Path mPath = new Path();
    protected int mViewWidth, mViewHeight;
    protected int mWidth, mHeight;
    private float r, rArc, x;
    private float percent = 0.5f;
    private RectF rectF;
    private PointF mPointF = new PointF(0, 0);

    public MyLineView(Context context) {
        this(context, null);

    }

    public MyLineView(Context context, AttributeSet attrs) {
        super(context, attrs);

        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(3);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setTextSize(100);

        mPaint2 = new Paint();
        mPaint2.setColor(Color.CYAN);
        mPaint2.setStrokeWidth(8);
        mPaint2.setStyle(Paint.Style.FILL);

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mViewWidth = w;
        mViewHeight = h;

        mWidth = mViewWidth - getPaddingLeft() - getPaddingRight();
        mHeight = mViewHeight - getPaddingTop() - getPaddingBottom();

        r = Math.min(mWidth, mHeight) * 0.4f;
        rectF = new RectF(-r, -r, r, r);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // super.onDraw(canvas);
        /**
         * 画曲线和外围的圆
         */
        canvas.translate(mViewWidth / 2, mViewHeight / 2);
        canvas.drawCircle(0, 0, r, mPaint);
        rArc = r * (1 - 2 * percent);
        double angle = Math.acos((double) rArc / r);
        x = r * (float) Math.sin(angle);
        mPath.addArc(rectF, 90 - (float) Math.toDegrees(angle),
                (float) Math.toDegrees(angle) * 2);
        mPath.moveTo(-x, rArc);
        mPath.rQuadTo(x / 2, -r / 8, x, 0);
        mPath.rQuadTo(x / 2, r / 8, x, 0);
        canvas.drawPath(mPath, mPaint2);
        mPath.rewind();
        /**
         * 画文字
         */
        NumberFormat numberFormat = NumberFormat.getPercentInstance();
        numberFormat.setMinimumFractionDigits(1);
        textCenter(new String[] { numberFormat.format(percent) }, mPaint,
                canvas, mPointF, Paint.Align.CENTER);
    }

    /**
     * 多行文本居中、居右、居左
     * 
     * @param strings
     *            文本字符串列表
     * @param paint
     *            画笔
     * @param canvas
     *            画布
     * @param point
     *            点的坐标
     * @param align
     *            居中、居右、居左
     */
    protected void textCenter(String[] strings, Paint paint, Canvas canvas,
            PointF point, Paint.Align align) {
        paint.setTextAlign(align);
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float top = fontMetrics.top;
        float bottom = fontMetrics.bottom;
        int length = strings.length;
        float total = (length - 1) * (-top + bottom)
                + (-fontMetrics.ascent + fontMetrics.descent);
        float offset = total / 2 - bottom;
        for (int i = 0; i < length; i++) {
            float yAxis = -(length - i - 1) * (-top + bottom) + offset;
            canvas.drawText(strings[i], point.x, point.y + yAxis, paint);
        }
    }

    public void setProgress(float percent) {
        if (percent != 0) {
            this.percent = percent;
        } else {
            this.percent = 0;
        }
        invalidate();
    }
}

布局里面的代码：

    <com.example.view.weight.MyLineView
        android:id="@+id/view_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center" />

完成了，在最后感谢
https://github.com/Idtk/Blog/blob/master/Blog/6%E3%80%81Bezier.md

小瓶盖_tl
关注
专栏目录
android 画爱心进度条_Android自定义View系列（一）——打造一个爱心进度条
weixin_32820805的博客
01-26 382
写作原因：Android进阶过程中有一个绕不开的话题——自定义View。这一块是安卓程序员更好地实现功能自主化必须迈出的一步。下面这个系列博主将通过实现几个例子来认识安卓自定义View的方法。从自定义View到自定义ViewGroup，View事件处理再到View深入分析(这一章如果水平未到位可能今后再补充)，其中会涉及一些小的知识，包括Canvas的使用、动画等等。系列第一篇文章通过绘制一个心形...
Android-自定义View之圆形进度条总结
I_wait_for_you的专栏
03-03 677
最近撸了一个圆形进度条的开源项目，算是第一次完完整整的使用自定义 View 。在此对项目开发思路做个小结，欢迎大家 Star 和 Fork。该项目总共实现了三种圆形进度条效果:圆形进度条、带刻度的圆形进度条已经水波纹进度条
Android自定义View——贝塞尔曲线实现水波纹进度球
12-25
Android自定义View——贝塞尔曲线实现水波纹进度球 Android自定义View——贝塞尔曲线实现水波纹进度球
<font color="red">[置顶]</font>
weixin_33842328的博客
03-31 556
效果图 效果图中我们实现了一个简单的随手指滑动的二阶贝塞尔曲线，还有一个复杂点的，穿越所有已知点的贝塞尔曲线。学会使用贝塞尔曲线后可以实现例如QQ红点滑动删除啦，360动态球啦，bulabulabula~ 什么是贝塞尔曲线？ 贝赛尔曲线（Bézier曲线）是电脑图形学中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就...
从 0 到 1Android 自定义 View（四）贝塞尔曲线
weixin_34248849的博客
06-11 201
Android.jpg 前言 扯来扯去，前面三篇自定义 View 文章，终于扯完了一些知识点，有些枯燥，所以我也是讲下核心点，没有细分析，主要是让各位有点印象和了解。这篇终于是实践，敲代码的了，因为工作原因，这篇拖的比较久，不过这系列会一直更新下去的，会把我工作中用到的自定义 View 也会加上去。好了，回归正原题，说到自定义 View ，似乎都离不开贝塞尔曲线，因此，第一篇实践就是与贝塞尔曲线...
CAShapeLayer
XuShuangHui
08-13 329
初次接触CAShapeLayer和贝塞尔曲线，看了下极客学院的视频。对初学者来说感觉还不错。今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法，创建的简单的圆形进度条的教程 先简单的介绍下CAShapeLayer 1,CAShapeLayer继承自CALayer，可使用CALayer的所有属性 2,CAShapeLayer需要和贝塞尔曲线配合使用才有意义。 Shape：形状
Android自定义view进阶-- 神奇的贝塞尔曲线
matangtang的博客
05-19 767
转载请注明出处：http://blog.csdn.NET/wingichoy/article/details/50492828 今天给大家介绍一个非常神奇的曲线，贝塞尔曲线。相信大家之前都有耳闻。 很久之前就久闻该线大名，但是一直不是很了解，在经过一番谷歌之后，有了初步的概念：三点确定一条曲线：起点，终点，辅助点。 三个点的基本关系如下： 当初看这图我也看了
Android自定义View系列（一）——打造一个爱心进度条
RoadToGeek技术小栈
07-22 1600
写作原因：Android进阶过程中有一个绕不开的话题——自定义View。这一块是安卓程序员更好地实现功能自主化必须迈出的一步。下面这个系列博主将通过实现几个例子来认识安卓自定义View的方法。从自定义View到自定义ViewGroup，View事件处理再到View深入分析（这一章如果水平未到位可能今后再补充），其中会涉及一些小的知识，包括Canvas的使用、动画等等。系列第一篇文章通过绘制一个心形进
Android知识总结——Path常用方法解析
AnliaLee的博客
11-17 2277
开发过程中很容易忘记一些API的使用方法，网上搜索或者在源码里找也很难短时间内筛选出自己需要的，遂自己将这些知识总结一番
Android贝塞尔曲线运用-圆形水波进度
jhxlx的博客
09-20 1760
上此讲了用贝塞尔曲线去做水波显示动画，在最后说了要实现一个圆形水波进度条，那这一篇就说下怎么实现一个圆形水波进度条，先上个图看看效果要是想这个效果需要掌握上篇说的那些东西外，还需要知道canvas的裁剪知识范围裁剪canvas.clipRect()；裁剪出来一个矩形范围 canvas.clipRect(getWidth()/2-200,getHeight()/2-200,getWidth()/2+2
Android自定义View——贝塞尔曲线实现水波纹效果
11-09
Android自定义View——贝塞尔曲线实现水波纹效果
自定义VIEW 流量统计 圆形圈
11-18
主要是中间的圈 如果UI直接出图的话，很麻烦。于是就自己话了。 时间比较急 画的比较不好。这边共享这个**CircleBar**名字取得不好 应该叫 CircleProgressBar 会比较好点。 源码提供下载，使用主要如下
Android自定义View,实现Progress(水波纹动画)
05-09
项目中的功能,贴出来与大家分享,自定义水波纹视图,完整项目,可直接调用工具类,调用setProgress设置进度,简单、方便、省事。
Android-利用贝塞尔曲线实现跳跃的小球
08-13
利用贝塞尔曲线实现跳跃的小球
自定义view系列之——Android贝塞尔曲线--基础篇
ruiruiddd的博客
09-22 130
链接: 原帖跳转.
Android 使用贝塞尔曲线自定义View，一个弹性的小圆形
最新发布
m0_58663436的博客
12-09 367
Android 自定义View，一个弹性的小圆形。
android开发自定义view倍丝曲线,从0到1Android自定义View（四）贝塞尔曲线
weixin_35143292的博客
05-27 196
原标题：从0到1Android自定义View(四)贝塞尔曲线2017年安卓巴士全球开发者论坛-上海站作者本文由两点水投稿，博客地址：http://www.apkbus.com/myspaceblog-911082.html前言扯来扯去，前面三篇自定义 View 文章，终于扯完了一些知识点，有些枯燥，所以我也是讲下核心点，没有细分析，主要是让各位有点印象和了解。这篇终于是实践，敲代码的了，因为工作原...
Android教你一步一步从学习贝塞尔曲线到实现波浪进度条
weixin_33734785的博客
02-04 560
前言 大家好，我是深红骑士，爱开玩笑，技术一渣渣，热爱钻研，这篇文章是今年的最后一篇了，首先祝大家在新的一年里心想事成，诸事顺利。今天来学习贝塞尔曲线，之前一直想学，可惜没时间。什么是贝塞尔曲线呢？一开始我也是不懂的，当查了很多资料，现在还是不够了解，其推导公式还是不能深入了解。对发布这曲线的法国工程师皮埃尔·贝塞尔由衷敬佩，贝塞尔曲线，又称贝兹曲线或者贝济埃曲线，是应用于二维图形应用程序的数学曲...
Android自定义View实现消息拖拽消失与贝塞尔曲线动画
本文主要介绍了如何在Android平台上利用贝塞尔曲线实现消息拖拽消失的效果，这是一个自定义View的应用实例。作者提到，通常这类效果的实现会涉及到多个关键知识点： 1. **ValueAnimator** 和 **ObjectAnimator**：...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值