Android多種進度條使用詳解

傳說之美發表於2014-10-05

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

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

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

看下xml佈局檔案，其實就是直接用xml寫的在加兩個屬性設定一下就好了，一個style,另一個是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又是引用一個自定義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>

再來看看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：邊界的間隔-->
    <padding
        android: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() {
            @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，已作整個頁面的背景和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>

再看看這個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() {
            @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();
        }
    }
}

其實就是修改了一個地方，加入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;
    @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();
        }
    }
 
}

jQuery實進度條效果詳解
2018-11-29
jQuery
JavaScript 動態進度條效果詳解
2018-11-23
JavaScript
HTML5/CSS3超酷進度條不同進度多種顏色
2014-11-16
HTMLCSSS3
js實現動態進度條詳解
2017-04-17
JS
Android 自定義 View：包含多種狀態的下載用圓形進度條
2019-04-02
AndroidView
Android - 蝸牛進度條
2017-06-16
Android
【新特性速遞】進度條，進度條，進度條
2020-06-12
Android花樣loading進度條（三）-配文字環形進度條
2021-09-09
Android
Android自定義圓形進度條
2019-01-18
Android
android弧形進度條，有詳細註釋的，比較簡單
2014-04-06
Android
ajax進度條非同步下載進度條
2012-06-26
非同步
Ajax 處理時進度條使用
2018-10-18
使用Java高速實現進度條
2014-10-21
Java
關於WPF進度條的使用
2024-03-26
【Android】自定義ProgressView-進度條動畫
2018-08-14
AndroidView動畫
android 自定義酷炫進度條動畫
2019-01-27
Android動畫
Qt 進度條
2021-05-30
QT
N 種僅僅使用 HTML/CSS 實現各類進度條的方式
2021-11-04
HTMLCSS
Android UI控制元件系列：ProgressBar（進度條）
2014-12-03
AndroidUI控制元件
Android之利用Handler實現ProgressBar進度條
2012-06-17
Android
使用canvas繪製圓形進度條
2018-03-28
Canvas
Xamarin XAML語言教程使用方法設定進度條進度
2017-05-18
Notification使用詳解之二：可更新進度的通知
2012-07-28
Android進階自定義View（三）圓形刻度進度條
2017-12-20
AndroidView
短視訊商城系統，Android進度條，自定義進度條，顯示百分比
2022-06-21
Android
C# 下載帶進度條程式碼（普通進度條）
2015-05-11
C#
Android ORM 框架：GreenDao 使用詳解（進階篇）
2017-07-03
AndroidORM框架
Android 三種動畫詳解
2021-09-09
Android動畫
HTML <progress> 進度條
2019-03-27
HTML
wkwebView 新增進度條
2018-09-10
WebView
canvas 畫進度條
2020-12-01
Canvas
wxWidgets進度條
2017-08-27
自定義進度條
2017-08-09
學習進度條
2024-03-06
Android自定義圓形進度條原始碼解析
2017-04-26
Android原始碼
Android通知之進度條對話方塊通知
2014-02-12
Android
Android 編寫一個帶進度條的Webview
2017-12-15
AndroidWebView
直播平臺製作，使用 NProgress 進度條
2022-11-28

Android多種進度條使用詳解

相關文章