Android 進(jìn)度條使用詳解及示例代碼
在這里,總結(jié)一下loading進(jìn)度條的使用簡(jiǎn)單總結(jié)一下。
一、說(shuō)起進(jìn)度條,必須說(shuō)說(shuō)條形進(jìn)度條,經(jīng)常都會(huì)使用到嘛,特別是下載文件進(jìn)度等等,還有像騰訊QQ安裝進(jìn)度條一樣,有個(gè)進(jìn)度總給人良好的用戶體驗(yàn)。
先來(lái)找圖看看,做這個(gè)圖完成不用圖片就可以做到了。
看下xml布局文件,其實(shí)就是直接用xml寫(xiě)的在加兩個(gè)屬性設(shè)置一下就好了,一個(gè)style,另一個(gè)是background。
<ProgressBar android:id=”@+id/pb_progressbar” style=”@style/StyleProgressBarMini” android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:layout_margin=”30dp” android:background=”@drawable/shape_progressbar_bg” android:max=”100″ android:progress=”50″ />
先看style吧
<style name=”StyleProgressBarMini” parent=”@android:style/Widget.ProgressBar.Horizontal”> <item name=”android:maxHeight”>50dip</item> <item name=”android:minHeight”>10dip</item> <item name=”android:indeterminateOnly”>false</item> <item name=”android:indeterminateDrawable”>@android:drawable/progress_indeterminate_horizontal</item> <item name=”android:progressDrawable”>@drawable/shape_progressbar_mini</item> </style>
這里的progressDrawable又是引用一個(gè)自定義drawable,不是圖片哦。
shape_progressbar_mini.xml
<?xml version=”1.0″ encoding=”utf-8″?> <layer-list xmlns:android=”http://schemas.android.com/apk/res/android” > <!– 背景 –> <item android:id=”@android:id/background”> <shape> <corners android:radius=”5dip” /> <gradient android:angle=”270″ android:centerY=”0.75″ android:endColor=”#FFFFFF” android:startColor=”#FFFFFF” /> </shape> </item> <item android:id=”@android:id/secondaryProgress”> <clip> <shape> <corners android:radius=”0dip” /> <gradient android:angle=”270″ android:centerY=”0.75″ android:endColor=”#df0024″ android:startColor=”#df0024″ /> </shape> </clip> </item> <item android:id=”@android:id/progress”> <clip> <shape> <corners android:radius=”5dip” /> <gradient android:angle=”270″ android:centerY=”0.75″ android:endColor=”#de42ec” android:startColor=”#de42ec” /> </shape> </clip> </item> </layer-list>
再來(lái)看看shape_progressbar_bg.xml
<?xml version=”1.0″ encoding=”UTF-8″?> <shape xmlns:android=”http://schemas.android.com/apk/res/android” android:shape=”rectangle” > <!– 邊框填充的顏色 –> <solid android:color=”#cecece” /> <!– 設(shè)置進(jìn)度條的四個(gè)角為弧形 –> <!– android:radius 弧形的半徑 –> <corners android:radius=”90dp” /> <!– padding:邊界的間隔–> <padding android:bottom=”1dp” android:left=”1dp” android:right=”1dp” android:top=”1dp” /> </shape>
就這樣把一個(gè)漂亮的條形進(jìn)度條做好了,在shape_progressbar_bg.xml中,邊框填充的顏色是一種挺好的方法,加了一個(gè)進(jìn)度條的邊框。另外為了進(jìn)度條四個(gè)角都是圓形的,就用了這個(gè)屬性<corners android:radius=”90dp” /> 。
搞定,這個(gè)時(shí)候可以開(kāi)心一下了,去喝杯水先。
二、圓形進(jìn)度條。另一個(gè)比較常用的就是圓形進(jìn)度條,表示正在進(jìn)行中。。。
來(lái)看2張小圖
先看第一張,分析下代碼,用自定義的view,用pop來(lái)做的哦。LoadingDialog.java
public class LoadingDialog { private Context context; private PopupWindow popupDialog; private LayoutInflater layoutInflater; private RelativeLayout layout; private RelativeLayout layout_bg; private View circleView; private RotateAnimation rotateAnim; private AlphaAnimation alphaAnim_in; private AlphaAnimation alphaAnim_out; public LoadingDialog(Context context) { layoutInflater = LayoutInflater.from(context); this.context = context; } private void initAnim() { rotateAnim = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotateAnim.setDuration(2000); rotateAnim.setRepeatMode(Animation.RESTART); rotateAnim.setRepeatCount(-1); rotateAnim.setInterpolator(new LinearInterpolator()); alphaAnim_in = new AlphaAnimation(0f, 1f); alphaAnim_in.setFillAfter(true); alphaAnim_in.setDuration(200); alphaAnim_in.setInterpolator(new LinearInterpolator()); alphaAnim_out = new AlphaAnimation(1f, 0f); alphaAnim_out.setFillAfter(true); alphaAnim_out.setDuration(100); alphaAnim_out.setInterpolator(new LinearInterpolator()); alphaAnim_out.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation arg0) { } @Override public void onAnimationRepeat(Animation arg0) { } @Override public void onAnimationEnd(Animation arg0) { dismiss(); } }); } /** * 判斷是否顯示 * @return */ public boolean isShowing() { if (popupDialog != null && popupDialog.isShowing()) { return true; } return false; } /** * 顯示 */ public void show() { dismiss(); initAnim(); layout = (RelativeLayout) layoutInflater.inflate(R.layout.view_loadingdialog, null); circleView = (View) layout.findViewById(R.id.loading_dialog); layout_bg = (RelativeLayout) layout.findViewById(R.id.bgLayout); popupDialog = new PopupWindow(layout, LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); View parentView = ((Activity) context).getWindow().findViewById(Window.ID_ANDROID_CONTENT); popupDialog.showAtLocation(parentView, Gravity.CENTER, 0, 0); layout_bg.startAnimation(alphaAnim_in); circleView.startAnimation(rotateAnim); } /** * 隱藏 */ public void dismiss() { if (popupDialog != null && popupDialog.isShowing()) { layout_bg.clearAnimation(); circleView.clearAnimation(); popupDialog.dismiss(); } } }
這里呢引用了view_loadingdialog.xml,已作整個(gè)頁(yè)面的背景和loading框。
view_loadingdialog.xml
<?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” > <RelativeLayout android:id=”@+id/bgLayout” android:layout_width=”match_parent” android:layout_height=”match_parent” android:background=”#66000000″ > <View android:id=”@+id/loading_dialog” android:layout_width=”48dp” android:layout_height=”48dp” android:layout_centerInParent=”true” android:background=”@drawable/shape_loading_dialog” /> </RelativeLayout> </RelativeLayout>
再看看這個(gè)shape_loading_dialog.xml,繪制轉(zhuǎn)動(dòng)的圓形性狀,又不用圖片挺好的。
<?xml version=”1.0″ encoding=”utf-8″?> <shape xmlns:android=”http://schemas.android.com/apk/res/android” android:shape=”oval” > <stroke android:width=”3dp” android:dashWidth=”2dp” android:dashGap=”3dp” android:color=”#fff”/> <gradient android:startColor=”#00ffffff” android:endColor=”#00ffffff” android:angle=”180″/> </shape>
就是這樣子,實(shí)現(xiàn)了第一個(gè)圓形進(jìn)度條。
可是如果做有顏色的圓形進(jìn)度條呢,或者彩色的,后來(lái)想想不如加個(gè)圖片來(lái)實(shí)現(xiàn)好了。
LoadingImgDialog.java
public class LoadingImgDialog { private Context context; private PopupWindow popupDialog; private LayoutInflater layoutInflater; private RelativeLayout layout; private RelativeLayout layout_bg; private int residBg; private View loading_dialog; /** 背景添加旋轉(zhuǎn)動(dòng)畫(huà)效果,實(shí)現(xiàn)了轉(zhuǎn)動(dòng)動(dòng)作 **/ private RotateAnimation rotateAnim; /** 透明度動(dòng)畫(huà)效果 **/ private AlphaAnimation alphaAnim_in; private AlphaAnimation alphaAnim_out; public LoadingImgDialog(Context context, int residBg) { layoutInflater = LayoutInflater.from(context); this.residBg = residBg; this.context = context; } private void initAnim() { rotateAnim = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotateAnim.setDuration(2000); rotateAnim.setRepeatMode(Animation.RESTART); rotateAnim.setRepeatCount(-1); rotateAnim.setInterpolator(new LinearInterpolator()); alphaAnim_in = new AlphaAnimation(0f, 1f); alphaAnim_in.setFillAfter(true); alphaAnim_in.setDuration(200); alphaAnim_in.setInterpolator(new LinearInterpolator()); alphaAnim_out = new AlphaAnimation(1f, 0f); alphaAnim_out.setFillAfter(true); alphaAnim_out.setDuration(100); alphaAnim_out.setInterpolator(new LinearInterpolator()); /** 監(jiān)聽(tīng)動(dòng)作,動(dòng)畫(huà)結(jié)束時(shí),隱藏LoadingColorDialog **/ alphaAnim_out.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation arg0) { } @Override public void onAnimationRepeat(Animation arg0) { } @Override public void onAnimationEnd(Animation arg0) { dismiss(); } }); } /** * 判斷是否顯示 * @return */ public boolean isShowing() { if (popupDialog != null && popupDialog.isShowing()) { return true; } return false; } /** * 顯示 */ public void show() { dismiss(); initAnim(); layout = (RelativeLayout) layoutInflater.inflate(R.layout.view_loadingcolordialog, null); loading_dialog = (View) layout.findViewById(R.id.loading_dialog); loading_dialog.setBackgroundResource(residBg); layout_bg = (RelativeLayout) layout.findViewById(R.id.bgLayout); popupDialog = new PopupWindow(layout, LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); View parentView = ((Activity) context).getWindow().findViewById(Window.ID_ANDROID_CONTENT); popupDialog.showAtLocation(parentView, Gravity.CENTER, 0, 0); layout_bg.startAnimation(alphaAnim_in); loading_dialog.startAnimation(rotateAnim); } /** * 隱藏 */ public void dismiss() { if (popupDialog != null && popupDialog.isShowing()) { layout_bg.clearAnimation(); loading_dialog.clearAnimation(); popupDialog.dismiss(); } } }
其實(shí)就是修改了一個(gè)地方,加入residBg,用圖片資源設(shè)置圓形進(jìn)度條那一小部分的背景。
稍稍修改一句代碼換一張圖片,就變成了另一個(gè)圓形進(jìn)度條了,好玩吧。
loadingColorDialog = new LoadingImgDialog(this, R.drawable.img_loading);
loadingColorDialog2 = new LoadingImgDialog(this, R.drawable.img_loading2);
給看看全屏效果圖吧,就稍稍修改一句代碼換一張圖片哦。
最后給MainActivity.java看看
public class MainActivity extends Activity implements OnClickListener { Button bt_loading_dialog; Button bt_color_loading_dialog; Button bt_color_loading_dialog2; LoadingDialog loadingDialog; LoadingImgDialog loadingColorDialog; LoadingImgDialog loadingColorDialog2; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { bt_loading_dialog = (Button) findViewById(R.id.bt_loading_dialog); bt_loading_dialog.setOnClickListener(this); bt_color_loading_dialog = (Button) findViewById(R.id.bt_loading_img_dialog); bt_color_loading_dialog.setOnClickListener(this); bt_color_loading_dialog2 = (Button) findViewById(R.id.bt_loading_img_dialog2); bt_color_loading_dialog2.setOnClickListener(this); loadingDialog = new LoadingDialog(this); loadingColorDialog = new LoadingImgDialog(this, R.drawable.img_loading); loadingColorDialog2 = new LoadingImgDialog(this, R.drawable.img_loading2); } @Override public void onClick(View view) { switch (view.getId()) { case R.id.bt_loading_dialog: loadingDialog.show(); break; case R.id.bt_loading_img_dialog: loadingColorDialog.show(); break; case R.id.bt_loading_img_dialog2: loadingColorDialog2.show(); break; default: break; } } @Override protected void onDestroy() { super.onDestroy(); loadingColorDialog.dismiss(); } @Override public void onBackPressed() { if (loadingDialog.isShowing()) { loadingDialog.dismiss(); } else if (loadingColorDialog.isShowing()){ loadingColorDialog.dismiss(); } else if (loadingColorDialog2.isShowing()){ loadingColorDialog2.dismiss(); } else { finish(); } } }
以上就是對(duì)Android 進(jìn)度條資料整理,后續(xù)繼續(xù)補(bǔ)充相關(guān)資料,謝謝大家對(duì)本站的支持!
相關(guān)文章
Android實(shí)戰(zhàn)RecyclerView頭部尾部添加方法示例
本篇文章主要介紹了Android實(shí)戰(zhàn)RecyclerView頭部尾部添加方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11Android編程實(shí)現(xiàn)手機(jī)拍照的方法詳解
這篇文章主要介紹了Android編程實(shí)現(xiàn)手機(jī)拍照的方法,結(jié)合實(shí)例形式分析了Android實(shí)現(xiàn)手機(jī)拍照的操作步驟與具體細(xì)節(jié),需要的朋友可以參考下2016-11-11Android中ViewPager實(shí)現(xiàn)滑動(dòng)條及與Fragment結(jié)合的實(shí)例教程
ViewPager類主要被用來(lái)實(shí)現(xiàn)可滑動(dòng)的視圖功能,這里我們就來(lái)共同學(xué)習(xí)Android中ViewPager實(shí)現(xiàn)滑動(dòng)條及與Fragment結(jié)合的實(shí)例教程,需要的朋友可以參考下2016-06-06android傳送照片到FTP服務(wù)器的實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了android傳送照片到FTP服務(wù)器的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06Android 微信6.1 tab欄圖標(biāo)和字體顏色漸變的實(shí)現(xiàn)
本文主要對(duì)微信6.1 tab 欄顏色漸變效果的實(shí)現(xiàn)全過(guò)程進(jìn)行分析介紹,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2016-12-12Android游戲開(kāi)發(fā)學(xué)習(xí)②焰火綻放效果實(shí)現(xiàn)方法
這篇文章主要介紹了Android游戲開(kāi)發(fā)學(xué)習(xí)②焰火綻放效果實(shí)現(xiàn)方法,以實(shí)例形式詳細(xì)分析了Android中粒子對(duì)象類Particle類和粒子集合類ParticleSet類及物理引擎ParticleThread類 的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10Android自定義帶加載動(dòng)畫(huà)效果的環(huán)狀進(jìn)度條
這篇文章主要介紹了Android自定義帶加載動(dòng)畫(huà)效果的環(huán)狀進(jìn)度條,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12Android 開(kāi)發(fā)與代碼無(wú)關(guān)技巧詳解
這篇文章主要為大家介紹了Android 開(kāi)發(fā)與代碼無(wú)關(guān)技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12