从水平进度条中移除垂直填充

Question

默认情况下，ProgressBar 在其本身上下有一定的填充。是否有一种方法可以去除这个填充，只保留最终的进度条？

- abergmeier

---

如其他主题所述，设置 maxHeight 无效。 - abergmeier

android:minHeight="4dp" - Sam Chen

Answer 1

我使用以下方法来解决这个问题。

android:layout_marginBottom="-8dp"
android:layout_marginTop="-4dp"

- Stephen Wan

---

我不需要layout_marginBottom。 - AlikElzin-kilaka

android:layout_marginTop="-6dp" 对我有用。不知道它是否与设备有关？我只在 Xperia Z1 上进行了测试。 - Thorbjørn Kappel Hansen

@ThorbjørnKappelHansen 这取决于设备。在Galaxy S6上，-6dp的顶部边距不会按预期工作。 - Muhammad Abdul-Rahim

使用Framelayout（就像这个答案中所示）是更好的解决方案，不依赖于手机大小/类型/操作系统版本。 - koceeng

一个更好的解决方案是 <ProgressBar style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:layout_height="4dp"/> - Alessandro Scarozza

Answer 2

这是我使用Juozas的答案的方法：

我的ProgressBar高度为4dp。因此，我创建了一个高度为4dp的FrameLayout，并将ProgressBar的layout_gravity设置为center。它的效果非常好。

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="4dp">

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_gravity="center"
        android:indeterminate="true" />
</FrameLayout>

注意：一个FrameLayout的作用是裁剪掉多余的部分，如果你遇到ProgressBar仍然很窄的问题，只需将ProgressBar的layout_height设置为一些较大的数字，如100dp。它将完全覆盖FrameLayout，并且只会显示其4dp。

- penduDev

---

这是一个好主意，但你的代码在我使用 Android 7.0 和支持库进度条时无法正常工作。 进度条只变得更细，但仍然在顶部有填充。 - Sam

@Sam 只需将 ProgressBar 设置为 height = 100dp 即可。由于 FrameLayout 的缘故，它仍然保持在4dp，但进度条看起来更厚。 - Megaetron

API 24及以上版本无法正常工作。无论我们设置什么大小，状态栏都会变得更加细小。 - Mauker

Answer 3

如果有人仍需要帮助，可以尝试这个：

<androidx.core.widget.ContentLoadingProgressBar
    android:id="@+id/progress"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    android:indeterminate="true"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/guideline" />

这里，进度条位于ConstraintLayout中，并且必须将constraintTop_toTopOf和constraintBottom_toTopOf属性应用于同一元素（在本例中，是guideline）。

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="48dp">

    <View
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ProgressBar
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />
</androidx.constraintlayout.widget.ConstraintLayout>

- Ali_Waris

---

这应该标记为正确答案，因为它完美地起作用了！ - Philio

这是正确的答案！您兼容所有设备（不使用负边距提供）和 Android 版本（不使用框架布局解决方案提供）。此外，您无需执行导入系统可绘制项到应用程序所需的所有工作（这不会为所有 Android 版本提供一致的 UI）。 - Vaios

@Ali_Waris 谢谢您发布答案，我很想了解这个解决方案，因为我无法使其正常工作。您能否扩展答案，将 ConstraintLayout 和指南线包含在答案中？ - scottyab

我们如何使它的高度变大？ - 3366784

对我来说，即使没有指南，它也能正常工作。我所需要做的就是将 两个 约束锚点都设置在上面元素的底部。 - arkascha

Answer 4

我最终使用了自定义库来解决这个问题。大多数其他解决方案都能起作用，但结果在各种设备上不一致。

MaterialProgressBar

• 在 Android 4.0 及以上版本中外观一致。
• 在不同平台上正确着色。
• 能够去除框架 ProgressBar 的内在填充。
• 能够隐藏框架水平 ProgressBar 的轨道。
• 可用作框架 ProgressBar 的替代品。

要添加 gradle 依赖项：

compile 'me.zhanghai.android.materialprogressbar:library:1.1.7'

要向您的布局中添加没有内在填充的ProgressBar：

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
    android:layout_width="wrap_content"
    android:layout_height="4dp"
    android:indeterminate="true"
    app:mpb_progressStyle="horizontal"
    app:mpb_useIntrinsicPadding="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />

app:mpb_useIntrinsicPadding="false"就能实现这个效果。更多细节请查看GitHub页面。

- Binoy Babu

---

首先，我试图避免添加其他依赖项来删除一些填充。但是所有其他解决方案在某种程度上/版本上都失败了，最终这只需要3分钟就可以使其工作！谢谢。 - RobDil

谷歌，要修复视图的填充就需要整个库。做得好。 - Denny

你可能想要在上面使用@style/Widget.AppCompat.ProgressBar.Horizontal（根据你的设置而定）。 - ror

Answer 5

要去除 ProgressBar 的垂直填充，您可以通过以下方式实现：

• 固定 ProgressBar 的高度
• 使用scaleY="value"（value = height/4）（4是progress bar的默认高度）

示例包含1个wrap_content的ProgressBar，1个8dp的ProgressBar和1个100dp的ProgressBar

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    ...
    android:layout_height="8dp"
    android:scaleY="2" />

- Linh

---

这应该是被接受的答案。最简单的解决方案！ - Monim Kaiser

太棒了！这是最简单的解决方案！ - waseefakhtar

Answer 6

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:id="@+id/progress_loading"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="visible"
    android:indeterminate="true"
    app:indicatorColor="@color/colorAccent"
    app:layout_constraintTop_toBottomOf="@+id/app_bar_pdfview"/>

我正在使用这个新进度条。

