在Android功能开发的时候,很多时候会遇到进度条(progressBar)两端需要圆角(显示的进度也需要圆角)的需求,然而在自定义进度条样式的时候,若没找到正确的方法会让人很纠结;
先看结果
原因
很多时候实现都是会用clip,然后被clip切成了直角,浪费再多的时间还是直角,所以需要放弃clip,换成使用scale方式实现;
实现方式
- 新建drawable文件:progress_scale.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="5dip" />
<solid android:color="#999999" />
</shape>
</item>
<item android:id="@android:id/progress">
<scale android:scaleWidth="100%">
<shape>
<corners android:radius="5dip" />
<solid android:color="#f403bc" />
</shape>
</scale>
</item>
<item android:id="@android:id/secondaryProgress">
<scale android:scaleWidth="100%">
<shape>
<corners android:radius="5dip" />
<solid android:color="#5ae70fff" />
</shape>
</scale>
</item>
</layer-list>
- 自定义style:ProgressBar_Scale
<style name="ProgressBar_Scale" parent="@android:style/Widget.ProgressBar.Horizontal">
<item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
<item name="android:progressDrawable">@drawable/progress_scale</item>
</style>
- 使用到布局文件中(各种类型的layout中)
<ProgressBar
android:id="@+id/progressBar"
style="@style/ProgressBar_Scale"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:progress="30"/>
- 细节注意点
进度条要做到半圆的圆角程度,就得考虑布局文件中ProgressBar的高度android:layout_height
和drawable文件中corners
的android:radius
两者属性的值;保证radius
的值大于layout_height
的二分之一: radius * 2 >= layout_height
实现方式2
其实如果能让UE提供进度条的背景和进度的图片,再做成.9图,也一样能实现;
具体可以参考该链接,最终使用图片实现,同时也重申了clip实现被切成直角的问题;
网友评论