带圆角的进度条? [英] Progress bar with rounded corners?

问题描述

我正在尝试实现此进度条设计:

I am trying to achieve this progress bar design:

我拥有的当前代码产生了这个:

The current code that I have produces this:

这是代码:

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

我尝试在 中的 上添加 属性，使进度形状变小一点但它没有用.此外，进度条是平的，我想按照设计弯曲.我需要改变什么才能实现设计?

I tried adding <size> attribute on the <shape> in <clip to make the progress shape a bit smaller but it did not work. Also, the progress bar is flat and I want to be curved as per design. What I need to change in order to achieve the design?

推荐答案

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

你需要给进度项一些填充，像这样:

You need to give the progress item a little padding, like so:

<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. Unfortunately, it will have a little unwanted visual effect at the beginning - as the shape corners don't have enough space to draw. But it might be good enough for most cases.

完整代码:

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

这篇关于带圆角的进度条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！