带圆角的进度条？

Question

我正在尝试实现这个进度条设计：

我当前的代码产生了这个：

这是代码：

<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> 属性，使进度形状变小一点，但没有用。另外，进度条是平的，我想按照设计弯曲。我需要更改什么才能实现设计？

Answer 1

如何让进度形状变小一点？

你需要给进度项一点填充，像这样：

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

如何让进度条按照设计弯曲？

将 <clip></clip> 元素替换为 <scale android:scaleWidth="100%"></scale>。这将使形状在生长时保持其形状——而不是被切断。不幸的是，它一开始会有一些不想要的视觉效果——因为形状角没有足够的 space 来绘制。但对于大多数情况来说可能已经足够了。

完整代码：

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

Answer 2

感谢 Georgi Koemdzhiev 提出的一个很好的问题和图片。想要做出类似他的作品的小伙伴，请按以下步骤做。

1) 为 ProgressBar.

创建背景

progress_bar_background.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) 为 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) 在布局文件中添加 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>

Answer 3

您可以使用内部进度颜色和边框实现进度条颜色，透明颜色的空进度。

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

Answer 4

借助 Material 组件库，您可以使用 LinearProgressIndicator 和 app:trackCornerRadius属性。
类似于：

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

它也适用于删除 android:indeterminate="true" 或使用 android:indeterminate="false"

的确定进度指示器

注意： 至少需要版本 1.3.0.

Answer 5

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

Answer 6

在build.gradle(模块)中添加material依赖项实施 '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>

希望它能完成你的工作。

带圆角的进度条？

Progress bar with rounded corners?

android

android-progressbar

android-drawable