Android 圆形区域内动画遮挡 android progressbar 圆形

转载

AI独步天下 2023-07-26 13:40:26

文章标签 Android 圆形区域内动画遮挡 android xml 进度条 文章分类 Android 移动开发

１、ProgressBar分为两种，我们能明确看到进度，不确定的就是不清楚、不确定一个操作需要多长时间来完成，这个时候就需要用的不确定的ProgressBar了。属性android:indeterminate如果设置为true的话，那么ProgressBar就可能是圆形的滚动条或者水平的滚动条（由样式决定），但是我们一般时候，是直接使用Style类型来区分圆形还是水平ProgressBar的。

２、ProgressBar（Horizontal　才有，无进度的没有）有两个进度，一个是android:progress，另一个是android:secondaryProgress。后者主要是为缓存需要所涉及的，比如在看网络视频时候都会有一个缓存的进度条以及还要一个播放的进度，在这里缓存的进度就可以是android:secondaryProgress，而播放进度就是android:progress，有了secondProgress，可以很方便定制ProgressBar。

3、ProgressBar的样式设定其实有两种方式，在API文档中说明的方式如下：

Widget.ProgressBar.Horizontal
Widget.ProgressBar.Small
Widget.ProgressBar.Large
Widget.ProgressBar.Inverse
Widget.ProgressBar.Small.Inverse
Widget.ProgressBar.Large.Inverse

使用的时候可以这样：style="@android:style/Widget.ProgressBar.Small"，另外还有一种方式就是使用系统的attr，下面的方式是系统的style：

style="?android:attr/progressBarStyle"
style="?android:attr/progressBarStyleHorizontal"
style="?android:attr/progressBarStyleInverse"
style="?android:attr/progressBarStyleLarge"
style="?android:attr/progressBarStyleLargeInverse"
style="?android:attr/progressBarStyleSmall"
style="?android:attr/progressBarStyleSmallInverse"
style="?android:attr/progressBarStyleSmallTitle"

如：

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

和

<ProgressBar
    android:id="@+id/progressBar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

的效果是一样的。

我们去看一下style="?android:attr/progressBarStyleHorizontal"的源码和style="@android:style/Widget.ProgressBar.Horizontal"

<style name="Widget.ProgressBar.Horizontal">
    <item name="indeterminateOnly">false</item>
    　<item name="android:indeterminateOnly">false</item>
　<!-- 进度条的背景，progress ,secondaryProgress 的颜色-->
　<item name="android:progressDrawable">@drawable/progressbar_horizontal</item><!-- progress_horizontal -->

　<item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
　<!--高度-->　<item name="minHeight">20dip</item>    <item name="maxHeight">20dip</item>    <item name="mirrorForRtl">true</item></style>

所以其实我们要修改样式的话只需要修改

android:progressDrawable"对应的资源就可以了。

<item name="android:progressDrawable">@drawable/progressbar_horizontal</item><!-- progress_horizontal -->

下面看@android:drawable/progress_horizontal的源码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

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

一目了然了，三个条目，对应了

background，progress，secondaryProgress。所以只需要修改对应项就可以了，如下在drawable文件中创建一个　progressbar_horizontal_custom.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="1dip" />
            <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="1dip" />
                <gradient
                    android:startColor="#006633"
                    android:centerColor="#eecc33"
                    android:centerY="0.75"
                    android:endColor="#009933"
                    android:angle="270"
                    />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="1dip" />
                <gradient
                    android:startColor="#00ff66"
                    android:centerColor="#00cc66"
                    android:centerY="0.75"
                    android:endColor="#009966"
                    android:angle="270"
                    />
            </shape>
        </clip>
    </item>

</layer-list>

其实就是改变了色织　和半径。

然后我们在values文件中的styles.xml文件中添加一个自定义的style

<style name="ProgressHorizontal">
    <item name="android:indeterminateOnly">false</item>
    <!-- 进度条的背景，progress ,secondaryProgress 的颜色-->
    <item name="android:progressDrawable">@drawable/progressbar_horizontal_custom.xml</item><!-- progress_horizontal -->

    <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
    <!--高度-->
    <item name="android:minHeight">10dip</item>
    <item name="android:maxHeight">10dip</item>
</style>

将

android:progressDrawable 的值改成我们自己定义的progressbar_horizontal_custom.xml

然后我们就可以在XMl中使用我们自定义的样式了

<ProgressBar
    android:id="@+id/progressBar"
    style="@style/ProgressHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progress="50"
    android:secondaryProgress="70"
    android:visibility="visible" />

效果：

我这里还改了他的高度。

还有就是　background，progress，secondaryProgress对应的三个条目，可以用图片来代替shape.但是一点要用．９path的图片.

例如：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- background -->
<item
    android:id="@android:id/background"
    android:drawable="@drawable/progress_patch_green">
</item>
<!-- progress -->
<item android:id="@android:id/progress">
    <clip>
        <nine-patch android:src="@drawable/progress_patch_galy" />
    </clip>
</item>
<!-- second progress -->

<item android:id="@android:id/secondaryProgress">
    <clip>
        <nine-patch android:src="@drawable/progresspatch_blue" />
    </clip>
</item>

</layer-list>

其他用法是一样的再次不多说。

好下面看转圈的进度条

<ProgressBar
    android:id="@+id/progressBar"
    style="@android:style/Widget.ProgressBar"
    android:layout_gravity="center_vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

我们先看Widget.Progress的源码：

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

其中

<item name="indeterminateDrawable">@drawable/progress_medium_white</item>

以上属性的值可以是一个动画，也可以是一个图片（shape也可以），

再看

@drawable/progress_medium_white（andorid4.0）

<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/spinner_white_48"
android:pivotX="50%"
android:pivotY="50%"
android:framesCount="12"
android:frameDuration="100" />

发现其实就是一个不断重复的旋转动画

所以只要将

android:drawable="@drawable/spinner_white_48"

属性对应的图片换成我们需要的样式就可以定制我们自己想要的样式了。

后面的步骤和horizontal的一样再次不多说

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：html5formdata方法 html5中form

下一篇：ios 分支开发 ios开发架构

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

Android 圆形区域内动画遮挡 android progressbar 圆形

Android 圆形区域内动画遮挡 android progressbar 圆形

51CTO博客