一、前言
不想使用普通的那種轉圈的加載條,所以找了一個大風車的圖片,想要用旋轉的大風車來表示加載中。
一般都會想著將大風車圖片設置成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