android 工作室中的自定义徽标作为进度条

Custom logo as progress bar in android studio

我想将我的徽标添加为进度条而不是圆角加载。我已经为徽标制作了 xml 文件,任何人都可以帮助我。要加载的徽标颜色是#4F576C

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="962dp"
    android:height="1000dp"
    android:viewportWidth="962"
    android:viewportHeight="1000">
  <path
      android:pathData="M273.49,0L354.35,0C369.89,1.61 385.42,3.33 400.95,5.09C548.19,24.24 688.17,94.89 790.98,202.02C843.12,255.89 885.78,318.88 916.81,387.1C918.52,390.97 918.63,395.84 916.54,399.58C911.55,405.74 903.84,408.49 896.99,411.98C875.62,421.58 855.08,432.91 833.94,442.97C829.86,445.37 824.64,444.68 820.72,442.31C815.61,437.63 813.09,430.95 810.07,424.89C761.35,321.35 678.62,234.51 578.23,179.78C484.58,128.9 376.16,104.74 269.79,113.89C261.95,114.12 252.83,116.37 246.11,110.87C241.48,103.88 242.44,95.03 241.61,87.1C240.59,65.4 238.8,43.74 237.67,22.04C237.24,15.34 237.3,6.62 244.68,3.73C253.81,0.4 263.99,1.32 273.49,0Z"
      android:fillColor="#4f576c"/>
  <path
      android:pathData="M282.45,174.59C302.9,173.59 323.4,173.82 343.87,174.24C446.84,181.28 547.83,220.48 627.01,286.99C643.97,300.59 658.93,316.39 674.21,331.79C706.02,366.37 732.36,405.82 753.05,447.98C756.62,455.72 761.73,463.24 762.07,472.03C761.85,476.86 758.43,481.16 754,482.98C730.08,495.14 705.91,506.83 682.05,519.11C677.63,521.58 672.38,522.55 667.38,521.72C659.55,518.06 657.61,508.98 653.96,502.02C622.96,435.87 572.21,379.14 509.6,341.44C438.85,297.69 353.1,279.14 270.53,288.37C262.8,290.62 254.57,285.33 253.74,277.2C251.56,249.68 250.58,222.06 248.41,194.54C246.87,187.68 249.99,179.38 257.06,177.12C265.4,175.34 273.97,175.22 282.45,174.59Z"
      android:fillColor="#4f576c"/>
  <path
      android:pathData="M302.45,341.55C343.79,339.56 385.19,347.21 424.1,360.91C441.27,367.37 457.72,375.61 473.96,384.12C515.97,408.35 552.6,442 579.76,482.23C591.22,500.05 601.71,518.57 609.94,538.12C611.57,542.38 612.79,547.4 610.73,551.71C608.94,556.2 603.87,557.8 600.05,560.08C576.6,571.54 553.38,583.47 529.96,594.99C525.88,596.33 521.32,599.09 517.05,597.01C511.62,594.8 508.78,589.26 506.83,584.08C485.26,530.51 440.25,486.77 385.96,467.02C351.98,454.17 314.43,450.85 278.61,456.56C272.42,457.25 265.46,453.03 264.57,446.58C262.88,436.79 263.07,426.81 262.27,416.94C261.28,397.61 259.35,378.33 258.94,358.97C257.42,352.6 262.1,345.64 268.4,344.47C279.61,342.27 291.08,342.17 302.45,341.55Z"
      android:fillColor="#4f576c"/>
  <path
      android:pathData="M277.44,532.58C326.43,527.13 377.01,545.48 411.79,580.21C448.27,614.64 466.21,666.34 462.04,716.01C459.36,744.56 449.39,772.45 433.05,796.04C425.07,808.16 414.47,818.2 405.7,829.72C373.32,870.64 340.76,911.42 308.41,952.38C305.91,955.16 303.76,958.45 300.59,960.55C294.21,963.76 285.97,962.25 281.83,956.19C251.9,918.15 221.66,880.34 191.6,842.39C183.35,832.01 175.28,821.47 166.28,811.72C139.9,782.1 124.86,742.7 124.93,703.01C122.77,648.93 150.65,595.71 194.06,564.08C218.31,546.26 247.47,535.25 277.44,532.58M282.41,623.54C273.49,624.49 265.02,627.91 257.19,632.16C232.39,645.69 216.89,674.81 220.11,702.98C221.58,729.22 239.06,753.49 263.04,763.94C285.82,774.83 314.16,771.95 335.01,758C345.41,751.59 353.06,741.6 359.18,731.21C373.63,704.24 369.18,668.3 347.83,646.16C331.46,628.44 306.28,619.57 282.41,623.54Z"
      android:fillColor="#4f576c"/>
</vector>

我想从底部加载,当它加载时,徽标应该只出现在那个特定区域,其余区域应该是白色,否则我会给出褪色的颜色。谁能帮我这个?提前致谢。

您将使用 AnimationDrawable 而不是 ProgressBar,从原始向量复制并修改为四元向量(如 drawable/phase1.xml ~ drawable/phase4.xml)并将它们列在动画列表中(如drawable/progress.xml)。例如:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/phase1"
        android:duration="100" />
    <item
        android:drawable="@drawable/phase2"
        android:duration="100" />
    <item
        android:drawable="@drawable/phase3"
        android:duration="100" />
    <item
        android:drawable="@drawable/phase4"
        android:duration="100" />
</animation-list>

然后您可以将其加载到 ImageView 中并为其设置动画:

ImageView progress.setImageResource(R.drawable.progress);
((AnimationDrawable) progress.getDrawable()).start();

您的图像有四个部分:大头针和三个圆弧。由于这需要充当进度条,因此您需要一种方法来根据状态单独显示段。 (因为进度条是基于状态的,所以简单的动画是不合适的。)

首先,将每个片段分成一个单独的可绘制文件,然后将所有这些文件组合成一个 Layer List Drawable

<layer-list>
    <item android:drawable="@drawable/meter_pin" />
    <item android:drawable="@drawable/meter_bottom_arc" />
    <item android:drawable="@drawable/meter_middle_arc" />
    <item android:drawable="@drawable/meter_top_arc" />
</layer-list>

现在,您可以单独访问每个图层来设置其 alpha 值。以下代码将查找将上述可绘制对象设置为背景的视图。然后代码将图钉和底部圆弧变为可见,而其他的不可见。

val view = findViewById<View>(R.id.view)
val bg = view.background as LayerDrawable
bg.getDrawable(0).alpha = 255
bg.getDrawable(1).alpha = 255
bg.getDrawable(2).alpha = 0
bg.getDrawable(3).alpha = 0

这会给我们这张图片:

您可以为从不可见到淡化到完全可见的任何组合设置 alpha 值。我会将此代码放入一个单独的 class 中以使其更易于管理,并创建一个 setProgress() 函数来更改其外观。

如果您想以更离散的步骤显示进度,可以使用 Clip Drawable