zoukankan      html  css  js  c++  java

  • Android loading进度条使用简单总结

    在这里，总结一下loading进度条的使用简单总结一下。

    一、说起进度条，必须说说条形进度条，经常都会使用到嘛，特别是下载文件进度等等，还有像腾讯QQ安装进度条一样，有个进度总给人良好的用户体验。

    先来找图看看，做这个图完成不用图片就可以做到了。

    看下xml布局文件，其实就是直接用xml写的在加两个属性设置一下就好了，一个style,另一个是background。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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吧

    1
    2
    3
    4
    5
    6
    7
    <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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <?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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <?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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <?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，绘制转动的圆形性状，又不用图片挺好的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    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，用图片资源设置圆形进度条那一小部分的背景。

    稍稍修改一句代码换一张图片，就变成了另一个圆形进度条了，好玩吧。

    1
    2
    loadingColorDialog = new LoadingImgDialog(this, R.drawable.img_loading);
    loadingColorDialog2 = new LoadingImgDialog(this, R.drawable.img_loading2);

    给看看全屏效果图吧，就稍稍修改一句代码换一张图片哦。

    最后给MainActivity.java看看

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    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();
            }
        }
     
    }

     
  • 相关阅读:
    从03域控升级至2012
    Aundit使用记录文档
    exchange2010新特性
    MSDN介绍内容
    2013优秀博客
    邮箱协议
    不错的2010学习博客
    觉得UtraWebGrid老不稳定
    初体验：今天弄了下NetAdvantage赶紧写写，怕明天睡醒又忘了哦。
    在代码文件中设置控件的长宽这些是这样的。
  • 原文地址：https://www.cnblogs.com/Free-Thinker/p/4207711.html
Copyright © 2011-2022 走看看