圆形进度条的模仿3-DrawArc,DrawCircle,DrawText,自定义属性实例讲解
前面两篇中已经讲过如何使用drawARC,等,画其他的图形的方法的使用也是一样的,只是参数不同,
同时也讲了如何通过xml进行自定义属性,接下来这篇便是通过实例讲解如何实地应用起来,
效果如下,点击开始时,进度条会开始转动,点击停止时会停在转动的位置,若在次点击开始时,会从停止
的位置开始转动。
1:这个控件我们是自定义的,所以定义一个类继承于view类,必须要写的两个构造方法,
2:将要添加的属性在values下面的xml文件中写好(方法看上一篇):
3:在layout中将属性用起来(方法看上篇)
4:回到代码中,在xml构造方法中,将自定义的属性解析出来,(里面的参数及其理解看上篇,),
5:重写ondraw方法,绘画的部分是在该方法里面实现的,
6:在ondraw方法中画出自己要画的图形,我这里画的是一个圆,一个圆弧,以及一个文本
canvas?.drawCircle(cx,cy,radious,paint)
//画弧
canvas?.drawArc(mstrokewidth,mstrokewidth,width-mstrokewidth,height-mstrokewidth,
-90f,360f*arc_chang,false,arc_paint)
//画文本
canvas?.drawText("${text.toInt()}%",width/2f,height/2f+textMove,text_paint)
进度条本身是一个圆环,我是通过设置画圆的画笔来实现画圆环的:通过设置它的填充方式为Stroke,以及
画笔的宽度宽一点,那么画出来就是一个圆环
//圆的画笔
private val paint = Paint().apply {
color = Color.BLUE
style = Paint.Style.STROKE
strokeWidth = mstrokewidth
}
而我们画的并不是一个死的东西,是一个在变化的东西,那么我们就可以设置它的动画因子,如画弧的弧度,就可以通过
设置弧度变化的动画因子来实现,它是从-90度,转360度转一圈,那么我们可以设置一个动画因子为arc_chang,它的
变化范围我0到1,在乘以360,就是0到360的范围变化了,
//圆弧的动画因子
val valueAnimator = ValueAnimator.ofFloat(0f,1f).apply {
duration = 2000
addUpdateListener {
myView.arc_chang = it.animatedValue as Float
myView.text = (it.animatedValue as Float)*100
}
}
同理画文本也可以这样做,把数字改一下就好了,在启动动画
start.setOnClickListener {
if (valueAnimator.isPaused) {
valueAnimator.resume()
}else{
valueAnimator.start()
}
}
stop.setOnClickListener {
valueAnimator.pause()
}
GitHub连接:https://github.com/luofangli/Circle_progress_bar
整体的代码
1:values文件中的:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="myview">
//圆环
<attr name="Color" format="color|reference"/>
//进度圆环
<attr name="forColor" format="color|reference"/>
//字体
<attr name="android:textColor"/>
</declare-styleable>
</resources>
2:layout中
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<com.example.myapplication.myview
android:id="@+id/myView"
android:layout_width="200dp"
android:layout_height="200dp"
android:textColor="@color/colorAccent"
app:Color="@color/colorGray"
app:forColor="@color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:text="开始"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/stop"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/myView" />
<Button
android:id="@+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="停止"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/start"
app:layout_constraintTop_toTopOf="@+id/start" />
</androidx.constraintlayout.widget.ConstraintLayout>
3:自定义view类中
package com.example.myapplication
import android.content.Context
import android.content.res.TypedArray
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View
import java.util.jar.Attributes
class myview:View {
//圆的圆心
private var cx= 0f
private var cy = 0f
//半径
private var radious = 0f
//画笔的粗细
private val mstrokewidth = 50f
//圆中心的文本
var text = 0f
set(value) {
field = value
invalidate()
}
//圆弧的动画因子
var arc_chang = 0.00f
set(value) {
field = value
invalidate()
}
//圆的画笔
private val paint = Paint().apply {
color = Color.BLUE
style = Paint.Style.STROKE
strokeWidth = mstrokewidth
}
//圆弧的画笔
private val arc_paint = Paint().apply {
color = Color.BLUE
style = Paint.Style.STROKE
strokeWidth = mstrokewidth
}
//画笔向下移动的距离
private var textMove = 0f
//文本的画笔
private val text_paint = Paint().apply {
color = Color.BLUE
style = Paint.Style.FILL
textSize = 50f
textAlign = Paint.Align.CENTER
textMove = (descent()-ascent())/2f
}
//画笔的颜色
var paint_color = Color.BLUE
set(value) {
field = value
paint.color = value
}
//画圆弧的颜色
var arc_color = Color.GREEN
set(value) {
field = value
arc_paint.color = value
}
//字体颜色
var text_color = Color.GREEN
constructor(context: Context):super(context){}
//代码
constructor(context: Context,attributes: AttributeSet?):super(context,attributes){
//1:简析
val typedArray = context.obtainStyledAttributes(attributes,
R.styleable.myview)
//获取属性
paint_color = typedArray.getColor(R.styleable.myview_Color,Color.GRAY)
arc_color = typedArray.getColor(R.styleable.myview_forColor,Color.GREEN)
text_color = typedArray.getColor(R.styleable.myview_android_textColor,
Color.GREEN)
//释放内存
typedArray.recycle()
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
cx = width/2f
cy = height/2f
radious = Math.min(width,height)/2f - mstrokewidth
}
override fun onDraw(canvas: Canvas?) {
canvas?.drawCircle(cx,cy,radious,paint)
//画弧
canvas?.drawArc(mstrokewidth,mstrokewidth,width-mstrokewidth,height-mstrokewidth,
-90f,360f*arc_chang,false,arc_paint)
//画文本
canvas?.drawText("${text.toInt()}%",width/2f,height/2f+textMove,text_paint)
}
}
4:mainActivity类中
package com.example.myapplication
import android.animation.Animator
import android.animation.ValueAnimator
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import kotlinx.android.synthetic.main.activity_main.*
import java.io.ObjectInputValidation
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//圆弧的动画因子
val valueAnimator = ValueAnimator.ofFloat(0f,1f).apply {
duration = 2000
addUpdateListener {
myView.arc_chang = it.animatedValue as Float
myView.text = (it.animatedValue as Float)*100
}
}
start.setOnClickListener {
if (valueAnimator.isPaused) {
valueAnimator.resume()
}else{
valueAnimator.start()
}
}
stop.setOnClickListener {
valueAnimator.pause()
}
}
}
圆形进度条的模仿3-DrawArc,DrawCircle,DrawText,自定义属性实例讲解的更多相关文章
- 圆形进度条的模仿1-DrawArc,DrawCircle,DrawText讲解
1:画弧 canvas.drawArc(oval,startAngle,sweepAngle,useCenter,paint) 第一个参数:绘制的区域,oval可以是被定好了的一个区域,也可以将ova ...
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
Android 高手进阶(21) 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...
- Android 带进度的圆形进度条
最近项目有个需求,做带进度从下到上的圆形进度条. 网上查了一下资料,发现这篇博客写得不错http://blog.csdn.net/xiaanming/article/details/10298163 ...
- 自定义VIew——漂亮的圆形进度条
package com.example.firstapp; import java.text.DecimalFormat; import android.annotation.SuppressLint ...
- Android 高手进阶,自己定义圆形进度条
背景介绍 在Android 开发中,我们常常遇到各种各样绚丽的控件,所以,依靠我们Android本身所带的控件是远远不够的,许多时候须要我们自定义控件,在开发的过程中.我们公司遇到了一种须要自己写的一 ...
- Android自定义控件系列之应用篇——圆形进度条
一.概述 在上一篇博文中,我们给大家介绍了Android自定义控件系列的基础篇.链接:http://www.cnblogs.com/jerehedu/p/4360066.html 这一篇博文中,我们将 ...
- 【Android 应用开发】 自定义 圆形进度条 组件
转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...
- 微信小程序动画之圆形进度条
微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...
- Android 自定义 View 圆形进度条总结
Android 自定义圆形进度条总结 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 微信公众号:牙锅子 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 最近 ...
随机推荐
- Python3 学习笔记之 数据类型
- [记录点滴]授人以渔,从Tensorflow找不到dll扩展到如何排查问题
[记录点滴]授人以渔,从Tensorflow找不到dll扩展到如何排查问题 目录 [记录点滴]授人以渔,从Tensorflow找不到dll扩展到如何排查问题 0x00 摘要 0x01 引言 0x02 ...
- vSphere Client上安装虚拟机工具VMware Tools
vSphere Client上安装虚拟机工具VMware Tools 1.安装虚拟机 具体安装步骤就不详述了,安装虚拟机之后右击虚拟机名->客户机->安装/升级VMware Tools,这 ...
- CSS 常见样式 特殊用法 贯穿线&徽章&箭头
贯穿渐变线,中间插值 如图: <h3 class="brief-modal-title"> <span>公告</span> </h3> ...
- 线程的阻塞 sleep() wait() yield()
为了解决对共享存储区的访问冲突,Java 引入了同步机制,现在让我们来考察多个线程对共享资源的访问,显然同步机制已经不够了,因为在任意时刻所要求的资源不一定已经准备好了被访问,反过来,同一时刻准备好了 ...
- 《图解 HTTP》 学习笔记
前言 本书对互联网基盘--HTTP协议进行了全面系统的介绍.作者由HTTP协议的发展历史娓娓道来,严谨细致地剖析了HTTP协议的结构,列举诸多常见通信场景及实战案例,最后延伸到Web安全.最新技术动向 ...
- Spring的三大核心接口——BeanFactory、ApplicationContext、WebApplicationContext
之前也在用这三个接口,但是对于他们的概念还是处于朦胧状态,同时,也不知道他们之间是一个什么关系,趁着现在有点时间总结一下吧,也需要对你有所帮助.一.BeanFactory 基本认识: ...
- 使用Navicat连接MySQL8.0版本报1251错误
出现1251错误是因为,MySQL8.0版本改变了密码的验证规则caching_sha2_password,MySQL之前的版本验证规则是mysql_native_password,现在需要修改MyS ...
- phpStudy8.1.0.1配置子域名多网站
版本 这里phpStudy版本为8.1.0.1: 步骤 假设域名为:domain.com:公网IP地址为:42.33.33.33 首先云解析中配置,添加子域名A记录直接指向你的公网IP: ep.dom ...
- 学习OpenGL
重要!!! OpenGL新人一枚,希望可以再此和大家分享有用的知识,少走弯路 文章会定期更新,把前面几段已经整理过的知识更完后,接下来每周至少会更两次. 文章如果有不对的,理解错误的地方,也非常希望在 ...