从水平ProgressBar删除垂直填充


Answers:


71

我将以下内容用作解决此问题的方法。

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

1
我不需要layout_marginBottom。
AlikElzin-kilaka 2014年

11
android:layout_marginTop="-6dp"为我工作。想知道它是否取决于设备?我只测试上的Xperia Z1
托尔比约恩卡普尔汉森

2
@ThorbjørnKappelHansen取决于设备。Galaxy S6和-6dp的边距顶部无法按预期工作。
穆罕默德·阿卜杜勒·拉希姆

1
我认为保证金将取决于进度条和android版本的大小。
Noel

2
使用Framelayout(例如此答案是更好的解决方案,并且不依赖于手机尺寸/类型/操作系统版本
koceeng

57

这就是我使用Juozas的答案的方式:

我的身高ProgressBar是4dp。所以,我创建了一个FrameLayout具有高度4DP和设定layout_gravityProgressBarcenter。它就像一个魅力。

<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>

23
这是一个好主意,但是使用支持库进度条,您的代码在Android 7.0上对我不起作用。横条只是变薄了,但顶部仍带有填充物。
山姆

4
@Sam只需设置ProgressBar,例如height = 100dp。由于使用FrameLayout,它仍然保持4dp,但条形看起来更粗。
Megaetron

5
不适用于API 24+。无论我们在其上设置的大小如何,杆都会变得更细。
莫克

35

我最终使用了自定义库来解决此问题。其他大多数解决方案都可以使用,但结果在各种设备上均不一致。

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页面


首先,我尝试避免添加另一个依赖项以删除一些填充。但是所有其他解决方案都以一种或另一种方式/版本失败,最终这需要3分钟才能使它起作用!谢谢。
ToniTornado

32
整个库仅用于固定视图上的填充。去Google的方式。
丹尼

您可能想在上面使用@ style / Widget.AppCompat.ProgressBar.Horizo​​ntal(取决于您的设置)
ror

30

如果仍然需要帮助,可以尝试以下方法:

<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_toTopOfconstraintBottom_toTopOf属性应用于同一元素(在本例中,这是指导原则)。


4
由于它可以完美地工作,因此应将其标记为正确答案!
Philio '18

1
这是正确的答案!您与所有设备(未提供负边距)和android版本(框架布局解决方案未提供)兼容。另外,您不必通过将系统可绘制对象导入应用程序来完成所有需要的工作(该应用程序无法在系统上为所有android版本提供一致的UI)。
Vaios

2
@Ali_Waris感谢您发布答案,我很想了解这种解决方案,因为它无法正常工作。您能否扩展答案以包括ConstraintLayout和答案准则?
scottyab

这里的准则是什么?它会去哪里?
Iamgopal

16

可以在父级中绘制垂直居中的ProgressBar,以剪切掉填充。由于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>

1
这适用于Android 7.0,但是在运行Android 4.1.2的Sony Xperia M上没有进度条。
山姆

@Sam感谢您的举报!如果将第一个FrameLayout的高度从4dp更改为48dp,会看到什么?
Juozas Kontvainis

出现进度条,但是它下面有很多填充,而上面有一点填充。
山姆

@Sam我已经更新了答案,希望它可以在您的Sony设备上正常工作。如果没有帮助,建议您检查应用程序主题配置。在KitKat上使用Holo主题应该可以修复它。
Juozas Kontvainis

15

要删除的垂直填充ProgressBar,您可以通过

  • 固定高度 ProgressBar
  • 使用scaleY =“ value”(值=高度/ 4)(4是进度条的默认高度)

示例包含1 wrap_content ProgressBar,1 8dp ProgressBar,1 100dpProgressBar

在此处输入图片说明

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

14

对此问题的完整解决方案如下。万一有人需要代码片段,这就是我所做的。

  1. 复制了所有8个不确定的水平进度条可绘制对象
  2. 使用某些图像操纵器编辑可绘制对象,并删除不必要的填充
  3. 从Android平台复制了名为progress_indeterminate_horizo​​ntal_holo.xml的可绘制XML
  4. 复制了样式Widget.ProgressBar.Horizo​​ntal及其父级
  5. 在布局中手动设置样式和min_height

这是progress_indeterminate_horizo​​ntal_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" />

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

<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>

最后,在我的本地布局文件中将min height设置为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" />

从哪里可以复制第1步中提到的可绘制对象:“ 1。复制所有8个不确定的水平进度条可绘制对象”?
Greenhand 2013年

3
@JeffreyLin我从这个位置复制了它-Subin <your-sdk-folder>/platforms/android-17/data/res/drawable-hdpi/
Sebastian

33
要实现这种常识性行为(在Android中默认情况下),您需要做多少工作,这是否令人惊讶?
2015年

1
和材料设计?
mrroboaat

@aat我认为材料指南没有类似的进度条。:请把这篇文章经过google.com/design/spec/components/...
李苏滨塞巴斯蒂安

10

在使用带有水平样式的进度栏时遇到了相同的问题。

根本原因是进度栏的默认9色可绘制图形:(progress_bg_holo_dark.9.png)具有一些垂直的透明像素作为填充。

对我有用的最终解决方案:自定义进度可绘制对象,我的示例代码如下:

custom_horizo​​ntal_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"/>

这可能是最好的解决方案。但是,您的示例代码在运行Android 4.1.2的Sony Xperia M上未显示进度条。
山姆

8

一种技巧是在进度栏中添加负边距。

下面是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" />

代码结果


增加负利润为我解决了这个问题。谢谢!
icarovirtual

5

Subin的答案似乎(目前)是唯一一个不会受到将来的Android ProgressBar版本破坏的脆弱的破解。

但是,我没有费心地浪费资源,对其进行修改并无限期地进行维护,而是选择使用MaterialProgressBar库为我们做到这一点:

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:layout_gravity="bottom"
    custom:mpb_progressStyle="horizontal"
    custom:mpb_showTrack="false"
    custom:mpb_useIntrinsicPadding="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal.NoPadding"
/>

在build.gradle中:

// Android horizontal ProgressBar doesn't allow removal of top/bottom padding
compile 'me.zhanghai.android.materialprogressbar:library:1.1.6'

该项目有一个不错的演示,展示了它与内置ProgressBar之间的区别。


4

如果有人仍在寻找解决方案-检查此评论

将最小高度设置为4 dp

   android:minHeight="4dp"

--

  <ProgressBar
    android:id="@+id/web_view_progress_bar"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="false"
    android:max="100"
    android:min="0"
    android:progress="5"
    android:minHeight="4dp"
    android:progressTint="@color/vodafone_red"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:progress="60" />

我更喜欢这个答案。
Sam Chen

2

我使用minHeight和maxHeigh。它有助于不同的Api版本。

<ProgressBar
    android:id="@+id/progress_bar"
    style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="3dp"
    android:minHeight="3dp" />

它需要同时使用。Api 23与

android:layout_height="wrap_content"
android:minHeight="0dp"

但是在这种情况下,较低的Api版本会将进度条的高度增加到maxHeight。


2

尝试以下方法:

<ProgressBar
    android:id="@+id/progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:progress="25"
    android:progressTint="@color/colorWhite"
    android:progressBackgroundTint="@color/colorPrimaryLight"
    android:layout_width="match_parent"
    android:layout_height="4dp" />

...,然后根据您的需要配置进度条,因为它最初将显示带有黄色进度色和灰色进度背景色的中型条。另外,请注意没有垂直填充。


2

在Linearlayout内这样使用

 <LinearLayout
        android:layout_width="match_parent"
        android:background="#efefef"
        android:layout_height="wrap_content">

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

    </LinearLayout>

很棒!下次描述您的代码做什么以及您做了什么更改。;-)
Jokela的开发人员


