Android UI設計系列之ImageView實現(xiàn)ProgressBar旋轉效果（1）
提起ProgressBar，想必大家都比較熟悉，使用起來也是比較方便，直接在XML文件中引用，然后添加屬性，運行就OK了，雖然使用ProgressBar很方便但是在我們開發(fā)的每一個應用基本上都有自己的主體風格，如果使用了系統(tǒng)自帶的效果圖，給人的感覺是和總體風格太不搭配了，看上去很是別扭，我們自己開發(fā)也覺得不爽，于是就想著自定義一下效果，其實自定義ProgressBar的效果也不難，大概可分為三步走吧：
一、在anim文件夾下使用animation-list定義動畫集
<?xml version="1.0" encoding="UTF-8"?> <animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android"> <item android:duration="50" android:drawable="@drawable/circle_10001" /> <item android:duration="50" android:drawable="@drawable/circle_10002" /> <item android:duration="50" android:drawable="@drawable/circle_10003" /> <item android:duration="50" android:drawable="@drawable/circle_10004" /> <item android:duration="50" android:drawable="@drawable/circle_10005" /> <item android:duration="50" android:drawable="@drawable/circle_10006" /> <item android:duration="50" android:drawable="@drawable/circle_10007" /> </animation-list>
二、在style.xml文件中定義風格
<style name="CircleProgressStyle" parent="@android:style/Widget.ProgressBar.Large"> <item name="android:indeterminateDrawable">@anim/anim_progress_circle</item> </style>
三、在使用ProgressBar的xml文件中設置其style
<ProgressBar android:layout_width="50dip" android:layout_height="50dip" style="@style/CircleProgressStyle"/>
通過以上步驟，基本上就可以實現(xiàn)自己想要的效果了，這也是我在開發(fā)中一直習慣使用的方式，當然了使用其它方式同樣可以實現(xiàn)這種效果，今天我主要是想講一下使用AnimationDrawable 和ImageView結合來實現(xiàn)上述效果，所以以上方法就不再詳解了(如果大家想了解其它的方式，留你郵箱，給你回信)。
現(xiàn)在進入正題，首先看一下項目結構
在drawable文件夾下新建circle.xml文件，內容如下：
<?xml version="1.0" encoding="UTF-8"?> <animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android"> <item android:duration="50" android:drawable="@drawable/circle_10001" /> <item android:duration="50" android:drawable="@drawable/circle_10002" /> <item android:duration="50" android:drawable="@drawable/circle_10003" /> <item android:duration="50" android:drawable="@drawable/circle_10004" /> <item android:duration="50" android:drawable="@drawable/circle_10005" /> <item android:duration="50" android:drawable="@drawable/circle_10006" /> <item android:duration="50" android:drawable="@drawable/circle_10007" /> <item android:duration="50" android:drawable="@drawable/circle_10008" /> <item android:duration="50" android:drawable="@drawable/circle_10009" /> <item android:duration="50" android:drawable="@drawable/circle_10010" /> <item android:duration="50" android:drawable="@drawable/circle_10011" /> <item android:duration="50" android:drawable="@drawable/circle_10012" /> <item android:duration="50" android:drawable="@drawable/circle_10013" /> <item android:duration="50" android:drawable="@drawable/circle_10014" /> <item android:duration="50" android:drawable="@drawable/circle_10015" /> </animation-list>
在main.xml文件中做簡單布局，沒什么需要注釋和解釋的，你一看就懂，內容如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff"> <ImageView android:id="@+id/imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/circle" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="start" android:text="旋轉" /> </LinearLayout>
在MainActivity中實現(xiàn)的代碼：
public class MainActivity extends Activity {
private ImageView imageView;
private AnimationDrawable animationDrawable;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
initWedgits();
}
/**
* 初始化各組件
*/
private void initWedgits() {
try {
imageView = (ImageView) findViewById(R.id.imageview);
animationDrawable = (AnimationDrawable) imageView.getDrawable();
} catch (Exception e) {
e.printStackTrace();
}
}
public void start(View view) {
try {
animationDrawable.start();
} catch (Exception e) {
e.printStackTrace();
}
}
}
代碼編寫完成后運行程序，在沒有點擊按鈕時ImageView顯示一張靜態(tài)圖，當點擊按鈕后，就可以實現(xiàn)圖片的旋轉了，效果如下：
（忘記做了動畫效果圖，嗚嗚......以后補上）
可以看到只要我們點擊了按鈕，圖片就擱在那一直旋轉，是不是很神奇？趕腳和ProgressBar的效果一樣，而且不用再在style.xml文件中定義樣式了，頓時感覺這種方法比使用ProgressBar好了點(自戀中，(*^__^*) 嘻嘻……不要扔磚哦)，但是細心的童靴就會發(fā)現(xiàn)一個問題，為什么把animationDrawable.start()方法放到start()方法中呢？為什么不直接放到initWedgits() 中呢？那好，為了打消大家的疑慮，現(xiàn)在我就把在start()方法中的代碼注釋掉，直接把animationDrawable.start()放到initWedgits()方法中，修改代碼如下：
public class MainActivity extends Activity {
private ImageView imageView;
private AnimationDrawable animationDrawable;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
initWedgits();
}
/**
* 初始化各組件
*/
private void initWedgits() {
try {
imageView = (ImageView) findViewById(R.id.imageview);
animationDrawable = (AnimationDrawable)imageView.getDrawable();
animationDrawable.start();
} catch (Exception e) {
e.printStackTrace();
}
}
public void start(View view) {
try {
// animationDrawable.start();
} catch (Exception e) {
e.printStackTrace();
}
}
}
這時候，你一定會想，運行之后不論點擊不點擊按鈕(實際上你把按鈕點爛，圖片都不會轉滴，因為我把它注釋掉了，(*^__^*) 嘻嘻……)圖片都會旋轉，嗯，我們運行一下程序，結果你會發(fā)現(xiàn)圖片并沒有像我們想象中的那樣旋轉。咦？奇了怪了，圖片怎么不旋轉呢？是不是哪寫錯了，于是從頭到尾檢查了一遍代碼，當確定了代碼沒有問題之后，你就郁悶了，估計會想是不是因為沒有刷新的緣由呀(我剛開始就是這樣想的，嗚嗚~~~~(>_<)~~~~ )？于是趕緊使用了View的刷新方法，把所有的都試了，圖片還是不能旋轉，你就更郁悶了，怎么會這樣呢？是不是在onCreate方法中不能這樣調用animationDrawable.start()？于是又嘗試了把animationDrawable.start()方法放入到onResume()方法中，但結果圖片還是不旋轉，最后使用了最后一招又把該代碼放入到onWindowFocusChanged(boolean hasFocus)方法中，這樣一試，圖片終于旋轉了，呵呵，好開心呀，這時候你會很開心，因為以后使用的話直接在onWindowFocusChanged(boolean hasFocus)方法中調用animationDrawable的start()方法就行了，不再需要利用其它的事件來觸發(fā)圖片的旋轉了，緊接著你估計就會想了為什么animationDrawable的start()方法非得放到這里才會執(zhí)行了呢？出于習慣你應該會想到去找官方文檔查看一下，找呀找呀找呀，終于找到了，官方文檔的說明截個圖如下：
哦，原來是這樣，大致意思就是說不要在onCreate方法中調用AnimationDrawable的start()方法，因為此時的AnimationDrawable還沒有完全附加到視圖窗口上，如果想你想立即播放動畫而不想用事件來觸發(fā)的話(就是最開始我們使用的在start()方法中調用AnimationDrawable的start()方法)，你就需要在onWindowFocusChanged(boolean hasFocus)方法中來調用AnimationDrawable的start()方法了，看完了官方文檔，就知道以后怎么使用了，嘻嘻，再次高興一下......
老習慣，貼一下代碼
public class MainActivity extends Activity {
private ImageView imageView;
private AnimationDrawable animationDrawable;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
initWedgits();
}
/**
* 初始化各組件
*/
private void initWedgits() {
try {
imageView = (ImageView) findViewById(R.id.imageview);
animationDrawable = (AnimationDrawable) imageView.getDrawable();
} catch (Exception e) {
e.printStackTrace();
}
}
<p> @override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);</p><p> if(hasFocus)
animationDrawable.start();
}</p>
public void start(View view) {
try {
//animationDrawable.start();
} catch (Exception e) {
e.printStackTrace();
}
}
}
另外，我嘗試了從網(wǎng)上看到的另外幾種方法，其中一個簡單的實現(xiàn)就是在imageView的post()方法中調用AnimationDrawable的start()方法而不需要在onWindowFocusChanged(boolean hasFocus)方法中調用，測試了一下果然有效，至于其他的實現(xiàn)方式就不再貼出代碼了，如果誰有興趣可以自己動手問問度娘，畢竟自己動手，豐衣足食嘛，呵呵
好了，到此為止使用ImageView和AnimationDrawable結合的方式實現(xiàn)ProgressBar效果講解完畢，感謝您的閱讀。
源碼下載：http://xiazai.jb51.net/201606/yuanma/Android-ImageView-ProgressBar(jb51.net).rar
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- Android自定義View實現(xiàn)QQ運動積分轉盤抽獎功能
- Android 自定View實現(xiàn)仿QQ運動步數(shù)圓弧及動畫效果
- Android自定義View仿微博運動積分動畫效果
- Android UI之ImageView實現(xiàn)圖片旋轉和縮放
- Android使用RotateImageView 旋轉ImageView
- Android自定義View葉子旋轉完整版（六）
- Android自定義View實現(xiàn)QQ音樂中圓形旋轉碟子
- Android自定義View實現(xiàn)葉子飄動旋轉效果（四）
- Android中imageView圖片放大縮小及旋轉功能示例代碼
- Android自定義View圖片按Path運動和旋轉
相關文章
這篇文章主要介紹了Android編程簡單實現(xiàn)撥號器功能的方法,結合實例形式較為詳細的分析了Android撥號器功能的實現(xiàn)原理、步驟、操作技巧與相關注意事項,需要的朋友可以參考下2017-07-07
本篇文章主要介紹了Android實現(xiàn)屏幕鎖定源碼詳解，屏幕鎖定是一個很有用的功能，有需要的可以了解一下。2016-10-10
Android數(shù)據(jù)持久化之File機制分析
這篇文章主要介紹了Android數(shù)據(jù)持久化之File機制,較為詳細的分析了File機制的原理及Android使用File實現(xiàn)數(shù)據(jù)持久化的相關操作技巧,需要的朋友可以參考下2017-05-05
在Ubuntu下搭建Android開發(fā)環(huán)境
對一個程序猿來說，裝好系統(tǒng)之后的第一件事，一定是搭建開發(fā)環(huán)境，已經(jīng)安裝各種開發(fā)工具，以便之后能方便順利地進行程序的開發(fā)。簡單的介紹下在Ubuntu環(huán)境下搭建Android開發(fā)環(huán)境，雖然基本上和在Windows下沒有太大差別，但有些細節(jié)上還是很值得注意的。2014-07-07
這篇文章主要介紹了Android?AMS啟動App進程原理，系統(tǒng)fork函數(shù)是如何創(chuàng)建進程，文中有詳細的代碼示例，對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-05-05
Android 自定義 HorizontalScrollView 打造多圖片OOM 的橫向滑動效果(實例代碼)
這篇文章主要介紹了Android 自定義 HorizontalScrollView 打造多圖片OOM 的橫向滑動效果(實例代碼),需要的朋友可以參考下2017-10-10
本篇文章介紹了，Android中圖片處理實例介紹，需要的朋友參考下2013-04-04
android studio 3.0 service項目背景音樂實現(xiàn)
這篇文章主要介紹了android studio 3.0中service項目實現(xiàn)插入背景音樂的方法。2017-11-11
Jetpack?Compose實現(xiàn)對角線滾動效果
這篇文章主要為大家詳細介紹了如何利用Jetpack?Compose實現(xiàn)一個簡單的對角線滾動效果，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-02-02
Android?Activity通用懸浮可拖拽View封裝的思路詳解
這篇文章主要介紹了Android?Activity通用懸浮可拖拽View封裝,實現(xiàn)思路是通過封裝通用的基礎懸浮View，繼承通用View，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-07-07