安卓开发-车机应用实现自定义进度条UI

原创

Nimyears

修改于 2024-09-05 15:03:07

1970

修改于 2024-09-05 15:03:07

一、引言

在车机应用开发中，进度条是一种常见的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代码

val mChargeProgressBar: ProgressBar = getMainView().findViewById(R.id.charge_progress_bar)
mChargeProgressBar.progress = 40

第二种方案

编写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代码

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 配置

<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"/>