【问题标题】:Styling indeterminate horizontal progress bar on android在android上设置不确定的水平进度条
【发布时间】:2016-06-01 13:59:47
【问题描述】:

确定进度条的样式很容易,有很多教程可以实现。这是我正在使用的:

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="8dp"
    android:background="@drawable/progress_background"
    android:progressDrawable="@drawable/progress"
    android:id="@+id/progressBar" />

可绘制progress_background.xml:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="@color/colorAccent" />
                <corners android:radius="4dp" />
            </shape>
        </clip>
    </item>
</layer-list>

看起来像这样:

但是当还没有进展时,我想使用不确定的。所以我尝试了:

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="@drawable/progress_background"
        android:progressDrawable="@drawable/progress"
        android:indeterminateTint="@color/colorAccent"
        android:indeterminateTintMode="src_in"
        android:indeterminate="true"
        android:id="@+id/progressBar" />

但不确定的进度不会拉伸到条形高度:

我也尝试使用可绘制文件对其进行样式设置,但它看起来像是损坏的确定进度条(再次从 0 填充到 100)。

所需的不确定进度条应该看起来像常规进度条,但高度为 8dp,圆角。

【问题讨论】:

    标签: android android-styles android-progressbar


    【解决方案1】:

    默认的不确定进度条动画使用非 9-patch pngs。所以它不能超过你的 8dp 高度进度条。您应该使用自定义动画添加android:indeterminateDrawable

    <animation-list
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:oneshot="false">
        <item android:drawable="@drawable/progressbar_indeterminate1" android:duration="50" />
        <item android:drawable="@drawable/progressbar_indeterminate2" android:duration="50" />
        <item android:drawable="@drawable/progressbar_indeterminate3" android:duration="50" />
        ...
        <item android:drawable="@drawable/progressbar_indeterminateX" android:duration="50" />
    </animation-list>
    

    然后制作可绘制对象以像这样对其进行动画处理(可以是 xml 或图像或 9-patch):

    Animation frame 1

    Animation frame 2

    从不使用 AnimatedVectorDrawable 的 android (api21+) 版本来表示不确定的 ProgressBar。

    【讨论】:

    • 是的,我做到了。 “我也尝试使用可绘制文件对其进行样式设置,但它看起来像是损坏的确定进度条(再次从 0 填充到 100)。” - 我没有提供代码(mea culpa),但我试过了
    • 好的。我没有注意到这一点。要完成这项工作,您必须制作自己的自定义动画和一堆 png 文件。我会改变我的答案。
    【解决方案2】:

    我看到很多人都在看这篇文章,所以我想我应该编辑它并分享一个例子:

    注意(此示例不完整,仍在进行中,但我想这是一个起点)

    GitHub:Github Example

    这个例子的重要部分如下:在drawable中创建一个xml文件custom_progress_bar_horizo​​ntal.xml并在下面添加内容。

    <?xml version="1.0" encoding="UTF-8"?>
    
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:id="@android:id/background">
            <shape>
                <padding
                    android:bottom="3dip"
                    android:top="3dip"
                    android:left="3dip"
                    android:right="3dip"/>
                <corners
                    android:radius="5dip" />
                <gradient
                    android:startColor="#2a2b2f"
                    android:centerColor="#2a2b2f"
                    android:centerY="0.50"
                    android:endColor="#2a2b2f"
                    android:angle="270" />
            </shape>
        </item>
        <item
            android:id="@android:id/progress">
            <clip>
                <shape>
                    <corners
                        android:radius="5dip" />
                    <gradient
                        android:startColor="#ff0e75af"
                        android:endColor="#ff1997e1"
                        android:angle="90" />
                </shape>
            </clip>
        </item>
    </layer-list>
    

    styles.xml

    中添加以下代码
    <style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
        <item name="android:minHeight">10dip</item>
        <item name="android:maxHeight">20dip</item>
    </style>
    

    在活动布局中添加样式后,添加:

     <ProgressBar
            android:id="@+id/customProgress"
            style="@style/CustomProgressBar"
            android:layout_width="match_parent"/>
    

    进度显示在下面的框架中有点棘手,因为您需要扩展 ProgressBar 类并在那里进行更改。

    我将在这里留下一些示例,并通知我何时将它们添加到我的 github 项目中。

    如果您想以自己的方式显示进度的好例子:NumberProgressBar

    其他进度条示例:

    Custom progress bar 1

    Custom progress bar 2

    欲了解更多详情,请访问此处。 Android horizontal progress bar?

    【讨论】:

      【解决方案3】:

      你知道,android有一个名为:LinearProgressIndicator的View 您可以在水平进度条中使用不确定动画。

       <com.google.android.material.progressindicator.LinearProgressIndicator
              android:layout_width="280dp"
              android:layout_height="12dp"
              android:indeterminate="true"
              app:indicatorColor="@color/app_brand_primary"
              app:trackColor="@color/color_divider"
              app:trackCornerRadius="6dp"
              app:trackThickness="12dp" />
      

      p.s - 它以编程方式切换不确定值有一种奇怪的行为。要做到这一点,你应该 将可见性设置为不可见, 设置不确定的布尔值, 然后再次显示视图。
      示例:

              progress.isVisible = false
              progress.isIndeterminate = true
              progress.isVisible = true
      

      问题: https://github.com/material-components/material-components-android/issues/1921

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2011-09-20
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-06-26
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多