在這里，總結一下loading進度條的使用簡單總結一下。

一、說起進度條，必須說說條形進度條，經常都會使用到嘛，特別是下載文件進度等等，還有像騰訊QQ安裝進度條一樣，有個進度總給人良好的用戶體驗。

先來找圖看看，做這個圖完成不用圖片就可以做到了。

看下xml布局文件，其實就是直接用xml寫的在加兩個屬性設置一下就好了，一個style,另一個是background。

<ProgressBarandroid: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又是引用一個自定義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" /><gradientandroid: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" /><gradientandroid: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" /><gradientandroid:angle="270"android:centerY="0.75"android:endColor="#de42ec"android:startColor="#de42ec" /></shape></clip></item> </layer-list>

再來看看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" /><!-- 設置進度條的四個角為弧形 --><!-- android:radius 弧形的半徑 --><corners android:radius="90dp" /> <!--padding：邊界的間隔--><paddingandroid:bottom="1dp"android:left="1dp"android:right="1dp"android:top="1dp" /> </shape>

就這樣把一個漂亮的條形進度條做好了，在shape_progressbar_bg.xml中，邊框填充的顏色是一種挺好的方法，加了一個進度條的邊框。另外為了進度條四個角都是圓形的，就用了這個屬性<corners android:radius="90dp" />?。

搞定，這個時候可以開心一下了，去喝杯水先。

?

二、圓形進度條。另一個比較常用的就是圓形進度條，表示正在進行中。。。

來看2張小圖

?

先看第一張，分析下代碼，用自定義的view,用pop來做的哦。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() {@Overridepublic void onAnimationStart(Animation arg0) {}@Overridepublic void onAnimationRepeat(Animation arg0) {}@Overridepublic 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，已作整個頁面的背景和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" > <RelativeLayoutandroid:id="@+id/bgLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#66000000" ><Viewandroid:id="@+id/loading_dialog"android:layout_width="48dp"android:layout_height="48dp"android:layout_centerInParent="true"android:background="@drawable/shape_loading_dialog" /> </RelativeLayout> </RelativeLayout>

再看看這個shape_loading_dialog.xml，繪制轉動的圓形性狀，又不用圖片挺好的。

<?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>

就是這樣子，實現了第一個圓形進度條。

可是如果做有顏色的圓形進度條呢，或者彩色的，后來想想不如加個圖片來實現好了。

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;/** 背景添加旋轉動畫效果，實現了轉動動作 **/private RotateAnimation rotateAnim;/** 透明度動畫效果 **/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());/** 監聽動作，動畫結束時，隱藏LoadingColorDialog **/alphaAnim_out.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation arg0) {}@Overridepublic void onAnimationRepeat(Animation arg0) {}@Overridepublic 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();}} }

其實就是修改了一個地方，加入residBg，用圖片資源設置圓形進度條那一小部分的背景。

稍稍修改一句代碼換一張圖片，就變成了另一個圓形進度條了，好玩吧。

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;@Overrideprotected 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);}@Overridepublic 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;}}@Overrideprotected void onDestroy() {super.onDestroy();loadingColorDialog.dismiss();}@Overridepublic void onBackPressed() {if (loadingDialog.isShowing()) {loadingDialog.dismiss();} else if (loadingColorDialog.isShowing()){loadingColorDialog.dismiss();} else if (loadingColorDialog2.isShowing()){loadingColorDialog2.dismiss();} else {finish();}}}

?

本文鏈接：http://www.cnblogs.com/liqw/p/3995794.html

下載地址：http://download.csdn.net/detail/lqw770737185/8002967

?誰要項目的請留下郵箱吧，還沒上傳好源文件呢，有什么問題留言哦，大家晚安吧。

轉載于:https://www.cnblogs.com/liqw/p/3995794.html

總結

以上是生活随笔為你收集整理的Android loading进度条使用简单总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。