绘制控件之Paint、canvas的简单使用(一)

使用自绘的方式自定义控件

实现效果:


绘制控件之Paint、canvas的简单使用(一)_第1张图片
image.png

首先在Android上面创建一个工程
然后创建一个类用来管理我们自绘的图形


绘制控件之Paint、canvas的简单使用(一)_第2张图片
image.png
由于我们这里只单一绘制一个图片 所以我们把该类继承于View
绘制控件之Paint、canvas的简单使用(一)_第3张图片
image.png

绘制控件之Paint、canvas的简单使用(一)_第4张图片
image.png

紧接着我们实现其构造方法


绘制控件之Paint、canvas的简单使用(一)_第5张图片
image.png

然后我们定义三个画笔:分别为背景、进度、文本的画笔


绘制控件之Paint、canvas的简单使用(一)_第6张图片
image.png

在构造方法里面进行初始化:
我们写一个init()的初始化方法 然后在构造函数中调用即可
绘制控件之Paint、canvas的简单使用(一)_第7张图片
image.png

然后我们使用onDraw方法 用canvas画出图形


绘制控件之Paint、canvas的简单使用(一)_第8张图片
image.png

设置文本 “0%”的位置:(具体算法网上有 此处不再给出)


绘制控件之Paint、canvas的简单使用(一)_第9张图片
image.png

然后我们在xml文件中配置我们的自绘控件的信息 并将布局改为RelativeLayout


绘制控件之Paint、canvas的简单使用(一)_第10张图片
image.png

如图为显示效果:


绘制控件之Paint、canvas的简单使用(一)_第11张图片
image.png
然后我们接着设置一下progress属性 ,每点击一次屏幕就使进度条加载5%

我们设置一下进度的角度 一个周期转300度


绘制控件之Paint、canvas的简单使用(一)_第12张图片
image.png
绘制控件之Paint、canvas的简单使用(一)_第13张图片
image.png

效果如图:(每点击一次 进度增加5%)

绘制控件之Paint、canvas的简单使用(一)_第14张图片
image.png

绘制控件之Paint、canvas的简单使用(一)_第15张图片
image.png

你可能感兴趣的:(绘制控件之Paint、canvas的简单使用(一))