This commit is contained in:
lixiaopeng
2020-12-16 15:57:10 +08:00
parent 111ac63e38
commit 5817c62a2e
6 changed files with 269 additions and 12 deletions

View File

@@ -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);
}
/**
* 验证手机格式
*/

View File

@@ -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();
}
}

View File

@@ -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();

View File

@@ -5,17 +5,26 @@
android:layout_width="@dimen/module_media_pop_window_size"
android:layout_height="@dimen/module_media_pop_window_size">
<com.mogo.module.media.widget.PercentageRingView
<com.mogo.module.media.widget.CircleNumberProgress
android:id="@+id/window_circle_bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:circleBackground="@color/modules_media_music_bg_color"
app:radius="100"
app:ringColor="@color/modules_media_music_circle_color" />
android:layout_height="match_parent" />
<!-- <com.mogo.module.media.widget.PercentageRingView-->
<!-- android:id="@+id/window_circle_bg"-->
<!-- app:layout_constraintBottom_toBottomOf="parent"-->
<!-- app:layout_constraintLeft_toLeftOf="parent"-->
<!-- app:layout_constraintTop_toTopOf="parent"-->
<!-- app:layout_constraintRight_toRightOf="parent"-->
<!-- android:layout_width="match_parent"-->
<!-- android:layout_height="match_parent"-->
<!-- app:circleBackground="@color/modules_media_music_bg_color"-->
<!-- app:radius="100"-->
<!-- app:ringColor="@color/modules_media_music_circle_color" />-->
<com.mogo.module.media.widget.AnimCircleImageView
android:id="@+id/window_circle_img_new"

View File

@@ -69,7 +69,7 @@
<dimen name="module_media_pop_window_inner_height">112px</dimen>
<dimen name="module_media_pop_window_inner_padding">30px</dimen>
<dimen name="module_media_pop_window_anim_img_size">80px</dimen>
<dimen name="module_media_pop_window_anim_img_size_new">90px</dimen>
<dimen name="module_media_pop_window_anim_img_size_new">101px</dimen>
<dimen name="module_media_pop_window_pause">60px</dimen>
<dimen name="module_media_pop_window_size">116px</dimen>
<dimen name="module_media_pop_window_text_width">230px</dimen>

View File

@@ -70,7 +70,7 @@
<dimen name="module_media_pop_window_inner_height">60px</dimen>
<dimen name="module_media_pop_window_inner_padding">18px</dimen>
<dimen name="module_media_pop_window_anim_img_size">44px</dimen>
<dimen name="module_media_pop_window_anim_img_size_new">55px</dimen>
<dimen name="module_media_pop_window_anim_img_size_new">60px</dimen>
<dimen name="module_media_pop_window_pause">60px</dimen>
<dimen name="module_media_pop_window_text_width">123px</dimen>
<dimen name="module_media_pop_window_text_margin">10px</dimen>