圆角的进度条？

我试图实现这个进度条的设计: enter image description here

我当前的代码生成了这个: enter image description here

这是密码:

<item android:id="@android:id/background">
<shape>
<corners android:radius="8dp"/>
<solid android:color="@color/dirtyWhite"/>
</shape>
</item>


<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="8dp"/>
<solid android:color="@color/colorPrimaryDark"/>
</shape>
</clip>
</item>

我的进度条:

 <ProgressBar
android:id="@+id/activeProgress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:progress="10"
android:progressDrawable="@drawable/rounded_corners_progress_bar"/>

我尝试在 <clip中的 <shape>上添加 <size>属性来使进度形状稍微小一点，但是它不起作用。另外，进度条是平的，我想要根据设计曲线。为了实现设计，我需要改变什么？

61969 次浏览
小开
最佳答案

如何使进度形状小一点？

您需要给进度项添加一些空白，如下所示:

<item android:id="@android:id/progress"
android:top="2dp"
android:bottom="2dp"
android:left="2dp"
android:right="2dp">

如何使进度条按设计弯曲？

Replace the <clip></clip> element, with <scale android:scaleWidth="100%"></scale>. That will make the shape keep its form as it grows - and not cut off. 不幸的是，它会有一点不必要的视觉效果在开始-因为形状的角落没有足够的空间来绘制。但对于大多数情况来说，这可能已经足够好了。

完整代码:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="8dp"/>
<solid android:color="@color/dirtyWhite"/>
</shape>
</item>


<item android:id="@android:id/progress"
android:top="1dp"
android:bottom="1dp"
android:left="1dp"
android:right="1dp">


<scale android:scaleWidth="100%">
<shape>
<corners android:radius="8dp"/>
<solid android:color="@color/colorPrimaryDark"/>
</shape>
</scale>
</item>
</layer-list>
小开

感谢 Georgi Koemdzhiev 提出了一个很好的问题和图片。对于那些想要做类似他的，做以下事情。

1)为 ProgressBar创建背景。

Process _ bar _ back. xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners android:radius="3dp" />
<stroke android:color="@color/white" android:width="1dp" />
</shape>

2) Create a scale for the ProgressBar.

Curved _ progress _ bar. 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>
<corners android:radius="2dp" />
<solid android:color="@color/transparent" />
</shape>
</item>


<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="2dp" />
<solid android:color="#ffff00" />
</shape>
</clip>
</item>
</layer-list>

3) In layout file add the ProgressBar.

<FrameLayout
android:layout_width="match_parent"
android:layout_height="6dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:background="@drawable/progress_bar_background"
>


<ProgressBar
android:id="@+id/progress_bar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_margin="1dp"
android:indeterminate="false"
android:progressDrawable="@drawable/curved_progress_bar"
/>


</FrameLayout>
小开

The code produce following progress bar
您可以实现进度条与内部进度颜色，边框 颜色，空进度与透明颜色。

<?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>
<corners android:radius="15dip" />
<stroke android:width="1dp" android:color="@color/black" />
</shape>
</item>


<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="@color/black"
android:centerColor="@color/trans"
android:centerY="0.75"
android:endColor="@color/black"
android:angle="270"


/>
</shape>
</clip>
</item>




<item
android:id="@android:id/progress"
>
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="@color/black"
android:endColor="@color/black"
android:angle="270" />
</shape>
</clip>
</item>
</layer-list>
小开

使用材料组件库，您可以使用 LinearProgressIndicator和 app:trackCornerRadius属性。
比如:

    <com.google.android.material.progressindicator.LinearProgressIndicator
android:indeterminate="true"
app:trackThickness="xxdp"
app:trackCornerRadius="xdp"/>

enter image description here

它也适用于移除 android:indeterminate="true"或使用 android:indeterminate="false"的确定进度指示器

注意: 它至少需要 1.3.0版本。

小开 
<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/pb_team2"
android:layout_width="0dp"
android:layout_height="8dp"
android:layout_marginStart="55dp"
android:layout_marginEnd="15dp"
app:trackColor="#E0E0E0"
app:trackCornerRadius="6dp"
app:trackThickness="8dp"
android:progress="2"
app:indicatorColor="@color/red"
android:scaleX="-1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/tv_versus"
app:layout_constraintTop_toBottomOf="@id/tv_team2_score" />
小开

add material dependencies in build.gradle(Module) 实施 'com.google.android.material:material:1.6.0'

回到 Activity _ main. xml

<com.google.android.material.progressindicator.LinearProgressIndicator>
...
app:trackCornerRadius="3dp"
</com.google.android.material.progressindicator.LinearProgressIndicator>

希望能帮到你。


提交答案