Android UI設(shè)計(jì)系列之ImageView實(shí)現(xiàn)ProgressBar旋轉(zhuǎn)效果（1）

更新時(shí)間：2020年06月28日 09:31:38 作者：llew2011

這篇文章主要為大家詳細(xì)介紹了Android UI設(shè)計(jì)之ImageView實(shí)現(xiàn)ProgressBar旋轉(zhuǎn)效果，具有一定的實(shí)用性和參考價(jià)值，感興趣的小伙伴們可以參考一下

提起ProgressBar，想必大家都比較熟悉，使用起來(lái)也是比較方便，直接在XML文件中引用，然后添加屬性，運(yùn)行就OK了，雖然使用ProgressBar很方便但是在我們開(kāi)發(fā)的每一個(gè)應(yīng)用基本上都有自己的主體風(fēng)格，如果使用了系統(tǒng)自帶的效果圖，給人的感覺(jué)是和總體風(fēng)格太不搭配了，看上去很是別扭，我們自己開(kāi)發(fā)也覺(jué)得不爽，于是就想著自定義一下效果，其實(shí)自定義ProgressBar的效果也不難，大概可分為三步走吧：

一、在anim文件夾下使用animation-list定義動(dòng)畫集

<?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文件中定義風(fēng)格

<style name="CircleProgressStyle" parent="@android:style/Widget.ProgressBar.Large"> 
 <item name="android:indeterminateDrawable">@anim/anim_progress_circle</item> 
</style>

三、在使用ProgressBar的xml文件中設(shè)置其style

<ProgressBar 
 android:layout_width="50dip" 
 android:layout_height="50dip" 
 style="@style/CircleProgressStyle"/>

通過(guò)以上步驟，基本上就可以實(shí)現(xiàn)自己想要的效果了，這也是我在開(kāi)發(fā)中一直習(xí)慣使用的方式，當(dāng)然了使用其它方式同樣可以實(shí)現(xiàn)這種效果，今天我主要是想講一下使用AnimationDrawable 和ImageView結(jié)合來(lái)實(shí)現(xiàn)上述效果，所以以上方法就不再詳解了(如果大家想了解其它的方式，留你郵箱，給你回信)。
現(xiàn)在進(jìn)入正題，首先看一下項(xiàng)目結(jié)構(gòu)

在drawable文件夾下新建circle.xml文件，內(nèi)容如下：

<?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文件中做簡(jiǎn)單布局，沒(méi)什么需要注釋和解釋的，你一看就懂，內(nèi)容如下：

<?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="旋轉(zhuǎn)" /> 
</LinearLayout>

在MainActivity中實(shí)現(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(); 
 } 
 } 
}

代碼編寫完成后運(yùn)行程序，在沒(méi)有點(diǎn)擊按鈕時(shí)ImageView顯示一張靜態(tài)圖，當(dāng)點(diǎn)擊按鈕后，就可以實(shí)現(xiàn)圖片的旋轉(zhuǎn)了，效果如下：

（忘記做了動(dòng)畫效果圖，嗚嗚......以后補(bǔ)上）

可以看到只要我們點(diǎn)擊了按鈕，圖片就擱在那一直旋轉(zhuǎn)，是不是很神奇？趕腳和ProgressBar的效果一樣，而且不用再在style.xml文件中定義樣式了，頓時(shí)感覺(jué)這種方法比使用ProgressBar好了點(diǎn)(自戀中，(*^__^*) 嘻嘻……不要扔磚哦)，但是細(xì)心的童靴就會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，為什么把a(bǔ)nimationDrawable.start()方法放到start()方法中呢？為什么不直接放到initWedgits() 中呢？那好，為了打消大家的疑慮，現(xiàn)在我就把在start()方法中的代碼注釋掉，直接把a(bǔ)nimationDrawable.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(); 
 } 
 } 
}

