Android加载中对话框示例

亦凉 2022-05-29 07:36 192阅读 0赞

# Android加载中对话框示例 #

前一段时间需要一个Android加载中的对话框，纠结了比较久。  
加载中对话框就是要显示的页面其中的数据量未定，所以显示是循环获取的状态，知道获取完数据，或者超时就关闭加载中对话框。  
如果是做一个一直转圈的那种是非常简单的  
但是如果要做成网上看到的各种动画效果的那种，确实是有点困难，我都有点写不出来，要看别人的源码，抠部分代码出来修改才可以！

这个给大家看看几个加载中的对话框的样式。

## 第一种是我们Android系统中的ProgressBaar类完成的 ##

![0][]

这种方式是最简单的，效果也是比较普通的，适合那些功能性的软件，比如蓝牙类的，  
如果是商业购物类的软件的加载中对话框就要做得好看一点了，使用Gif图或自定义View是可以的

## 第二种是使用Gif图显示的 ##

![1][]

这种效果图要有Gif动态图，并且使用Glide框架来加载  
这里提供一个简单的Gif动态图的网址：[http://www.lanrentuku.com/gif/a/loading\_3.html][http_www.lanrentuku.com_gif_a_loading_3.html]，选择你要的动态图，点击右键“复制图片网址”，就可以得到Gif图的Url地址了。  
网上的效果有些局限，你可以多去几个网址看看，还有些网址是可以制作Gif图片的  
如果可以的话叫UI工程师去给你弄Gif也是可以的。。。

## 第三种是使用复杂的自定义View来编写的 ##

![3][]  
这个方法的实现就有点复杂了。  
别看上面两个加载中对话框的图片的动作不多，但是里面的类加起来居然有20个左右。  
当然网上也是有其他的自定义View效果实现的，有些更简单，有些更复杂。。。  
使用复杂一点的自定义View，自己的项目代码就要多加一些类了。

## 这里给大家简单展示一个前面两个加载中的对话框的主要代码 ##

### 普通加载中对话框 ###

#### CommonDialogActivity.java代码 ####

package com.nsd.lwx.dialogshow.common;
    
    import android.app.ProgressDialog;
    import android.os.Bundle;
    import android.support.v7.app.AlertDialog;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    
    import com.nsd.lwx.dialogshow.R;
    
    public class CommonDialogActivity extends AppCompatActivity {
        
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_dialog_comment);
        }
    
        //普通加载中对话框：左右结构的显示
        public void showCommonDialog1(View view) {
            ProgressDialog mDefaultDialog = new ProgressDialog(this);
    //        mDefaultDialog.setProgressStyle(android.app.ProgressDialog.STYLE_SPINNER); //默认就是小圆圈的那种形式
            mDefaultDialog.setMessage("正在进行网络请求...");
    //        mDefaultDialog.setCancelable(true);//默认true
            mDefaultDialog.setCanceledOnTouchOutside(false);//默认true
            mDefaultDialog.show();
        }
    
        //普通加载中对话框：上下结构的显示
        public void showCommonDialog2(View view) {
            AlertDialog.Builder builder = new AlertDialog.Builder(this);
            View dialogView = View.inflate(this, R.layout.dialog_comment2, null);
            builder.setView(dialogView)   ;
            AlertDialog alertDialog = builder.create();
            alertDialog.show();
        }
    
    
        //普通加载中对话框：水平进度条的显示
        public void showCommonDialog3(View view) {
            AlertDialog.Builder builder = new AlertDialog.Builder(this);
            View dialogView = View.inflate(this, R.layout.dialog_comment3, null);
            builder.setView(dialogView)   ;
            AlertDialog alertDialog = builder.create();
            alertDialog.show();
    
        }
    
    
    }

我感觉这个Dialog的setCancelable和setCanceledOnTouchOutside方法也是比较实用的。  
setCancelable默认为true，表示可以触摸屏幕或者按后退键关闭对话框。  
如果设置为false，那么必须要使用代码来控制关闭对话框，触摸屏幕或者按后退键都是无法关闭对话框的。  
setCanceledOnTouchOutside默认为true，表示触摸屏幕可以关闭对话框。  
如果改为false，表示按后退键可以退出对话框，触摸屏幕不会退回对话框。

#### dialog\_comment2.xml ####

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <ProgressBar
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:indeterminate="true" />
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="正在进行网络请求..." />
    
    
    </LinearLayout>

#### dialog\_comment3.xml ####

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <ProgressBar
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:indeterminate="true"      //水平进度条循环跑的关键
        />
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="正在进行网络请求..." />
    
    
    </LinearLayout>

### 使用Gif显示加载中对话框 ###

#### GifDialogActivity.java的代码 ####

package com.nsd.lwx.dialogshow.gif;
    
    import android.os.Bundle;
    import android.support.v7.app.AlertDialog;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.widget.ImageView;
    
    import com.bumptech.glide.Glide;
    import com.nsd.lwx.dialogshow.R;
    
    public class GifDialogActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_dialog_gif);
        }
    
        //本地Gif图加载
        public void showGifDialog1(View view) {
            AlertDialog.Builder builder = new AlertDialog.Builder(this);
            View dialogView = View.inflate(this, R.layout.dialog_gif, null);
            ImageView iv_gif = dialogView.findViewById(R.id.iv_gif);
            dialogView.findViewById(R.id.tv_loading).setVisibility(View.GONE);
            Glide.with(this).load(R.drawable.gif1).into(iv_gif);
            builder.setView(dialogView);
            AlertDialog alertDialog = builder.create();
            alertDialog.show();
        }
    
        //本地Gif加载2
        public void showGifDialog2(View view) {
            AlertDialog.Builder builder = new AlertDialog.Builder(this);
            View dialogView = View.inflate(this, R.layout.dialog_gif, null);
            ImageView iv_gif = dialogView.findViewById(R.id.iv_gif);
            dialogView.findViewById(R.id.tv_loading).setVisibility(View.GONE);
            Glide.with(this).load(R.drawable.gif2).into(iv_gif);
            builder.setView(dialogView);
            AlertDialog alertDialog = builder.create();
            alertDialog.show();
        }
    
    
        //网络Gif加载
        public void showGifDialog3(View view) {
            AlertDialog.Builder builder = new AlertDialog.Builder(this);
            View dialogView = View.inflate(this, R.layout.dialog_gif, null);
            ImageView iv_gif = dialogView.findViewById(R.id.iv_gif);
            dialogView.findViewById(R.id.tv_loading).setVisibility(View.VISIBLE);
            Glide.with(this).load("http://img.lanrentuku.com/img/allimg/1212/5-121204193951.gif").into(iv_gif);
            builder.setView(dialogView);
            AlertDialog alertDialog = builder.create();
            alertDialog.show();
        }
    
    
    }

#### dialog\_gif.xml ####

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <ImageView
            android:id="@+id/iv_gif"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:scaleType="fitXY"
            android:src="@mipmap/ic_launcher" />
    
        <TextView
            android:id="@+id/tv_loading"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="正在进行网络请求..."
            android:visibility="gone" />
    
    
    </LinearLayout>

项目中我添加了Glide的jar包到libs中，是2018年3月最新的，Studio不知为啥依赖不上，就从GitHub中去下载了个Jar包。

### 自定义View显示加载中的代码太多，就不贴出来了 ###

需要的可以看我项目的源码  
这里示例看起来是自定义View的加载中好看一点，但是如果找到合适的Gif图也是可以显示的非常好看的。

这里看看上面项目的全部效果；  
![4][]

# 共勉：既然庸庸碌碌也难逃一死，何不奋起一搏？ #

[0]: https://i.imgur.com/AdsgJK5.gif
[1]: https://i.imgur.com/vdlUkGU.gif
[http_www.lanrentuku.com_gif_a_loading_3.html]: http://www.lanrentuku.com/gif/a/loading_3.html
[3]: https://i.imgur.com/RzlyrTc.gif
[4]: https://i.imgur.com/93z4VrI.gif