一、引言
在车机应用开发中，进度条是一种常见的UI元素，用于显示任务进度或状态，如电池电量、下载进度等。
二、开发环境介绍
本示例使用Android Studio作为开发环境，采用XML、Java和Kotlin实现布局和逻辑实现有两种方案。
三、技术实现
第一种方案
在XML布局文件中定义进度条。使用ProgressBar控件，设置其样式、尺寸和位置，适应车机应用的界面。
<ProgressBar
android:id="@ id/charge_progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="360px"
android:layout_height="90px"
android:layout_gravity="center"
android:max="100"
android:min="0"
android:progress="40"
android:progressDrawable="@drawable/carinfo_c10_progress"
tools:ignore="PxUsage" />
接下来，创建进度条的图形资源。通常是一个包含背景层和进度层的layer-list。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--背景层-->
<item android:id="@android:id/background">
<bitmap android:src="@drawable/carinfo_c10_progress_n"/>
</item>
<!--进度条层-->
<item android:id="@android:id/progress">
<bitmap android:src="@drawable/carinfo_c10_progress_p"/>
</item>
</layer-list>Java代码，通过findViewById获取进度条的引用，设置进度值。
ProgressBar mChargeProgressBar = getMainView().findViewById(R.id.charge_progress_bar);
mChargeProgressBar.setProgress(40);Kotlin代码
代码语言：txt复制val mChargeProgressBar: ProgressBar = getMainView().findViewById(R.id.charge_progress_bar)
mChargeProgressBar.progress = 40第二种方案
编写Java实现自定义进度条控件的逻辑
代码语言：java复制package com.spd.carinfo.view.Bagoo.c10.widget;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ProgressBar;
import androidx.core.content.ContextCompat;
import com.spd.carinfo.ui.R;
/**
* @author Nimyears
*
*/
public class C10CustomProgressBar extends ProgressBar {
private Drawable backgroundDrawable;
private Drawable progressDrawable;
public C10CustomProgressBar(Context context) {
super(context);
init(context);
}
public C10CustomProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public C10CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
// 初始化背景和进度
private void init(Context context) {
backgroundDrawable = ContextCompat.getDrawable(context, R.drawable.carinfo_c10_progress_n); // 背景
progressDrawable = ContextCompat.getDrawable(context, R.drawable.carinfo_c10_progress_p); // 进度
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
// 画背景
if (backgroundDrawable != null) {
backgroundDrawable.setBounds(0, 0, width, height);
backgroundDrawable.draw(canvas);
}
// 计算当前进度的比例
float progressRatio = getProgress() / (float) getMax();
int progressWidth = (int) (width * progressRatio); // 当前进度的宽度
// 画进度条
if (progressDrawable != null) {
progressDrawable.setBounds(0, 0, progressWidth, height);
progressDrawable.draw(canvas);
}
}
}
Kotlin代码
代码语言：txt复制package com.spd.carinfo.view.Bagoo.c10.widget
import android.content.Context
import android.graphics.Canvas
import android.graphics.drawable.Drawable
import android.util.AttributeSet
import android.widget.ProgressBar
import androidx.core.content.ContextCompat
import com.spd.carinfo.ui.R
/**
* @author Nimyears
*/
class C10CustomProgressBar(context: Context) : ProgressBar(context) {
private var backgroundDrawable: Drawable? = null
private var progressDrawable: Drawable? = null
constructor(context: Context, attrs: AttributeSet?) : this(context) {
init(context)
}
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : this(context, attrs) {
init(context)
}
private fun init(context: Context) {
backgroundDrawable = ContextCompat.getDrawable(context, R.drawable.carinfo_c10_progress_n) // 背景
progressDrawable = ContextCompat.getDrawable(context, R.drawable.carinfo_c10_progress_p) // 进度
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val width = getWidth()
val height = getHeight()
// 画背景
backgroundDrawable?.let {
it.setBounds(0, 0, width, height)
it.draw(canvas)
}
// 计算当前进度的比例
val progressRatio = getProgress() / getMax().toFloat()
val progressWidth = (width * progressRatio).toInt() // 当前进度的宽度
// 画进度条
progressDrawable?.let {
it.setBounds(0, 0, progressWidth, height)
it.draw(canvas)
}
}
}
XML 配置
代码语言：xml复制<com.spd.carinfo.view.Bagoo.c10.widget.C10CustomProgressBar
android:id="@ id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="50"
android:max="100"
android:min="0"/>
四、效果图
charge五、结语
自定义进度条UI的实现是车机应用开发中的一个实用技巧。通过本文的介绍，希望帮助开发者在车机应用中实现更美观和实用的进度条。
谢谢大家的阅读 ）
