在水平进度条中删除填充

In our application we need an indeterminate progress bar, like so:

在我们的应用程序中，我们需要一个不确定的进度条，如下所示：

We can achieve this by setting a negative margin on the ProgressBar, like this:

我们可以通过在ProgressBar上设置负余量来实现这一点，如下所示：

<ProgressBar
    android:id="@+id/progressbar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:marginTop="-7dp"
    android:visibility="@{loading ? View.VISIBLE : View.GONE}" />

BUT because ConstraintLayout does not support negative margins, it will look like this:

但是因为ConstraintLayout不支持负边距，所以它看起来像这样：

OK, the negative margin was a hack. Let's replace it with a different hack, shall we? Let's introduce our custom view CustomProgressBar, which extends ProgressBar and overrides its onDraw method, like this:

好吧，负利润是一个黑客。让我们换一个不同的黑客，好吗？让我们介绍我们的自定义视图CustomProgressBar，它扩展了ProgressBar并覆盖了它的onDraw方法，如下所示：

@Override
protected void onDraw(Canvas canvas) {
    int marginTop = dpToPx(7);
    canvas.translate(0, -marginTop);
    super.onDraw(canvas);
}

But all of this smells like bad code. There has to be a better solution! What would you recommend?

但所有这些都闻起来像坏代码。必须有一个更好的解决方案！你会推荐什么？

4 个解决方案

#1

Another way to do this is to use a Guideline and center ProgressBar between the parent top and the guideline.

另一种方法是在父顶部和指南之间使用指南和中心ProgressBar。

<ProgressBar
    android:id="@+id/progressBar2"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="0dp"
    android:paddingTop="-4dp"
    android:layout_height="wrap_content"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="4dp" />

#2

Solution that feels less like a hack: Wrap a huge ProgressBar in a smaller FrameLayout. That way the FrameLayout constrains its height, but the ProgressBar still shows in full.

感觉不像黑客的解决方案：在较小的FrameLayout中包装一个巨大的ProgressBar。这样FrameLayout就会限制它的高度，但ProgressBar仍会完整显示。

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

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="32dp"
        android:layout_gravity="center" />

</FrameLayout>

#3

I encountered the same problem as well. And like you said, I come across numerous solutions which all seem like a hack that might break something else down the line. With that said, I came across one solution which is to use this library instead for progress bar.

我也遇到了同样的问题。就像你说的那样，我遇到了许多解决方案，这些解决方案看起来都像是一个破坏其他东西的黑客。话虽如此，我遇到了一个解决方案，即使用此库代替进度条。

One thing to note is, it tells you to integrate it by adding:

需要注意的一点是，它告诉您通过添加以下内容来集成它：

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

However, when I used this, it gave me an error from an Android support library for Floating Action Bar. So I'll recommend you to use this instead:

但是，当我使用它时，它给我一个来自浮动操作栏的Android支持库的错误。所以我建议你改用它：

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

A sample code snippet on how I used it:

关于我如何使用它的示例代码段：

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
    android:id="@+id/reviewProgressBar"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="6dp"
    android:layout_below="@+id/my_toolbar"
    android:indeterminate="false"
    app:mpb_progressStyle="horizontal"
    app:mpb_useIntrinsicPadding="false"/>

Hope this helps!

希望这可以帮助！

#4

A dirty workaround I did was set the height of the ProgressBar closely to the to stroke width like so:

我做的一个肮脏的解决方法是将ProgressBar的高度设置为与笔划宽度紧密相似，如下所示：

Progress bar:

进度条：

<ProgressBar
    android:id="@+id/pb_loading_progress"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="2.1dp"
    android:layout_below="@id/tb_browser"
    android:max="100"
    android:progressDrawable="@drawable/style_browser_progress_drawable"
    android:visibility="invisible" />

Progress drawable:

进展可绘性：

<?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="line">
            <stroke
                android:width="2dp"
                android:color="@color/colorPrimary" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip
            android:clipOrientation="horizontal"
            android:gravity="left">
            <shape android:shape="line">
                <stroke
                    android:width="2dp"
                    android:color="@color/white" />
            </shape>
        </clip>
    </item>
</layer-list>

Which looked like this:

看起来像这样：

#1