1

我正在使用style="@style/Widget.AppCompat.ProgressBar.Horizontal",摆脱利润非常容易。该样式是:

    <item name="progressDrawable">@drawable/progress_horizontal_material</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_material</item>
    <item name="minHeight">16dip</item>
    <item name="maxHeight">16dip</item>

我只是覆盖了最小/最大高度:

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:indeterminate="true"
        android:minHeight="2dp"
        android:maxHeight="2dp" />

我从没对通用进度栏感到满意,最后还是转到了一个库:me.zhanghai.android.materialprogressbar.MaterialProgressBar
Anthony

1

无需下载任何新模块,甚至无需在进度栏周围放置FrameLayout。这些全都是骇客。仅2个步骤:

在你的any.xml中

<ProgressBar
    android:id="@+id/workoutSessionGlobalProgress"
    android:layout_width="match_parent"
    android:layout_height="YOUR_HEIGHT"
    android:progressDrawable="@drawable/progress_horizontal"
    android:progress="0"
    <!-- High value to make ValueAnimator smoother -->
    android:max="DURATION * 1000"
    android:indeterminate="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal"/>

progress_horizo​​ntal.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:startColor="#ff9d9e9d"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff747674"
                    android:angle="270"
                    />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                        />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                        />
            </shape>
        </clip>
    </item>

</layer-list>

通常,这些是更改您不喜欢的代码的步骤。只需找到源代码并找出要更改的内容即可。如果遵循ProgressBar源代码,则将找到它引用的名为progress_horizo​​ntal.xml的文件。基本上,我是如何解决所有XML问题的。


0
 <ProgressBar
        android:layout_marginTop="-8dp"
        android:layout_marginLeft="-8dp"
        android:layout_marginRight="-8dp"
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:indeterminate="false"
        android:indeterminateTint="@color/white"
        android:max="100"
        android:paddingStart="8dp"
        android:paddingRight="0dp"
        android:progressDrawable="@drawable/progress_bg" />

0
<androidx.core.widget.ContentLoadingProgressBar
                    android:id="@+id/progressBar"
                    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:indeterminate="true"
                    android:paddingTop="2dp"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toTopOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"/>

请不要简单地发布代码。给您的答案一些背景。
马丁·加尔

0

只需使用没有隐藏边距的Material ProgressIndicator。

<com.google.android.material.progressindicator.ProgressIndicator
        android:id="@+id/progressBar"
        style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Indeterminate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:indicatorColor="@color/colorPrimary"
        app:trackColor="@color/colorAccent" />

-1

一个简单的没有花招的解决方案是采用Android的任何版本兼容,不需要外部库被伪造ProgressBar有两个ViewsLinearLayout。这就是我最后得到的。看起来很整洁,这种方法非常灵活-您可以以时髦的方式对其进行动画处理,添加文本等。

布局:

<LinearLayout
    android:id="@+id/inventory_progress_layout"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/inventory_progress_value"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/inventory_progress_remaining"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

码:

public void setProgressValue(float percentage) {
    TextView progressValue = (TextView) findViewById(R.id.inventory_progress_value);
    TextView progressRemaining = (TextView) findViewById(R.id.inventory_progress_remaining);

    LinearLayout.LayoutParams paramsValue = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    LinearLayout.LayoutParams paramsRemaining = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

    paramsValue.weight = (100 - percentage);
    paramsRemaining.weight = percentage;

    progressValue.setLayoutParams(paramsValue);
    progressRemaining.setLayoutParams(paramsRemaining);

}

结果(添加了一些海拔):

在此处输入图片说明


-1

最好的解决方案应该是

android:minHeight="0dp"

没有解决方法,并且像魅力一样工作。


没用,请您解释一下为什么要用?
humble_wolf

@humble_wolf在我写答案时,它为我自己的上一个项目工作;可能取决于某些特定版本的库?它应该起作用,因为进度条之类的填充不是实际填充,而是minHeight大于预定义的0(例如32dp)。通过更改此属性,您将获得不同的外观。
范范

不是在Inderminate = true模式下为我工作,可能是在确定模式下工作。如果您真的希望这是一个答案,请在所有条件下写下答案中的说明。
humble_wolf
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.