抽离优化速度卡片

This commit is contained in:
董宏宇
2021-08-25 21:27:37 +08:00
parent c2d7d121f2
commit 8a89d48ecf
14 changed files with 149 additions and 104 deletions

View File

@@ -0,0 +1,184 @@
package com.mogo.module.hmi.ui.widget;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
import com.mogo.module.hmi.R;
/**
* created by wujifei on 2021/3/24 16:20
* describe:
*/
public class SpeedChartView extends View {
//中心的文字描述
private String mDes = "KM/H";
//根据数据显示的圆弧Paint
private Paint mArcPaint;
//圆弧颜色
private int mArcColor;
//圆弧的画笔的宽度
private float mStrokeWith = getResources().getDimension(R.dimen.module_ext_arcView_stroke_with);
//文字描述的paint
private Paint mTextPaint;
//当前进度夹角大小
private float mIncludedAngle = 0;
//当前数据
private int currentValue;
//最大数据
private int maxValue = 240;
//圆弧背景的开始和结束间的夹角大小
private float mAngle = 270;
//上次绘制圆弧夹角
private float lastAngle = 0;
public SpeedChartView(Context context) {
this(context, null);
}
public SpeedChartView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public SpeedChartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//初始化paint
initPaint();
//绘制弧度
drawArc(canvas);
//绘制文本
drawText(canvas);
}
private void drawText(Canvas canvas) {
Rect mRect = new Rect();
String mValue = String.valueOf(currentValue);
mTextPaint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
//绘制中心的数值
mTextPaint.getTextBounds(mValue, 0, mValue.length(), mRect);
canvas.drawText(mValue, getWidth() / 2, getHeight() / 2 + mRect.height() / 2 - 10, mTextPaint);
mTextPaint.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
//绘制中心文字描述
mTextPaint.setTextSize(getResources().getDimension(R.dimen.module_ext_arcView_des_text_size));
mTextPaint.getTextBounds(mDes, 0, mDes.length(), mRect);
canvas.drawText(mDes, getWidth() / 2, getHeight() * 17 / 20 + mRect.height() / 2, mTextPaint);
}
private void drawArc(Canvas canvas) {
//绘制圆弧背景
RectF mRectF = new RectF(mStrokeWith, mStrokeWith, getWidth() - mStrokeWith, getHeight() - mStrokeWith);
canvas.drawArc(mRectF, 135, mAngle, false, mArcPaint);
//绘制当前数值对应的圆弧
mArcPaint.setColor(mArcColor);
//根据当前数据绘制对应的圆弧
canvas.drawArc(mRectF, 135, mIncludedAngle, false, mArcPaint);
}
private void initPaint() {
//圆弧的paint
mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
//抗锯齿
mArcPaint.setAntiAlias(true);
mArcPaint.setColor(Color.parseColor("#151D4C"));
//设置透明度数值为0-255
mArcPaint.setAlpha(100);
//设置画笔的画出的形状
mArcPaint.setStrokeJoin(Paint.Join.ROUND);
mArcPaint.setStrokeCap(Paint.Cap.ROUND);
//设置画笔类型
mArcPaint.setStyle(Paint.Style.STROKE);
//画笔宽度
mArcPaint.setStrokeWidth(mStrokeWith);
//中心文字的paint
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(Color.parseColor("#FFFFFF"));
//设置文本的对齐方式
mTextPaint.setTextAlign(Paint.Align.CENTER);
//mTextPaint.setTextSize(getResources().getDimensionPixelSize(R.dimen.dp_12));
mTextPaint.setTextSize(getResources().getDimension(R.dimen.module_ext_arcView_center_text_size));
}
/**
* 为绘制弧度及数据设置动画
*
* @param startAngle 开始的弧度
* @param currentAngle 需要绘制的弧度
* @param time 动画执行的时长
*/
private void setAnimation(float startAngle, float currentAngle, int time) {
//绘制当前数据对应的圆弧的动画效果
ValueAnimator progressAnimator = ValueAnimator.ofFloat(startAngle, currentAngle);
progressAnimator.setDuration(time);
progressAnimator.setTarget(mIncludedAngle);
progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mIncludedAngle = (float) animation.getAnimatedValue();
//重新绘制,不然不会出现效果
postInvalidate();
}
});
//开始执行动画
progressAnimator.start();
}
/**
* 设置弧形颜色
*
* @param value 颜色值
*/
public void setArcColor(int value) {
mArcColor = value;
}
/**
* 设置数据
*
* @param value 当前绘制的值
*/
public void setValues(int value) {
//完全覆盖
if (value > maxValue) {
value = maxValue;
}
if (value < 0) {
value = 0;
}
currentValue = value;
//计算弧度比重
float scale = (float) currentValue / maxValue;
//计算弧度
float currentAngle = scale * mAngle;
//开始执行动画
setAnimation(lastAngle, currentAngle, 1000);
lastAngle = currentAngle;
//重新绘制
postInvalidate();
}
}

