自定义Android progress bars

最新推荐文章于 2022-03-15 14:21:25 发布

高低调

最新推荐文章于 2022-03-15 14:21:25 发布

阅读量443

点赞数

CC 4.0 BY-SA版权

分类专栏： android 文章标签：自定义Android progress

本文链接：https://blog.youkuaiyun.com/lazyer_dog/article/details/50205989

android 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了如何在Android中自定义进度条样式，包括使用XML文件为进度条设置背景和进度显示，并解释了使用clip标签的重要性。此外，文章还讲解了不确定进度情况下的自定义方法，以及如何通过XML实现进度条的不确定状态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先 各版本默认的进度条样式 
现在我们开始自定义样式

<ProgressBar

    android:id="@+id/progressBar2"

    style="?android:attr/progressBarStyleHorizontal"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:layout_alignParentLeft="true"

    android:layout_below="@+id/progressBar1"

    android:layout_marginTop="30dp"

    android:progress="50"

    android:progressDrawable="@drawable/progressbar2"
/>

注意标红的一行 android:progressDrawable是关键属性

以下是progressbar2 xml文件内容

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:id="@android:id/background">
    <shape>
      <corners android:radius="5dip" />
      <gradient
        android:angle="270"
        android:centerColor="#ff5a5d5a"
        android:centerY="0.5"
        android:endColor="#ff747674"
        android:startColor="#ff9d9e9d" />
    </shape>
  </item>
  <item android:id="@android:id/progress">
    <clip>
      <shape>
        <corners android:radius="5dip" />
          <gradient
            android:angle="0"
            android:endColor="#ff009900"
            android:startColor="#ff000099" />
      </shape>
    </clip>
  </item>
</layer-list>

这样子之后结果就是这样子的

我们来学习下是如何造成这个改变的

注意到xml中包含两个标签，第一个是background 指定进度条背景的显示 第二个是progress 指定进度条样式的显示

两者主要区别在progress标签下多包含了一个标签 clip 这个是重点也是唯一需要注意的地方，如果不指定clip，会造成进度条永远显示100%

（之前在开发中我也碰到这个问题，很奇怪的现象，后来是改为用图片来替换shap 避开了这个问题才做到自定义样式，现在找到了问题所在，由此

也可以猜测 progress样式是通过指定clip的level来实现的）

===========================================分割线======================================================

上述的是确定进度情况下的自定义，这儿说不确定进度情况下的progress bar。

android:indeterminateDrawable="@drawable/customize_pb2"

关键属性是这个

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" >
    <shape
        android:shape="oval"
        android:useLevel="false" >
        <size
            android:height="48dip"
            android:width="48dip" />
        <gradient
            android:centerColor="#ff000000"
            android:centerY="0.50"
            android:endColor="#ff00ff00"
            android:startColor="#ff000000"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

文件内容如上，结果如下：

经典的radar 扫描