From 5817c62a2e09304dd0f911561f045d1d0b40c55e Mon Sep 17 00:00:00 2001 From: lixiaopeng Date: Wed, 16 Dec 2020 15:57:10 +0800 Subject: [PATCH] opt --- .../com/mogo/module/media/utils/Utils.java | 32 +++ .../media/widget/CircleNumberProgress.java | 209 ++++++++++++++++++ .../module/media/window/MediaWindow2.java | 17 +- ...le_media_music_window_alert_layout_new.xml | 19 +- .../src/main/res/values-xhdpi/dimens.xml | 2 +- .../src/main/res/values/dimens.xml | 2 +- 6 files changed, 269 insertions(+), 12 deletions(-) create mode 100644 modules/mogo-module-media/src/main/java/com/mogo/module/media/widget/CircleNumberProgress.java diff --git a/modules/mogo-module-media/src/main/java/com/mogo/module/media/utils/Utils.java b/modules/mogo-module-media/src/main/java/com/mogo/module/media/utils/Utils.java index fdf9aaf338..6918d3fa10 100644 --- a/modules/mogo-module-media/src/main/java/com/mogo/module/media/utils/Utils.java +++ b/modules/mogo-module-media/src/main/java/com/mogo/module/media/utils/Utils.java @@ -26,6 +26,38 @@ import java.util.List; public class Utils { + /** + * 将px值转换为dip或dp值，保证尺寸大小不变 + */ + public static int px2dip(Context context, float pxValue) { + final float scale = context.getResources().getDisplayMetrics().density; + return (int) (pxValue / scale + 0.5f); + } + + /** + * 将dip或dp值转换为px值，保证尺寸大小不变 + */ + public static int dip2px(Context context, float dipValue) { + final float scale = context.getResources().getDisplayMetrics().density; + return (int) (dipValue * scale + 0.5f); + } + + /** + * 将px值转换为sp值，保证文字大小不变 + */ + public static int px2sp(Context context, float pxValue) { + final float fontScale = context.getResources().getDisplayMetrics().scaledDensity; + return (int) (pxValue / fontScale + 0.5f); + } + + /** + * 将sp值转换为px值，保证文字大小不变 + */ + public static int sp2px(Context context, float spValue) { + final float fontScale = context.getResources().getDisplayMetrics().scaledDensity; + return (int) (spValue * fontScale + 0.5f); + } + /** * 验证手机格式 */ diff --git a/modules/mogo-module-media/src/main/java/com/mogo/module/media/widget/CircleNumberProgress.java b/modules/mogo-module-media/src/main/java/com/mogo/module/media/widget/CircleNumberProgress.java new file mode 100644 index 0000000000..1334310de3 --- /dev/null +++ b/modules/mogo-module-media/src/main/java/com/mogo/module/media/widget/CircleNumberProgress.java @@ -0,0 +1,209 @@ +package com.mogo.module.media.widget; + +import android.content.Context; +import android.graphics.Canvas; +import android.graphics.Paint; +import android.graphics.Path; +import android.graphics.Rect; +import android.graphics.RectF; +import android.util.AttributeSet; +import android.view.View; + +import com.mogo.module.media.utils.Utils; + +/** + * @author lixiaopeng + * @description + * @since 2020/12/15 + */ +public class CircleNumberProgress extends View { + /** 进度条画笔的宽度（dp） */ + private int paintProgressWidth = 4; + + /** 文字百分比的字体大小（sp） */ + private int paintTextSize = 20; + + /** 未完成进度条的颜色 */ + private int paintUndoneColor = 0xffaaaaaa; + + /** 已完成进度条的颜色 */ + private int paintDoneColor = 0xff67aae4; + + /** 百分比文字的颜色 */ + private int paintTextColor = 0xffff0077; + + /** 设置进度条画笔的宽度(px) */ + private int paintProgressWidthPx; + + /** 文字画笔的尺寸(px) */ + private int paintTextSizePx; + /** Context上下文环境 */ + private Context context; + + /** 调用者设置的进程 0 - 100 */ + private int progress; + + /** 画未完成进度圆弧的画笔 */ + private Paint paintUndone = new Paint(); + + /** 画已经完成进度条的画笔 */ + private Paint paintDone = new Paint(); + + /** 画文字的画笔 */ +// private Paint paintText = new Paint(); + + /** 包围进度条圆弧的矩形 */ + private RectF rectF = new RectF(); + + /** 包围文字所在路径圆弧的矩形，比上一个矩形略小 */ + private RectF rectF2 = new RectF(); + + /** 进度文字所在的路径 */ + private Path path = new Path(); + + /** 文字所在路径圆弧的半径 */ + private int radiusText; + + /** 是否进行过了测量 */ + private boolean isMeasured = false; + + public CircleNumberProgress(Context context, AttributeSet attrs) { + super(context, attrs); + this.context = context; + // 构造器中初始化数据 + initData(); + } + + /** 初始化数据 */ + private void initData() { + + // 设置进度条画笔的宽度 + paintProgressWidthPx = Utils.dip2px(context, paintProgressWidth); + + // 设置文字画笔的尺寸(px) + paintTextSizePx = Utils.sp2px(context, paintTextSize); + + // 未完成进度圆环的画笔的属性 + paintUndone.setColor(paintUndoneColor); + paintUndone.setStrokeWidth(paintProgressWidthPx); + paintUndone.setAntiAlias(true); + paintUndone.setStyle(Paint.Style.STROKE); + + // 已经完成进度条的画笔的属性 + paintDone.setColor(paintDoneColor); + paintDone.setStrokeWidth(paintProgressWidthPx); + paintDone.setAntiAlias(true); + paintDone.setStyle(Paint.Style.STROKE); + + // 文字的画笔的属性 +// paintText.setColor(paintTextColor); +// paintText.setTextSize(paintTextSizePx); +// paintText.setAntiAlias(true); +// paintText.setStyle(Paint.Style.STROKE); +// paintText.setTypeface(Typeface.DEFAULT_BOLD); + + } + + @Override + protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { + super.onMeasure(widthMeasureSpec, heightMeasureSpec); + if (!isMeasured) { + getWidthAndHeight(); + isMeasured = true; + } + } + + /** 得到视图等的高度宽度尺寸数据 */ + private void getWidthAndHeight() { + // 得到自定义视图的高度 + int viewHeight; + + // 得到自定义视图的宽度 + int viewWidth; + + // 得到自定义视图的X轴中心点 + int viewCenterX; + + // 得到自定义视图的Y轴中心点 + int viewCenterY; + + viewHeight = getMeasuredHeight(); + viewWidth = getMeasuredWidth(); + viewCenterX = viewWidth / 2; + viewCenterY = viewHeight / 2; + + // 取本View长宽较小者的一半为整个圆环部分（包括圆环和文字）最外侧的半径 + int minLenth = viewHeight > viewWidth ? viewWidth / 2 : viewHeight / 2; + + // 比较文字高度和圆环宽度，如果文字高度较大，那么文字将突破圆环，否则，圆环会把文字包裹在内部 + Rect rect = new Rect(); +// paintText.getTextBounds("100%", 0, "100%".length(), rect); + int textHeight = rect.height(); + + // 得到圆环的中间半径（外径和内径平均值） + int radiusArc = minLenth - (paintProgressWidthPx > textHeight ? paintProgressWidthPx / 2 : textHeight / 2); + rectF.left = viewCenterX - radiusArc; + rectF.top = viewCenterY - radiusArc; + rectF.right = viewCenterX + radiusArc; + rectF.bottom = viewCenterY + radiusArc; + + // 文字所依赖路径圆弧的半径 + radiusText = radiusArc - textHeight / 2; + rectF2.left = viewCenterX - radiusText; + rectF2.top = viewCenterY - radiusText; + rectF2.right = viewCenterX + radiusText; + rectF2.bottom = viewCenterY + radiusText; + + } + + @Override + protected void onDraw(Canvas canvas) { + super.onDraw(canvas); + + // 画未完成进度的圆环 + canvas.drawArc(rectF, 0, 360, false, paintUndone); + + // 画已经完成进度的圆弧 从-90度开始，即从圆环顶部开始 + canvas.drawArc(rectF, -90, progress / 100.0f * 360, false, paintDone); + + // 为文字所在路径添加一段圆弧轨迹，进度为0%-9%时应该最短，进度为10%-99%时应该边长，进度为100%时应该最长 + // 这样才能保证文字和圆弧的进度一致，不会出现超前或者滞后的情况 + + // 要画的文字 + String text = progress + "%"; + + // 存储字符所有字符所占宽度的数组 + float[] widths = new float[text.length()]; + + // 得到所有字符所占的宽度 +// paintText.getTextWidths(text, 0, text.length(), widths); + + // 所有字符所占宽度之和 + float textWidth = 0; + for (float f : widths) { + textWidth += f; + } + + // 根据长度得到路径对应的扫过的角度 + // width = sweepAngle * 2 * π * R / 360 ; sweepAngle = width * 360 / 2 / + // π / R + float sweepAngle = (float) (textWidth * 360 / 2 / Math.PI / radiusText); + + // 添加路径 + path.addArc(rectF2, progress * 3.6f - 90.0f - sweepAngle / 2.0f, sweepAngle); + + // 绘制进度的文字 +// canvas.drawTextOnPath(text, path, 0, 0, paintText); + + // 重置路径 + path.reset(); + } + + /** + * @param progress 外部传进来的当前进度,强制重绘 + */ + public void setProgress(int progress) { + this.progress = progress; + invalidate(); + } +} diff --git a/modules/mogo-module-media/src/main/java/com/mogo/module/media/window/MediaWindow2.java b/modules/mogo-module-media/src/main/java/com/mogo/module/media/window/MediaWindow2.java index 1959a9947e..d30717caea 100644 --- a/modules/mogo-module-media/src/main/java/com/mogo/module/media/window/MediaWindow2.java +++ b/modules/mogo-module-media/src/main/java/com/mogo/module/media/window/MediaWindow2.java @@ -26,6 +26,7 @@ import com.mogo.module.media.presenter.PresenterFactory; import com.mogo.module.media.utils.Utils; import com.mogo.module.media.view.IMusicView; import com.mogo.module.media.widget.AnimCircleImageView; +import com.mogo.module.media.widget.CircleNumberProgress; import com.mogo.module.media.widget.PercentageRingView; import com.mogo.service.statusmanager.IMogoStatusChangedListener; import com.mogo.service.statusmanager.StatusDescriptor; @@ -66,7 +67,7 @@ public class MediaWindow2 implements IMusicView , IMogoStatusChangedListener { private boolean mIsCallChatWindowVisible; private ICallProviderResponse mCallProviderResponse; - private PercentageRingView mPercentageRingView; + private CircleNumberProgress mPercentageRingView; private ImageView mPauseImage; private AnimCircleImageView mAnimCircleImageView; @@ -312,7 +313,14 @@ public class MediaWindow2 implements IMusicView , IMogoStatusChangedListener { GlideApp.with(mContext).asBitmap().apply(options).load(mMediaInfoData.getMediaImg()).into(new SkinAbleBitmapTarget(mAnimCircleImageView, options)); // GlideApp.with(mContext).applyDefaultRequestOptions(options).load(mMediaInfoData.getMediaImg()).into(new SkinAbleBitmapTarget(mCircleImg, options)); }else{ - mAnimCircleImageView.setImageResource(R.drawable.module_media_default_music_img); + Logger.e(TAG, "mMediaInfoData == null "); +// mAnimCircleImageView.setImageResource(R.drawable.module_media_default_music_img); + int size = + mContext.getResources().getDimensionPixelSize(R.dimen.module_media_pop_window_anim_img_size_new); + com.bumptech.glide.request.RequestOptions options = + new com.bumptech.glide.request.RequestOptions() + .placeholder(R.drawable.module_media_default_music_img).error(R.drawable.module_media_default_music_img).override(size, size); + GlideApp.with(mContext).asBitmap().apply(options).load("").into(new SkinAbleBitmapTarget(mAnimCircleImageView, options)); } } @@ -344,7 +352,6 @@ public class MediaWindow2 implements IMusicView , IMogoStatusChangedListener { if(mMediaInfoData!=null&&mMediaInfoData.getMediaImg()!=null&&!mMediaInfoData.getMediaImg().isEmpty()) { int size = mContext.getResources().getDimensionPixelSize(R.dimen.module_media_pop_window_anim_img_size); - Logger.d(TAG, "overload: " + size); com.bumptech.glide.request.RequestOptions options = new com.bumptech.glide.request.RequestOptions() .placeholder(R.drawable.module_media_default_music_img).error(R.drawable.module_media_default_music_img).override(size, size); @@ -458,8 +465,8 @@ public class MediaWindow2 implements IMusicView , IMogoStatusChangedListener { (int) ((current * 1.0f * 100) / (total * 1.0f)); if (mPercentageRingView != null) { mPercentageRingView.setVisibility(View.VISIBLE); -// Log.d(TAG, "progress vr = " + progress); - mPercentageRingView.setTargetPercent(progress); + Log.d(TAG, "progress vr = " + progress); + mPercentageRingView.setProgress(progress); } } catch (Exception e) { e.printStackTrace(); diff --git a/modules/mogo-module-media/src/main/res/layout/module_media_music_window_alert_layout_new.xml b/modules/mogo-module-media/src/main/res/layout/module_media_music_window_alert_layout_new.xml index 8d2d4cebc0..8c0e5dbe4d 100644 --- a/modules/mogo-module-media/src/main/res/layout/module_media_music_window_alert_layout_new.xml +++ b/modules/mogo-module-media/src/main/res/layout/module_media_music_window_alert_layout_new.xml @@ -5,17 +5,26 @@ android:layout_width="@dimen/module_media_pop_window_size" android:layout_height="@dimen/module_media_pop_window_size"> - + android:layout_height="match_parent" /> + + + + + + + + + + + + 112px 30px 80px - 90px + 101px 60px 116px 230px diff --git a/modules/mogo-module-media/src/main/res/values/dimens.xml b/modules/mogo-module-media/src/main/res/values/dimens.xml index 48da6e24fd..d0351297ed 100644 --- a/modules/mogo-module-media/src/main/res/values/dimens.xml +++ b/modules/mogo-module-media/src/main/res/values/dimens.xml @@ -70,7 +70,7 @@ 60px 18px 44px - 55px + 60px 60px 123px 10px