implementation 'com.google.android.material:material:1.3.0'

• trackThickness：指示器和轨道的厚度。
• indicatorColor：指示器的颜色（们）。
• trackColor：轨道的颜色。
• trackCornerRadius：指示器和轨道的圆角半径。
• indeterminateAnimationType：不确定动画的类型。
• indicatorDirectionLinear：指示器扫描方向。

- Abdur Rehman

---

现在使用1.3.0-rc01版本，它已经发布了。 - Rahul Mishra

2021年最佳方法。 - SUPERYAO

Answer 7

在父元素中绘制垂直居中的进度条，可以将其剪裁掉填充区域。由于ProgressBar不能比其父元素更大，因此我们必须创建一个更大的父元素，并将其放置在剪切视图中。

<FrameLayout
    android:id="@+id/clippedProgressBar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    tools:ignore="UselessParent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="16dp"
        android:layout_gravity="center_vertical">

        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="true"/>

    </FrameLayout>

</FrameLayout>

- Juozas Kontvainis

---

这在Android 7.0上可以工作，但在运行Android 4.1.2的Sony Xperia M上却没有进度条。 - Sam

@Sam 感谢您的反馈！如果您将第一个FrameLayout的高度从4dp更改为48dp，您会看到什么？ - Juozas Kontvainis

进度条已经出现，但是它下面有很多填充，上面只有一点点填充。 - Sam

@Sam 我已经更新了我的答案，希望它在你的Sony设备上能够正常工作。如果没有帮助，我建议你检查一下你的应用程序主题配置。在KitKat上使用Holo主题应该可以解决问题。 - Juozas Kontvainis

Answer 8

解决这个问题的完整方案如下。以防万一有人需要代码片段，以下是我所做的内容：

1. 复制所有8个不定水平进度条可绘制对象
2. 使用图像处理器编辑可绘制对象并删除不必要的填充
3. 从Android平台中复制名为progress_indeterminate_horizontal_holo.xml的可绘制XML
4. 复制样式Widget.ProgressBar.Horizontal及其父级
5. 在布局中手动设置样式和min_height

以下是progress_indeterminate_horizontal_holo.xml：

<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/progressbar_indeterminate_holo1" android:duration="50" />
    <item android:drawable="@drawable/progressbar_indeterminate_holo2" android:duration="50" />
    <item android:drawable="@drawable/progressbar_indeterminate_holo3" android:duration="50" />
    <item android:drawable="@drawable/progressbar_indeterminate_holo4" android:duration="50" />
    <item android:drawable="@drawable/progressbar_indeterminate_holo5" android:duration="50" />
    <item android:drawable="@drawable/progressbar_indeterminate_holo6" android:duration="50" />
    <item android:drawable="@drawable/progressbar_indeterminate_holo7" android:duration="50" />
    <item android:drawable="@drawable/progressbar_indeterminate_holo8" android:duration="50" />
</animation-list>

样式资源已复制到我的本地样式文件。

<style name="Widget">
    <item name="android:textAppearance">@android:attr/textAppearance</item>
</style>

<style name="Widget.ProgressBar">
    <item name="android:indeterminateOnly">true</item>
    <item name="android:indeterminateBehavior">repeat</item>
    <item name="android:indeterminateDuration">3500</item>
</style>

<style name="Widget.ProgressBar.Horizontal">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:indeterminateDrawable">@drawable/progress_indeterminate_horizontal_holo</item>
</style>

最后，在我的本地布局文件中将最小高度设置为4dp。

<ProgressBar
    android:id="@+id/pb_loading"
    style="@style/Widget.ProgressBar.Horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:indeterminate="true"
    android:minHeight="4dp"
    android:minWidth="48dp"
    android:progressDrawable="@drawable/progress_indeterminate_horizontal_holo" />

- C--

---

我们可以从哪里复制步骤1中提到的可绘制对象：“1. 复制了所有8个不确定水平progressbar可绘制对象”？ - Greenhand

@JeffreyLin 我从此位置复制了它 <your-sdk-folder>/platforms/android-17/data/res/drawable-hdpi/。 - C--

你不觉得很惊奇吗？为了实现在Android中应该默认具备的常识行为，你需要做那么多工作。 - SpaceMonkey

那材料设计呢？ - mrroboaat

@aatt 我认为材料指南没有类似的进度条。请查看此文档：https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators - C--

@Spacemonkey，因为它就是谷歌。 - Neon Warge

Answer 9

在使用水平样式的进度条(progressbar)时，我遇到了同样的问题。

根本原因是进度条的默认9-patch可绘制资源(progress_bg_holo_dark.9.png)有一些垂直透明像素作为填充。

最终解决方案是定制进度绘制资源，以下是我的示例代码:

custom_horizontal_progressbar_drawable.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 android:shape="rectangle">
            <solid android:color="#33ffffff" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#ff9800" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#E91E63" />
            </shape>
        </clip>
    </item>
</layer-list>

布局片段：

<ProgressBar
    android:id="@+id/song_progress_normal"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:layout_alignParentBottom="true"
    android:progressDrawable="@drawable/custom_horizontal_progressbar_drawable"
    android:progress="0"/>

- emotionfxxk

---

这可能是最好的解决方案。然而，你的示例代码在我的运行Android 4.1.2的Sony Xperia M上没有产生进度条。 - Sam

Answer 10

一个技巧是给进度条添加负边距。

以下是XML代码示例，假设它在屏幕顶部：

<ProgressBar
    android:id="@+id/progressBar"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="-7dp"
    android:layout_marginBottom="-7dp"
    android:indeterminate="true" />

- chinmay.d

---

添加负边距为我解决了这个问题。谢谢！ - Ícaro