制作一个大风车加载条

一、前言

　　不想使用普通的那种转圈的加载条，所以找了一个大风车的图片，想要用旋转的大风车来表示加载中。
　　一般都会想着将大风车图片设置成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"><ProgressBarandroid: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.增加三个控制按钮

    <Buttonandroid:id="@+id/play"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginTop="10dp"android:text="Play" /><Buttonandroid:id="@+id/stop"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_marginTop="10dp"android:text="Stop" /><Buttonandroid: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.增加按钮的点击响应事件

 

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