默认情况下,ProgressBar 在栏本身的上方和下方都有一定的填充。有没有办法删除这个填充,以便最后只有条?
27 回答
我使用以下方法解决此问题。
android:layout_marginBottom="-8dp"
android:layout_marginTop="-4dp"
这就是我使用 Juozas 的答案的方式:
我的高度ProgressBar
是 4dp。所以我创建了一个FrameLayout
高度为 4dp 并将layout_gravity
of设置ProgressBar
为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>
注意: a 的FrameLayout
作用是将多余的东西剪掉,所以如果你遇到ProgressBar
仍然很薄的问题,只需将 的 设置layout_height
为ProgressBar
一些较大的数字,例如100dp
。它将完全覆盖 FrameLayout,并且只会显示4dp
它。
我最终使用自定义库来解决这个问题。大多数其他解决方案都有效,但不同设备的结果并不一致。
材质进度条
- 在 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 页面。
如果有人仍然需要帮助可以试试这个:
<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属性必须应用于同一个元素(在这种情况下,它是指南)。
*** 完整的解决方案:***
<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>
要删除 的垂直填充ProgressBar
,您可以通过
- 固定高度
ProgressBar
- 使用 scaleY="value" (value = height/4) (4是进度条的默认高度)
示例包含 1 wrap_content ProgressBar
、 1 8dp ProgressBar
、 1 100dpProgressBar
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
...
android:layout_height="8dp"
android:scaleY="2" />
可以在父级内绘制垂直居中的 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>
这个问题的完整解决方案如下。以防万一有人需要代码片段,这就是我所做的。
- 复制了所有 8 个不确定的水平进度条可绘制对象
- 使用一些图像操纵器编辑了可绘制对象并删除了不必要的填充
- 从 android 平台复制名为 progress_indeterminate_horizontal_holo.xml 的可绘制 XML
- 复制样式 Widget.ProgressBar.Horizontal 及其父项
- 在布局中手动设置样式和 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" />
我在使用水平样式的进度条时遇到了同样的问题。
根本原因是进度条的默认 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"/>
一个技巧是在进度条中添加负边距。
下面是 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" />
<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:指标的扫掠方向。
如果有人仍在寻找解决方案 - 请查看此评论
将最小高度设置为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" />
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 之间的差异。
对我来说,这是有效的。进度条很清晰。它非常适合。我尝试了不同高度的框架和进度。
<FrameLayout
android:layout_width="match_parent"
android:layout_height="4dp">
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_gravity="center"
android:indeterminate="true"/>
</FrameLayout>
我使用 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。
像这样使用,在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>
尝试以下操作:
<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" />
...然后根据您的需要配置进度条,因为它最初会显示一个中等大小的进度条,带有黄色进度色调和灰色进度背景色调。另外,请注意没有垂直填充。
将 android:progressDrawable 添加到 drawable 中定义的图层列表为我解决了这个问题。它通过在自定义可绘制对象中屏蔽进度条来工作
只需使用没有隐藏边距的 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" />
无需下载任何新模块,甚至无需在进度条周围放置 FrameLayout。这些都只是黑客。只有2个步骤:
在你的whatever.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_horizontal.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_horizontal.xml 的文件。基本上我如何解决我所有的 XML 问题。
我正在使用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" />
<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"/>
<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" />
一种不需要任何额外视图或摆弄边距的向上移动进度条的简单方法是使用属性android:translationZ
这样您就可以在 XML 中使用它
<Progressbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:translateY="-6dp"
/>
或者
从样式中使用它
<style name="MyTheme.Progressbar.Horizontal" parent="Widget.AppCompat.Progressbar.Horizontal">
<item name="android:translateY">-6dp</item>
</style>
然后像这样在布局中引用它
<Progressbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
style="@style/MyTheme.Progressbar.Horizontal"
/>
使progressBar 的大小变得非常大(我的意思是高度),然后将其放入您希望progressBar 需要的大小的frameLayout 中。
<FrameLayout
android:layout_width="match_parent"
android:layout_height="10dp">
<ProgressBar
android:id="@+id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:backgroundTint="@android:color/transparent"
android:indeterminate="true"
android:indeterminateTint="@color/white" />
</FrameLayout>
最好的解决方案应该是
android:minHeight="0dp"
没有解决方法,就像一个魅力。
一个与任何版本的 Android 兼容且不需要外部库的简单无技巧解决方案是在内部伪造ProgressBar
两个. 这就是我最终的结果。看起来很整洁,而且这种方法非常灵活——你可以用时髦的方式对其进行动画处理,添加文本等。Views
LinearLayout
布局:
<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);
}
结果(添加了一些海拔):
这是一个简单的材质水平进度条,无需添加文件、缩放或更改尺寸
style="@android:style/Widget.ProgressBar.Horizontal"
android:progressTint="Your Progress Color"
android:progressTintMode="src_over"
android:progressBackgroundTint="Your Background Color"
android:backgroundTintMode="src_over"
这通过着色呈现的进度或背景颜色来工作Widget.ProgressBar.Horizontal