前言:Android开发中,自定义观点实现自己想要的效果已成为一项必备的技能,当然自定义观点也是Android开发中比较难的部分,涉及到的知识有帆布画(布),油漆(画笔)等,自定义控件分为三种:一是直接继承自认为,完全的自定义;二是在原有控件的基础上进行改造,达到自己想要的效果,还有一种就是自定义组合控件,将已有的控件根据自己的需要进行组合实现的效果。本人对自定义观点也是一知半解,简单记录下自己学习自定义视图(继承自视图)的过程,方便日后翻阅。
<>强技术实现
1. arcview继承自认为
2.画布(画布)
3.画(画笔)
效果图:类似于QQ的计步效果
<强> 1。继承自认为
(1)重写3个构造方法(新的API中的构造方法是4个)
公共ArcView(上下文语境){
这(上下文,null);
}
公共ArcView(上下文语境,@Nullable AttributeSet attrs) {
这(上下文、attrs 0);
}
公共ArcView(上下文语境,@Nullable AttributeSet attrs, int defStyleAttr) {
超级(上下文、attrs defStyleAttr);//init ();
}
(2)重写观点的OnDraw方法
@SuppressLint (“DrawAllocation”)
@Override
保护空白>//圆弧的油漆
mArcPaint=new油漆(Paint.ANTI_ALIAS_FLAG);//抗锯齿
mArcPaint.setAntiAlias(真正的);
mArcPaint.setColor (Color.parseColor (# 666666));//设置透明度(数值为0 - 255)
mArcPaint.setAlpha (100);//设置画笔的画出的形状
mArcPaint.setStrokeJoin (Paint.Join.ROUND);
mArcPaint.setStrokeCap (Paint.Cap.ROUND);//设置画笔类型
mArcPaint.setStyle (Paint.Style.STROKE);
mArcPaint.setStrokeWidth (dp2px (mStrokeWith));
(2)文字的画笔mTextPaint
//中心文字的油漆
mTextPaint=new油漆();
mTextPaint.setAntiAlias(真正的);
mTextPaint.setColor (Color.parseColor (" # FF4A40 "));//设置文本的对齐方式
mTextPaint.setTextAlign (Paint.Align.CENTER);//mTextPaint.setTextSize (getresource () .getDimensionPixelSize (R.dimen.dp_12));
mTextPaint.setTextSize (dp2px (25));
<强> 3。帆布绘制
(1)圆弧的绘制
/* *
*绘制圆弧
* @param帆布
*/私人空间drawArc(帆布画布){//绘制圆弧背景
RectF mRectF=new RectF (mStrokeWith + dp2px (5), mStrokeWith + dp2px (5), getWidth () -mStrokeWith-dp2px(5),获得()-mStrokeWith);
canvas.drawArc (mRectF startAngle、损坏、假,mArcPaint);//绘制当前数值对应的圆弧
mArcPaint.setColor (Color.parseColor (" # FF4A40 "));//根据当前数据绘制对应的圆弧
canvas.drawArc (mRectF startAngle mIncludedAngle,假,mArcPaint);
}
(2)文本的绘制
/* *
*绘制文本
* @param帆布
*/私人空间drawText(帆布画布){
矩形mRect=new矩形();
字符串mValue=https://www.yisu.com/zixun/String.valueOf (mAnimatorValue);//绘制中心的数的值
mTextPaint.getTextBounds (mValue 0 mValue.length (), mRect);
canvas.drawText (String.valueOf (mAnimatorValue)、centerX centerY + mRect.height (), mTextPaint);//绘制中心文字描述
mTextPaint.setColor (Color.parseColor (# 999999));
mTextPaint.setTextSize (dp2px (12));
mTextPaint.getTextBounds (md 0 mDes.length (), mRect);
canvas.drawText (md、centerX centerY + 2 * mRect.height () + dp2px (10), mTextPaint);//绘制最小值
字符串minValue=https://www.yisu.com/zixun/String.valueOf (mMinValue);
字符串maxValue=String.valueOf (mMaxValue);
mTextPaint.setTextSize (dp2px (18));
mTextPaint.getTextBounds (minValue 0 minValue.length (), mRect);
画布。drawText (minValue(浮动)(centerx - 0.6 * centerX-dp2px(5)),(浮动)(centerY + 0.75 * centerY + mRect.height () + dp2px (5)), mTextPaint);//绘制最大值
mTextPaint.getTextBounds (maxValue 0 maxValue.length (), mRect);
画布。drawText (maxValue(浮动)(centerX + 0.6 * centerX + dp2px(5)),(浮动)(centerY + 0.75 * centerY + mRect.height () + dp2px (5)), mTextPaint);
}
<>强4。添加动画效果及数据
(1)动画效果
/* *
*为绘制弧度及数据设置动画
*
* @param startAngle开始的弧度
* @param currentAngle需要绘制的弧度
* @param currentValue需要绘制的数据
* @param时间动画执行的时长
*/私人空间setAnimation (int, int currentValue startAngle浮动,浮动currentAngle时间){//绘制当前数据对应的圆弧的动画效果
ValueAnimator progressAnimator=ValueAnimator。ofFloat (startAngle currentAngle);
progressAnimator.setDuration(时间);
progressAnimator.setTarget (mIncludedAngle);
progressAnimator。addUpdateListener(新ValueAnimator.AnimatorUpdateListener () {
@Override
公共空间>/* *
*设置数据
* @param minValue最小值
* @param maxValue最大值
* @param currentValue当前绘制的值
* @param des描述信息
*/公共空间setvalue (int, int maxValue int minValue currentValue,字符串des) {
md=des;
mMaxValue=https://www.yisu.com/zixun/maxValue;
mMinValue=minValue;//完全覆盖背景弧度
如果(currentValue> maxValue) {
currentValue=maxValue;
}//计算弧度比重
浮动比例=(浮动)currentValue/执行;//计算弧度
浮动currentAngle=规模*损坏;//开始执行动画
setAnimation (0 currentAngle currentValue, 2500);
