带圆角的进度栏? [英] 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"/>
我尝试在<clip
中的<shape>
上添加<size>
属性,以使进度形状变小,但它不起作用.另外,进度条是扁平的,我想按照设计弯曲.为了实现设计,我需要更改什么?
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">
如何根据设计使进度条弯曲?
用<scale android:scaleWidth="100%"></scale>
替换<clip></clip>
元素.这将使形状随着其增长而保持其形状-而不是被切断.
不幸的是,一开始它会产生一些不必要的视觉效果-因为形状角没有足够的绘制空间.但这对于大多数情况来说可能已经足够了.
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屋!