做一个自定义View的小练习,效果如下
只需要画一个圆、一个圆弧、一个百分比文本,添加一个点击事件,传入百分比重绘
1、在res/values文件夹下新建attrs.xml文件,编写自定义属性:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CirclePercentView" >
<attr name="circleBg" format="color"/>
<attr name="arcColor" format="color"/>
<attr name="arcWidth" format="dimension"/>
<attr name="percentTextColor" format="color"/>
<attr name="percentTextSize" format="dimension"/>
<attr name="radius" format="dimension"/>
</declare-styleable>
</resources>
2、新建CirclePercentView继承View,重写构造方法:
public CirclePercentView(Context context) {
this(context, null);
}
public CirclePercentView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CirclePercentView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
3、在第三个构造方法中获取自定义属性的值:
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CirclePercentView, defStyleAttr, 0);
mCircleColor = ta.getColor(R.styleable.CirclePercentView_circleBg, 0xff8e29fa);
mArcColor = ta.getColor(R.styleable.CirclePercentView_arcColor, 0xffffee00);
mArcWidth = ta.getDimensionPixelSize(R.styleable.CirclePercentView_arcWidth, DensityUtils.dp2px(context, 16));
mPercentTextColor = ta.getColor(R.styleable.CirclePercentView_arcColor, 0xffffee00);
mPercentTextSize = ta.getDimensionPixelSize(R.styleable.CirclePercentView_percentTextSize, DensityUtils.sp2px(context, 16));
mRadius = ta.getDimensionPixelSize(R.styleable.CirclePercentView_radius, DensityUtils.dp2px(context, 100));
ta.recycle();
4、创建画图所使用的对象,如Paint、Rect、RectF:
mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCirclePaint.setStyle(Paint.Style.FILL);
mCirclePaint.setColor(mCircleColor);
mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setStrokeWidth(mArcWidth);
mArcPaint.setColor(mArcColor);
mArcPaint.setStrokeCap(Paint.Cap.ROUND);//使圆弧两头圆滑
mPercentTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPercentTextPaint.setStyle(Paint.Style.STROKE);
mPercentTextPaint.setColor(mPercentTextColor);
mPercentTextPaint.setTextSize(mPercentTextSize);
mArcRectF = new RectF();//圆弧的外接矩形
mTextBound = new Rect();//文本的范围矩形
5、重写onMeasure()方法,计算自定义View的宽高:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measureDimension(widthMeasureSpec), measureDimension(heightMeasureSpec));
}
private int measureDimension(int measureSpec) {
int result;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {//精确地,代表宽高为定值或者match_parent时
result = specSize;
} else {
result = 2 * mRadius;
if (specMode == MeasureSpec.AT_MOST) {//最大地,代表宽高为wrap_content时
result = Math.min(result, specSize);
}
}
return result;
}
6、重写onDraw()方法,绘制圆、圆弧和百分比文本,注意坐标的计算:
@Override
protected void onDraw(Canvas canvas) {
//画圆
canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius, mCirclePaint);
//画圆弧
mArcRectF.set(getWidth() / 2 - mRadius + mArcWidth / 2, getHeight() / 2 - mRadius + mArcWidth / 2
, getWidth() / 2 + mRadius - mArcWidth / 2, getHeight() / 2 + mRadius - mArcWidth / 2);
canvas.drawArc(mArcRectF, 270, 360 * mCurPercent / 100, false, mArcPaint);
String text = mCurPercent + "%";
//计算文本宽高
mPercentTextPaint.getTextBounds(text, 0, String.valueOf(text).length(), mTextBound);
//画百分比文本
canvas.drawText(text, getWidth() / 2 - mTextBound.width() / 2
, getHeight() / 2 + mTextBound.height() / 2, mPercentTextPaint);
}
7、给这个view设置点击事件,暴露一个动态设置百分比的方法:
public void setCurPercent(float curPercent) {
ValueAnimator anim = ValueAnimator.ofFloat(mCurPercent, curPercent);
//动画时长由百分比大小决定
anim.setDuration((long) (Math.abs(mCurPercent - curPercent) * 20));
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
mCurPercent = (float) (Math.round(value * 10)) / 10;//四舍五入保留到小数点后两位
invalidate();//重绘,重走onDraw()方法,这也是不能再onDraw()中创建对象的原因
}
});
anim.start();
}
public void setOnCircleClickListener(OnClickListener onClickListener) {
this.mOnClickListener = onClickListener;
}
//在构造方法中
setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mOnClickListener != null) {
mOnClickListener.onClick(CirclePercentView.this);
}
}
});
8、在activity_main.xml布局文件中使用该View:
<!-- 使用自定义命名空间namespace,cpv是该控件名的首字母缩写,可以随意取 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cpv="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- cpv后面的属性名对应attrs.xml文件中的自定义属性名 -->
<com.monkey.customviewdemo.view.CirclePercentView
android:id="@+id/circlePercentView"
android:layout_width="match_parent"
android:layout_height="match_parent"
cpv:arcColor="#ffee00"
cpv:arcWidth="@dimen/activity_horizontal_margin"
cpv:circleBg="#8e29fa"
cpv:percentTextColor="#ffee00"
cpv:percentTextSize="16sp"
cpv:radius="100dp" />
</RelativeLayout>
9、在MainActivity.java中设置监听,传入百分比:
mCirclePercentView = (CirclePercentView) findViewById(R.id.circlePercentView);
mCirclePercentView.setOnCircleClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
float percent = (float) (Math.random() * 99 + 1);
mCirclePercentView.setCurPercent(percent);
}
});
代码下载地址:
https://github.com/MonkeyMushroom/CirclePercentView/tree/master
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
# Android
# View
# 百分比
# Android自定义View控件实现刷新效果
# Android自定义View实现随手势滑动控件
# Android自定义View控件实现多种水波纹涟漪扩散效果
# Android自定义View简易折线图控件(二)
# Android自定义View之简约风歌词控件实战指南
# 自定义
# 重写
# 下载地址
# 两位
# 做一个
# 只需要
# 第三个
# 能再
# 外接
# 时长
# 大家多多
# 画一
# 首字母
# 这也是
# 定值
# 四舍五入
# dp2px
# DensityUtils
# CirclePercentView_percentTextSize
# sp2px
相关文章:
制作证书网站有哪些,全国城建培训中心证书查询官网?
巅云智能建站系统:可视化拖拽+多端适配+免费模板一键生成
深圳网站制作案例,网页的相关名词有哪些?
香港服务器部署网站为何提示未备案?
c# 在高并发场景下,委托和接口调用的性能对比
网站视频怎么制作,哪个网站可以免费收看好莱坞经典大片?
教程网站设计制作软件,怎么创建自己的一个网站?
c# await 一个已经完成的Task会发生什么
PHP 500报错的快速解决方法
如何在橙子建站中快速调整背景颜色?
mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界?
rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted
如何用PHP快速搭建CMS系统?
小程序网站制作需要准备什么资料,如何制作小程序?
网页制作模板网站推荐,网页设计海报之类的素材哪里好?
如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗?
齐河建站公司:营销型网站建设与SEO优化双核驱动策略
建站之星logo尺寸如何设置最合适?
车管所网站制作流程,交警当场开简易程序处罚决定书,在交警网站查询不到怎么办?
做企业网站制作流程,企业网站制作基本流程有哪些?
黑客如何通过漏洞一步步攻陷网站服务器?
制作网站的模板软件,网站怎么建设?
如何用PHP快速搭建高效网站?分步指南
青岛网站建设如何选择本地服务器?
完全自定义免费建站平台:主题模板在线生成一站式服务
建站之星微信建站一键生成小程序+多端营销系统
北京制作网站的公司排名,北京三快科技有限公司是做什么?北京三快科技?
如何快速上传建站程序避免常见错误?
网站制作与设计教程,如何制作一个企业网站,建设网站的基本步骤有哪些?
成都网站制作报价公司,成都工业用气开户费用?
建站之星安装需要哪些步骤及注意事项?
寿县云建站:智能SEO优化与多行业模板快速上线指南
如何在腾讯云免费申请建站?
企业在线网站设计制作流程,想建设一个属于自己的企业网站,该如何去做?
免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面,最好是免费的?
山东网站制作公司有哪些,山东大源集团官网?
高防服务器:AI智能防御DDoS攻击与数据安全保障
智能起名网站制作软件有哪些,制作logo的软件?
利用JavaScript实现拖拽改变元素大小
定制建站策划方案_专业建站与网站建设方案一站式指南
建站之星如何快速解决建站难题?
如何获取PHP WAP自助建站系统源码?
网站好制作吗知乎,网站开发好学吗?有什么技巧?
孙琪峥织梦建站教程如何优化数据库安全?
企业宣传片制作网站有哪些,传媒公司怎么找企业宣传片项目?
如何选择高效可靠的多用户建站源码资源?
简单实现Android文件上传
常州自助建站:操作简便模板丰富,企业个人快速搭建网站
网站代码制作软件有哪些,如何生成自己网站的代码?
如何在阿里云域名上完成建站全流程?
*请认真填写需求信息,我们会在24小时内与您取得联系。