View File

@@ -0,0 +1,111 @@
package com.mogo.module.hmi.ui.widget
import android.content.Context
import android.content.Intent
import android.graphics.Color
import android.location.Location
import android.util.AttributeSet
import android.util.Log
import android.view.Gravity
import android.view.View
import android.widget.FrameLayout
import com.alibaba.android.arouter.launcher.ARouter
import com.mogo.commons.debug.DebugConfig
import com.mogo.map.MogoLatLng
import com.mogo.map.navi.IMogoCarLocationChangedListener2
import com.mogo.module.common.MogoApisHandler
import com.mogo.module.hmi.R
import com.mogo.module.service.receiver.MogoReceiver
import com.mogo.service.IMogoServiceApis
import com.mogo.service.MogoServicePaths
import com.mogo.service.statusmanager.IMogoStatusChangedListener
import com.mogo.service.statusmanager.StatusDescriptor
/**
* @author xiaoyuzhou
* @date 2021/8/25 8:25 下午
*/
class SpeedPanelView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr),
IMogoCarLocationChangedListener2,
IMogoStatusChangedListener {
val TAG = "SpeedPanelView"
private var mMogoServiceApis: IMogoServiceApis =
ARouter.getInstance().build(MogoServicePaths.PATH_SERVICE_APIS)
.navigation(context) as IMogoServiceApis
var mContext: Context
var mSpeedChartView: SpeedChartView
init {
setBackgroundResource(R.drawable.yi_biao_pan_bg_nor)
mContext = context
mSpeedChartView = SpeedChartView(context)
val layoutParams = LayoutParams(
resources.getDimension(R.dimen.module_ext_arcView_width).toInt(),
resources.getDimension(R.dimen.module_ext_arcView_height).toInt()
)
layoutParams.gravity = Gravity.CENTER
mSpeedChartView.layoutParams = layoutParams
addView(mSpeedChartView)
if (DebugConfig.isDebug()) {
mSpeedChartView.isLongClickable = true
mSpeedChartView.setOnLongClickListener { v ->
Log.d(TAG, "长按显示状态工具栏")
val intent = Intent()
intent.putExtra("oper", 52)
MogoApisHandler.getInstance().apis.intentManagerApi
.invoke(MogoReceiver.ACTION_MOCK, intent)
true
}
}
// 注册位置回调
mMogoServiceApis.registerCenterApi
.registerCarLocationChangedListener(TAG, this)
// 注册VR模式回调
mMogoServiceApis.statusManagerApi
.registerStatusChangedListener(TAG, StatusDescriptor.VR_MODE, this)
}
override fun onDetachedFromWindow() {
super.onDetachedFromWindow()
// 解除注册
mMogoServiceApis.registerCenterApi
.unregisterMogoLocationListener(TAG)
mMogoServiceApis.statusManagerApi
.unregisterStatusChangedListener(TAG, StatusDescriptor.VR_MODE, this)
}
override fun onCarLocationChanged(latLng: MogoLatLng?) {
}
override fun onCarLocationChanged2(latLng: Location) {
val speed = (latLng.speed * 3.6f).toInt()
mSpeedChartView.setArcColor(Color.parseColor(if (speed > 60) "#DB3137" else "#3E77F6"))
mSpeedChartView.setValues(speed)
setBackgroundResource(if (speed > 60) R.drawable.yi_biao_pan_bg_speeding else R.drawable.yi_biao_pan_bg_nor)
}
override fun onStatusChanged(descriptor: StatusDescriptor?, isTrue: Boolean) {
if (descriptor == StatusDescriptor.VR_MODE) {
try {
visibility = if (isTrue) {
View.VISIBLE
} else {
View.GONE
}
} catch (e: Exception) {
e.printStackTrace()
}
}
}
}