Android控件:ProgressBar使用详解

1、环形进度条

ProgressBar 默认style 为 style="?android:attr/progressBarStyle" ,为一个环形进度条。

<ProgressBar
    style="?android:attr/progressBarStyle"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="8dp"
    android:indeterminate="true"
    android:indeterminateDrawable="@drawable/bg_gradient_rotate" />

<ProgressBar
    style="?android:attr/progressBarStyle"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="8dp"
    android:indeterminateDrawable="@drawable/bg_gradient_animated_rotate"/>
    

查找源码:
themes.xml

<item name="progressBarStyle">@style/Widget.ProgressBar</item>

styles.xml

<style name="Widget.ProgressBar">
    <item name="indeterminateOnly">true</item>
    <item name="indeterminateDrawable">@drawable/progress_medium_white</item>
    <item name="indeterminateBehavior">repeat</item>
    <item name="indeterminateDuration">3500</item>
    <item name="minWidth">48dip</item>
    <item name="maxWidth">48dip</item>
    <item name="minHeight">48dip</item>
    <item name="maxHeight">48dip</item>
    <item name="mirrorForRtl">false</item>
</style>

通过styles.xml源码可以看出 indeterminateOnly 为 true, 环形进度条都是非精确的, indeterminate, progress, progressDrawable 属性的设置均为无效的。只能通过android:indeterminateDrawable 指代非精确进度条对应的Drawable 。 这个Drawable 的 最顶层标签可以为 或 ,animated-rotate 的帧数帧率在源码看是可调的,但我们自己写无法调整,所以看起来会很卡。

bg_ring_with_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="9"
    android:useLevel="false">
    <gradient
        android:endColor="#1FBDFF"
        android:startColor="#FFFFFF"
        android:type="sweep" />
</shape>

bg_gradient_rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/bg_ring_with_gradient"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080.0">
</rotate>

bg_gradient_animated_rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/bg_ring_with_gradient"
    android:pivotX="50%"
    android:pivotY="50%"
    android:framesCount="12"
    android:frameDuration="100">
</animated-rotate>
<!--framesCount 和 frameDuration 在我们的代码中不可以设置,对应的属性应该被隐藏了-->

运行截图:
环形进度条

2、横向进度条

横向进度条对应的style为style="?android:attr/progressBarStyleHorizontal",此style 默认的 android:indeterminate 为 false 即进度是确定的。

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:indeterminate="true"/>
    
<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:indeterminate="false"
    android:progress="40"
    android:progressDrawable="@drawable/progress_horizontal" />

查找源码:
themes.xml

<item name="progressBarStyleHorizontal">@style/Widget.ProgressBar.Horizontal</item>

styles.xml

<style name="Widget.ProgressBar.Horizontal">
    <item name="indeterminateOnly">false</item>
    <item name="progressDrawable">@drawable/progress_horizontal</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
    <item name="minHeight">20dip</item>
    <item name="maxHeight">20dip</item>
    <item name="mirrorForRtl">true</item>
</style>

通过styles.xml源码可以看出 indeterminateOnly 为 false, 所以 indeterminate, progress, progressDrawable 属性都是可以自由设置的,当不设置时使用styles.xml中设定的默认资源
当android:indeterminate 为false时 ,此时 andorid:progress 及 android:progressDrawable 的属性设置生效
当android:indeterminate 为true时,此时 android:indeterminateDrawable 属性生效

android:progressDrawable 对应的Drawable 资源一般使用layer-list , 三个item: background, secondaryProgress, progress 分别对应 背景,第二进度和进度,可以不全部设置

<?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" />
            <gradient
                    android:startColor="#ff9d9e9d"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff747674"
                    android:angle="270"
            />
        </shape>
    </item>
    
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
</layer-list>

运行截图:
横向进度条

发布了23 篇原创文章 · 获赞 42 · 访问量 13万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览