制作一个大风车加载条

一、前言

　　不想使用普通的那种转圈的加载条，所以找了一个大风车的图片，想要用旋转的大风车来表示加载中。
　　一般都会想着将大风车图片设置成ImageView组件，然后给这个组件添加一个旋转动画就可以了，但是我突然想到我是想写加载条的，所以我打算用ProgressBar实现。

二、ProgressBar

1.介绍

　　进度条组件，当我们在做一些耗时操作的时候（比如加载文件，下载等等），可以使用ProgressBar给用于提供一个进度提示。

2.查看ProgressBar的原形旋转样式

系统的ProgressBar的style：

style="?android:attr/progressBarStyle"
style="?android:attr/progressBarStyleHorizontal" //水平ProgressBar
style="?android:attr/progressBarStyleInverse"
style="?android:attr/progressBarStyleLarge" //圆形ProgressBar
style="?android:attr/progressBarStyleLargeInverse"
style="?android:attr/progressBarStyleSmall"
style="?android:attr/progressBarStyleSmallInverse"
style="?android:attr/progressBarStyleSmallTitle"

直接查看圆形进度条的样式内容，查看方法：
　　第一步：在attr.xml文件中查找progressBarStyleLarge。

<attr name="progressBarStyleLarge" format="reference" />

　　第二步：在themes.xml文件中查找progressBarStyleLarge。

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

　　第三步：在style.xml文件中查找Widget.ProgressBar.Large。

    <style name="Widget.ProgressBar.Large">
        <item name="indeterminateDrawable">@drawable/progress_large_white</item>
        <item name="minWidth">76dip</item>
        <item name="maxWidth">76dip</item>
        <item name="minHeight">76dip</item>
        <item name="maxHeight">76dip</item>
    </style>

　　第四步：查看progress_large_white内容。

<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/spinner_white_76"//图片资源
    android:pivotX="50%"//相对于控件本身定位
    android:pivotY="50%"//相对于控件本身定位
    android:framesCount="12"
    android:frameDuration="100" /> //每帧动画之间的时间间隔

三、实现自定义的旋转进度条

1.将大风车的图片放入drawable文件夹中，修改activity_main文件内容。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ProgressBar
        android:id="@+id/progress"
        style="@style/WindmillProgressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

</RelativeLayout>

2.添加animated-rotate的xml文件

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/image_windmill"
    android:frameDuration="100"
    android:framesCount="12"
    android:pivotX="50%"
    android:pivotY="50%">

</animated-rotate>

编译的时候就会发现报错，No resource identifiter found for attribute 'frameSuration' in package 'android'，framesCount也是这个错误，说明frameDuration与framesCount是没有办法使用的。
解决方法就是将frameDuration与framesCount属性删除，添加duration属性代替。

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/image_windmill"
    android:duration="100"
    android:pivotX="50%"
    android:pivotY="50%">

</animated-rotate>

3.添加style

    <style name="WindmillProgressBarStyle">
        //设置绘制不显示进度的进度条的Drawable对象
        <item name="android:indeterminateDrawable">@drawable/windmill_loading_view</item>
        <item name="android:minWidth">76dip</item>
        <item name="android:maxWidth">76dip</item>
        <item name="android:minHeight">76dip</item>
        <item name="android:maxHeight">76dip</item>
    </style>

运行程序就可以看到大风车在不停的转了。

四、增加停止、运行、隐藏功能

1.增加三个控制按钮

    <Button
        android:id="@+id/play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:text="Play" />

    <Button
        android:id="@+id/stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:text="Stop" />

    <Button
        android:id="@+id/gone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:text="Gone" />

2.修改ProgressBar的indeterminateDrawable的图片

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

    <item android:drawable="@drawable/image_windmill" android:state_enabled="false" />
    <item android:drawable="@drawable/windmill_loading_view" />

</selector>

3.修改ProgressBar的style

    <style name="WindmillProgressBarStyle">
        //设置绘制不显示进度的进度条的Drawable对象
        <item name="android:indeterminateDrawable">@drawable/windmill_loading_selector</item>
        <item name="android:minWidth">76dip</item>
        <item name="android:maxWidth">76dip</item>
        <item name="android:minHeight">76dip</item>
        <item name="android:maxHeight">76dip</item>
    </style>

4.增加按钮的点击响应事件

 

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.play:
                if (progressBar.getVisibility() != View.VISIBLE) {
                    progressBar.setVisibility(View.VISIBLE);
                }
                progressBar.setEnabled(true);
                break;
            case R.id.stop:
                progressBar.setEnabled(false);
                break;
            case R.id.gone:
                if (progressBar.getVisibility() == View.VISIBLE) {
                    progressBar.setVisibility(View.GONE);
                }
                break;
            default:
                break;
        }
    }

运行程序点击stop按钮就可以看到大风车停止旋转了，再点击play按钮大风车就又开始旋转了。

 

代码地址：https://github.com/ZhangMiao147/CustomView/tree/master/windmillprogressbar