一、前言

　　不想使用普通的那種轉(zhuǎn)圈的加載條，所以找了一個大風車的圖片，想要用旋轉(zhuǎn)的大風車來表示加載中。
　　一般都會想著將大風車圖片設置成ImageView組件，然后給這個組件添加一個旋轉(zhuǎn)動畫就可以了，但是我突然想到我是想寫加載條的，所以我打算用ProgressBar實現(xiàn)。

二、ProgressBar

1.介紹

　　進度條組件，當我們在做一些耗時操作的時候（比如加載文件，下載等等），可以使用ProgressBar給用于提供一個進度提示。

2.查看ProgressBar的原形旋轉(zhuǎn)樣式

系統(tǒng)的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"

直接查看圓形進度條的樣式內(nèi)容，查看方法：
　　第一步：在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內(nèi)容。

<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" />?//每幀動畫之間的時間間隔

三、實現(xiàn)自定義的旋轉(zhuǎn)進度條

1.將大風車的圖片放入drawable文件夾中，修改activity_main文件內(nèi)容。

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

編譯的時候就會發(fā)現(xiàn)報錯，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>

運行程序就可以看到大風車在不停的轉(zhuǎn)了。

四、增加停止、運行、隱藏功能

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按鈕就可以看到大風車停止旋轉(zhuǎn)了，再點擊play按鈕大風車就又開始旋轉(zhuǎn)了。

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/zhangmiao14/p/7250342.html

總結

以上是生活随笔為你收集整理的制作一个大风车加载条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。