一、前言

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

二、ProgressBar

1.介紹

　　進(jìn)度條組件，當(dāng)我們?cè)谧鲆恍┖臅r(shí)操作的時(shí)候（比如加載文件，下載等等），可以使用ProgressBar給用于提供一個(gè)進(jìn)度提示。

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"

直接查看圓形進(jìn)度條的樣式內(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%"//相對(duì)于控件本身定位android:pivotY="50%"//相對(duì)于控件本身定位android:framesCount="12"android:frameDuration="100" />?//每幀動(dòng)畫之間的時(shí)間間隔

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

1.將大風(fēng)車的圖片放入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>

編譯的時(shí)候就會(huì)發(fā)現(xiàn)報(bào)錯(cuò)，No resource identifiter found for attribute 'frameSuration' in package 'android'，framesCount也是這個(gè)錯(cuò)誤，說明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">//設(shè)置繪制不顯示進(jìn)度的進(jìn)度條的Drawable對(duì)象<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>

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

四、增加停止、運(yùn)行、隱藏功能

1.增加三個(gè)控制按鈕

<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">//設(shè)置繪制不顯示進(jìn)度的進(jìn)度條的Drawable對(duì)象<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.增加按鈕的點(diǎn)擊響應(yīng)事件

?

@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;}}

運(yùn)行程序點(diǎn)擊stop按鈕就可以看到大風(fēng)車停止旋轉(zhuǎn)了，再點(diǎn)擊play按鈕大風(fēng)車就又開始旋轉(zhuǎn)了。

?

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

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

總結(jié)

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

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