Android Studio中使用自定义logo实现底部向上加载进度条咨询

整体实现思路为双层Logo叠加+上层垂直裁剪：底层显示未加载状态的淡色/白色Logo，上层显示原色Logo，通过控制上层的裁剪比例匹配进度值，即可实现从下向上填充的加载效果。

1. 保存矢量Logo文件 #

将你提供的矢量代码保存到项目res/drawable目录下，命名为ic_custom_logo.xml。

2. 定义进度图层Drawable #

在res/drawable目录下新建logo_progress_drawable.xml，配置双层叠放逻辑：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底层：未加载区域的淡色Logo，可自行修改tint值调整未加载颜色 -->
    <item android:id="@+id/logo_background">
        <bitmap
            android:src="@drawable/ic_custom_logo"
            android:tint="#FFFFFF" />
    </item>
    <!-- 上层：已加载区域的原色Logo，垂直裁剪、从底部开始显示 -->
    <item android:id="@+id/logo_foreground">
        <clip
            android:drawable="@drawable/ic_custom_logo"
            android:clipOrientation="vertical"
            android:gravity="bottom"
            android:tint="#4F576C" />
    </item>
</layer-list>

3. 布局中引入进度控件 #

直接用ImageView承载进度Drawable即可，无需自定义View：

<ImageView
    android:id="@+id/iv_logo_progress"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:src="@drawable/logo_progress_drawable"
    android:contentDescription="加载进度标识" />

如果你的项目minSdk版本低于21，需要开启矢量图兼容：

1. 在模块build.gradle的defaultConfig块中添加配置：

   defaultConfig {
       // 其他配置...
       vectorDrawables.useSupportLibrary = true
   }
   

2. 将布局中ImageView的android:src改为app:srcCompat。

4. 代码控制进度 #

ClipDrawable的显示比例通过level属性控制，取值范围为0_{10000，0为完全裁剪（上层完全隐藏）、10000为完全显示，对应0%}100%的进度。

Kotlin 示例 #

// 初始化获取上层裁剪Drawable
val progressIv = findViewById<ImageView>(R.id.iv_logo_progress)
val layerDrawable = progressIv.drawable as LayerDrawable
val foregroundClip = layerDrawable.findDrawableByLayerId(R.id.logo_foreground) as ClipDrawable

// 对外暴露的进度设置方法，progress取值范围0~100
fun setLoadProgress(progress: Int) {
    val safeProgress = progress.coerceIn(0, 100)
    foregroundClip.level = safeProgress * 100
}

// 示例：设置50%进度
setLoadProgress(50)

// 可选：无限循环加载动画
fun startInfiniteLoadAnim() {
    ValueAnimator.ofInt(0, 100).apply {
        duration = 2500
        repeatCount = ValueAnimator.INFINITE
        addUpdateListener {
            setLoadProgress(it.animatedValue as Int)
        }
        start()
    }
}

Java 示例 #

// 初始化获取上层裁剪Drawable
ImageView progressIv = findViewById(R.id.iv_logo_progress);
LayerDrawable layerDrawable = (LayerDrawable) progressIv.getDrawable();
ClipDrawable foregroundClip = (ClipDrawable) layerDrawable.findDrawableByLayerId(R.id.logo_foreground);

// 进度设置方法，progress取值范围0~100
public void setLoadProgress(int progress) {
    int safeProgress = Math.max(0, Math.min(100, progress));
    foregroundClip.setLevel(safeProgress * 100);
}

// 示例：设置50%进度
setLoadProgress(50);

注意事项 #

• 可自行修改底层Logo的tint值调整未加载区域的颜色，例如淡灰色#F5F5F5
• 矢量图可自适应ImageView的宽高，不会出现失真问题
• 该方案兼容Logo本身的透明区域，只会裁剪Logo实体部分的显示范围

内容的提问来源于stack exchange，提问作者Rey