這時(shí)候，你一定會(huì)想，運(yùn)行之后不論點(diǎn)擊不點(diǎn)擊按鈕(實(shí)際上你把按鈕點(diǎn)爛，圖片都不會(huì)轉(zhuǎn)滴，因?yàn)槲野阉⑨尩袅耍?*^__^*) 嘻嘻……)圖片都會(huì)旋轉(zhuǎn)，嗯，我們運(yùn)行一下程序，結(jié)果你會(huì)發(fā)現(xiàn)圖片并沒(méi)有像我們想象中的那樣旋轉(zhuǎn)。咦？奇了怪了，圖片怎么不旋轉(zhuǎn)呢？是不是哪寫錯(cuò)了，于是從頭到尾檢查了一遍代碼，當(dāng)確定了代碼沒(méi)有問(wèn)題之后，你就郁悶了，估計(jì)會(huì)想是不是因?yàn)闆](méi)有刷新的緣由呀(我剛開(kāi)始就是這樣想的，嗚嗚~~~~(>_<)~~~~ )？于是趕緊使用了View的刷新方法，把所有的都試了，圖片還是不能旋轉(zhuǎn)，你就更郁悶了，怎么會(huì)這樣呢？是不是在onCreate方法中不能這樣調(diào)用animationDrawable.start()？于是又嘗試了把a(bǔ)nimationDrawable.start()方法放入到onResume()方法中，但結(jié)果圖片還是不旋轉(zhuǎn)，最后使用了最后一招又把該代碼放入到onWindowFocusChanged(boolean hasFocus)方法中，這樣一試，圖片終于旋轉(zhuǎn)了，呵呵，好開(kāi)心呀，這時(shí)候你會(huì)很開(kāi)心，因?yàn)橐院笫褂玫脑捴苯釉趏nWindowFocusChanged(boolean hasFocus)方法中調(diào)用animationDrawable的start()方法就行了，不再需要利用其它的事件來(lái)觸發(fā)圖片的旋轉(zhuǎn)了，緊接著你估計(jì)就會(huì)想了為什么animationDrawable的start()方法非得放到這里才會(huì)執(zhí)行了呢？出于習(xí)慣你應(yīng)該會(huì)想到去找官方文檔查看一下，找呀找呀找呀，終于找到了，官方文檔的說(shuō)明截個(gè)圖如下：

哦，原來(lái)是這樣，大致意思就是說(shuō)不要在onCreate方法中調(diào)用AnimationDrawable的start()方法，因?yàn)榇藭r(shí)的AnimationDrawable還沒(méi)有完全附加到視圖窗口上，如果想你想立即播放動(dòng)畫而不想用事件來(lái)觸發(fā)的話(就是最開(kāi)始我們使用的在start()方法中調(diào)用AnimationDrawable的start()方法)，你就需要在onWindowFocusChanged(boolean hasFocus)方法中來(lái)調(diào)用AnimationDrawable的start()方法了，看完了官方文檔，就知道以后怎么使用了，嘻嘻，再次高興一下......
老習(xí)慣，貼一下代碼

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)上看到的另外幾種方法，其中一個(gè)簡(jiǎn)單的實(shí)現(xiàn)就是在imageView的post()方法中調(diào)用AnimationDrawable的start()方法而不需要在onWindowFocusChanged(boolean hasFocus)方法中調(diào)用，測(cè)試了一下果然有效，至于其他的實(shí)現(xiàn)方式就不再貼出代碼了，如果誰(shuí)有興趣可以自己動(dòng)手問(wèn)問(wèn)度娘，畢竟自己動(dòng)手，豐衣足食嘛，呵呵
好了，到此為止使用ImageView和AnimationDrawable結(jié)合的方式實(shí)現(xiàn)ProgressBar效果講解完畢，感謝您的閱讀。

源碼下載：http://xiazai.jb51.net/201606/yuanma/Android-ImageView-ProgressBar(jb51.net).rar

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: