美文网首页
ProgressBar进度条两端圆角

ProgressBar进度条两端圆角

作者: 东方灵龙 | 来源:发表于2018-08-11 18:13 被阅读250次

    在Android功能开发的时候,很多时候会遇到进度条(progressBar)两端需要圆角(显示的进度也需要圆角)的需求,然而在自定义进度条样式的时候,若没找到正确的方法会让人很纠结;

    先看结果

    进度条样式示例图

    原因

    很多时候实现都是会用clip,然后被clip切成了直角,浪费再多的时间还是直角,所以需要放弃clip,换成使用scale方式实现;

    实现方式

    1. 新建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>
    
    1. 自定义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>
    
    1. 使用到布局文件中(各种类型的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"/>
    
    1. 细节注意点
      进度条要做到半圆的圆角程度,就得考虑布局文件中ProgressBar的高度android:layout_height和drawable文件中cornersandroid:radius两者属性的值;保证radius的值大于layout_height的二分之一: radius * 2 >= layout_height

    实现方式2

    其实如果能让UE提供进度条的背景和进度的图片,再做成.9图,也一样能实现;
    具体可以参考该链接,最终使用图片实现,同时也重申了clip实现被切成直角的问题;

    相关文章

      网友评论

          本文标题:ProgressBar进度条两端圆角

          本文链接:https://www.haomeiwen.com/subject/zpbdbftx.html