【问题标题】:How to make custom progress bar with indicator image, like whatsapp?如何使用指示器图像制作自定义进度条,例如whatsapp?
【发布时间】:2016-02-23 10:55:40
【问题描述】:

我在您的 res->drawable 文件夹中创建了一个名为 customprogressbar.xml 的 XML 文件:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Define the background properties like color etc -->
    <item android:id="@android:id/background">
    <shape>
        <gradient
                android:startColor="#000001"
                android:centerColor="#0b131e"
                android:centerY="1.0"
                android:endColor="#0d1522"
                android:angle="270"
        />
    </shape>
   </item>

  <!-- Define the progress properties like start color, end color etc -->
  <item android:id="@android:id/progress">
    <clip>
        <shape>
            <gradient
                android:startColor="#007A00"
                android:centerColor="#007A00"
                android:centerY="1.0"
                android:endColor="#06101d"
                android:angle="270"
            />
        </shape>
    </clip>
    </item>
</layer-list>

和

<ProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    android:progressDrawable="@drawable/custom_progressbar"         
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

现在我有了颜色,但我需要在填充和剩余之间放置指示图像。

有什么想法吗?

【问题讨论】:

  • 您认为指标图像到底是什么?哪个指标代表什么?
  • 如果你看到截图,你可以看到填充和剩余之间的一点。

标签: android android-progressbar whatsapp


【解决方案1】:

您看到的是一个 Seekbar,而不是一个普通的 Progressbar。圆形指示器称为拇指,您可以添加任何您喜欢的图像(以及自定义进度条)。

<SeekBar ...
    android:thumb="@drawable/your_thumb"
    android:progressDrawable="@drawable/progress_bar_layers"
 />

【讨论】:

【解决方案2】:

如果“指标图像”表示那里的圆圈,那么我不确定这是否可以通过 ProgressBar 完成。

在我看来,这更像是一个 SeekBar,而不是一个 ProgressBar。它们实际上是相同的,只是 SeekBar 具有“thumb”属性。这可能对你有用:

<SeekBar
   android:id="@+id/seekBar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:thumb="@drawable/thumb_image"
   android:progressDrawable="@drawable/customprogressbar.xml"
/>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-08-24
    相关资源
    最近更新 更多