做下载类网站赚钱吗徐州专业网站seo

当前位置： 首页 > news >正文

做下载类网站赚钱吗,徐州专业网站seo,高端定制网站建设公司,德州住房和城乡建设厅网站前言 本篇文章主要是实现仿QQ步数View#xff0c;很老的一个View了#xff0c;但技术永不落后#xff0c;开搂#xff01; 最终效果如下#xff1a; 1. 结构分析 QQStepView 主要由三个元素组成#xff1a; 显示一个圆环进度条#xff0c;通过外环和内环的角度变化来…前言 本篇文章主要是实现仿QQ步数View很老的一个View了但技术永不落后开搂 最终效果如下 1. 结构分析 QQStepView 主要由三个元素组成 显示一个圆环进度条通过外环和内环的角度变化来表示进度。支持自定义外环颜色、内环颜色、进度文本颜色和文本大小这些都可以通过 XML 属性来配置。支持动态更新进度通过方法 setStep(int step) 可以更新当前进度。

1. 定义自定义属性 为了使该控件在 XML 布局文件中可配置我们需要定义一些自定义属性例如外圈颜色、内圈颜色、边框宽度、文本大小和文本颜色。这些属性可以通过 res/values/attrs.xml 文件来定义 declare-styleable nameQQStepViewattr nameouterColor formatcolor /attr nameinnerColor formatcolor /attr nameborderWidth formatdimension /attr namestepTextSize formatdimension /attr namestepTextColor formatcolor / /declare-styleable3. 初始化视图元素 通过 TypedArray 获取用户在 XML 中设置的属性。 public QQStepView(Context context, Nullable AttributeSet attrs) {super(context, attrs);TypedArray array context.obtainStyledAttributes(attrs, R.styleable.QQStepView);mOuterColor array.getColor(R.styleable.QQStepView_outerColor, mOuterColor);mInnerColor array.getColor(R.styleable.QQStepView_innerColor, mInnerColor);mBorderWidth array.getDimensionPixelSize(R.styleable.QQStepView_borderWidth, mBorderWidth);mStepTextSize array.getDimensionPixelSize(R.styleable.QQStepView_stepTextSize, mStepTextSize);mStepTextColor array.getColor(R.styleable.QQStepView_stepTextColor, mStepTextColor);array.recycle(); }初始化画笔Paint mOuterPaint new Paint(); mOuterPaint.setColor(mOuterColor); mOuterPaint.setAntiAlias(true); mOuterPaint.setStyle(Paint.Style.STROKE); // 实心 mOuterPaint.setStrokeWidth(mBorderWidth); mOuterPaint.setStrokeCap(Paint.Cap.ROUND);mInnerPaint new Paint(); mInnerPaint.setColor(mInnerColor); mInnerPaint.setAntiAlias(true); mInnerPaint.setStyle(Paint.Style.STROKE); mInnerPaint.setStrokeWidth(mBorderWidth); mInnerPaint.setStrokeCap(Paint.Cap.ROUND);mTextPaint new Paint(); mTextPaint.setColor(mStepTextColor); mTextPaint.setTextSize(mStepTextSize); mTextPaint.setAntiAlias(true);4. 测量视图尺寸onMeasure 在这里我们确保视图是正方形即宽高相等。如果布局中的宽高为 wrap_content我们通过 MeasureSpec 获取最大的尺寸使用最小值来确保宽高相等 Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int width MeasureSpec.getSize(widthMeasureSpec);int height MeasureSpec.getSize(heightMeasureSpec);int size Math.min(width, height);setMeasuredDimension(size, size); // 确保视图为正方形 }5. 绘制视图内容onDraw 我们逐步绘制外圆弧、内圆弧和文本。 本文重点概念就是canvas.drawArc能理解这个方法的使用就行了。 画了一张简图配合着源码接下来逐个分析其参数使用。 public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, NonNull Paint paint)RectF oval定义弧形的外接矩形。 RectF 是一个矩形类用来表示一个矩形的边界。弧形是通过外接矩形来确定的所以这个矩形将决定弧形的大小和位置。oval 定义了一个圆形的外接矩形。就是上图的正方形。 float startAngle弧形的起始角度单位是度°。 这个角度表示弧形起始的方向是从矩形的水平坐标轴开始计算的。即上图中的绿色线就是0° 由上图可知我们的圆弧起始角度为 135 度。 float sweepAngle弧形的扫过角度单位是度°。 这个角度表示弧形从起始角度开始扫过的角度决定了弧形的弯曲度。如果是正数表示顺时针方向绘制弧形如果是负数表示逆时针方向。扫过的角度为 360 - 90 270度。 boolean useCenter是否绘制弧形的中心线。 如果 useCenter 为 true那么弧形会从矩形的中心到达弧形的起始和终止角度。如果 useCenter 为 false则弧形的边缘将仅仅通过 startAngle 和 sweepAngle 绘制出来而不会连到中心点。就是上图下面那两根连接中点的黑线。在我们代码中 useCenter 设置为 false意味着我们只绘制一个环形弧而不是一个扇形。 NonNull Paint paint用于定义弧形样式的 Paint 对象 Paint 用来设置绘制图形的颜色、样式、宽度等属性。
   5.1 绘制外圆弧 首先我们绘制外圆弧这是显示总步数的背景。外圆弧的起始角度为135°覆盖270° int center getWidth() / 2; // 获取圆心位置 int radius center - mBorderWidth / 2; // 半径要减去边框宽度的一半RectF oval new RectF(center - radius, center - radius, center radius, center radius); canvas.drawArc(oval, 135, 270, false, mOuterPaint); // 绘制外圆弧5.2 绘制内圆弧 内圆弧表示当前步数的进度。根据 mStepCurrent 和 mStepMax 计算内圆弧的弧度。如果步数为0则不绘制内圆弧 if (mStepCurrent 0) return; float sweepAngle (float) mStepCurrent / mStepMax * 270; // 计算当前步数对应的弧度 canvas.drawArc(oval, 135, sweepAngle, false, mInnerPaint); // 绘制内圆弧5.3 绘制文本 最后绘制步数文本。文本需要居中显示因此我们计算文本的宽度和高度然后调整其位置使其垂直居中和水平居中。基线概念上篇文章已经介绍了在这里直接使用不理解的可以翻翻上一篇去查看。 String stepText mStepCurrent ; Rect bounds new Rect(); mTextPaint.getTextBounds(stepText, 0, stepText.length(), bounds); int dx getWidth() / 2 - bounds.width() / 2; // 水平偏移量Paint.FontMetricsInt fontMetrics mTextPaint.getFontMetricsInt(); int dy (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom; // 垂直偏移量 int baseLine center dy; // y轴偏移量canvas.drawText(stepText, dx, baseLine, mTextPaint); // 绘制文本6. 更新视图setStep 和 setStepMax 为了让步数进度条动态变化我们提供了两个方法setStep 用来设置当前步数setStepMax 用来设置最大步数。在设置值后调用 invalidate() 方法刷新视图 public synchronized void setStep(int step) {mStepCurrent step;invalidate(); // 刷新视图 }public synchronized void setStepMax(int stepMax) {mStepMax stepMax;invalidate(); // 刷新视图 }7. 使用 这里使用了属性动画使View更新更丝滑和插值器使动画更自然。 安卓动画插值器Interpolator val myView findViewByIdQQStepView(R.id.step_view)myView.setStepMax(5000)//属性动画val valueAnimator ValueAnimator.ofInt(0, 3000);//表示从 0 到 3000 之间的整数值变化valueAnimator.setDuration(1000) //设置动画的持续时间为 1000 毫秒1 秒。这个动画会在 1 秒内从 0 平滑地增加到 3000。valueAnimator.interpolator android.view.animation.DecelerateInterpolator()//开始时较快结束时较慢valueAnimator.addUpdateListener { animation -val value animation.animatedValue as IntmyView.setStep(value)}findViewByIdButton(R.id.btn_start).clickNoRepeat {valueAnimator.start()}8. 完整代码 public class QQStepView extends View {private int mOuterColor Color.RED;private int mInnerColor Color.BLUE;private int mBorderWidth 20; //pxprivate int mStepTextSize;private int mStepTextColor;private Paint mOuterPaint;private Paint mInnerPaint;private Paint mTextPaint;private int mStepMax 100;private int mStepCurrent 0;public QQStepView(Context context) {this(context, null);}public QQStepView(Context context, Nullable AttributeSet attrs) {this(context, attrs, 0);}public QQStepView(Context context, Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);// 1.分析效果// 2.确定自定义属性 attr.xml// 3.在布局文件中使用// 4.在自定义View 中获取自定义属性TypedArray array context.obtainStyledAttributes(attrs, R.styleable.QQStepView);mOuterColor array.getColor(R.styleable.QQStepView_outerColor, mOuterColor);mInnerColor array.getColor(R.styleable.QQStepView_innerColor, mInnerColor);mBorderWidth array.getDimensionPixelSize(R.styleable.QQStepView_borderWidth, mBorderWidth);mStepTextSize array.getDimensionPixelSize(R.styleable.QQStepView_stepTextSize, mStepTextSize);mStepTextColor array.getColor(R.styleable.QQStepView_stepTextColor, mStepTextColor);array.recycle();mOuterPaint new Paint();mOuterPaint.setColor(mOuterColor);mOuterPaint.setAntiAlias(true);mOuterPaint.setStyle(Paint.Style.STROKE); //实心mOuterPaint.setStrokeWidth(mBorderWidth);mOuterPaint.setStrokeCap(Paint.Cap.ROUND);mInnerPaint new Paint();mInnerPaint.setColor(mInnerColor);mInnerPaint.setAntiAlias(true);mInnerPaint.setStyle(Paint.Style.STROKE);mInnerPaint.setStrokeWidth(mBorderWidth);mInnerPaint.setStrokeCap(Paint.Cap.ROUND);mTextPaint new Paint();mTextPaint.setColor(mStepTextColor);mTextPaint.setTextSize(mStepTextSize);mTextPaint.setAntiAlias(true);// onMeasure// 6.画外圆弧 画内圆弧 画文字// 7.其他}Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);// 布局可能是宽高 wrap_content//读取模式 AT_MOST 40dp// 宽高不一致 取最小值确保是正方形int width MeasureSpec.getSize(widthMeasureSpec);int height MeasureSpec.getSize(heightMeasureSpec);int size Math.min(width, height);setMeasuredDimension(size, size);}Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 1.画外圆弧int center getWidth() / 2;int radius center - mBorderWidth / 2;//RectF oval, float startAngle, float sweepAngle, boolean useCenter, NonNull Paint paintRectF oval new RectF(center - radius, center - radius, center radius, center radius);canvas.drawArc(oval, 135, 270, false, mOuterPaint);// 2.画内圆弧if (mStepCurrent 0) return;float sweepAngle (float) mStepCurrent / mStepMax * 270;canvas.drawArc(oval, 135, sweepAngle, false, mInnerPaint);// 3.画文字String stepText mStepCurrent ;//控件的一半 减去 文字的一半Rect bounds new Rect();mTextPaint.getTextBounds(stepText, 0, stepText.length(), bounds);int dx getWidth() / 2 - bounds.width() / 2; // x轴偏移量//基线Paint.FontMetricsInt fontMetrics mTextPaint.getFontMetricsInt();int dy (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;int baseLine center dy; // y轴偏移量canvas.drawText(stepText, dx, baseLine, mTextPaint);}// 动起来public synchronized void setStep(int step) {mStepCurrent step;invalidate();}public synchronized void setStepMax(int stepMax) {mStepMax stepMax;invalidate();} }另外给喜欢记笔记的同学安利一款好用的云笔记软件对比大部分国内的这个算还不错的免费好用wolai