使用Dialog实现全局Loading加载框

简介: Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading框可以实现低耦合。

Dialog实现全局Loading加载框

很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏

使用Dialog实现Loading框可以实现低耦合。

效果图

这里写图片描述

自定义Loading类

package ……;

import ……;

/**
 * Created by kongqw on 2015/12/3.
 */
public abstract class Loading extends Dialog {

    public abstract void cancle();

    public Loading(Context context) {
        super(context, R.style.Loading);
        // 加载布局
        setContentView(R.layout.view_loading);
        // 设置Dialog参数
        Window window = getWindow();
        WindowManager.LayoutParams params = window.getAttributes();
        params.gravity = Gravity.CENTER;
        window.setAttributes(params);
    }

    // TODO 封装Dialog消失的回调
    @Override
    public void onBackPressed() {
        // 回调
        cancle();
        // 关闭Loading
        dismiss();
    }
}

给自定义的Dialog添加自定义属性

在values文件夹下styles.xml里添加属性

<resources>

    ……

    <style name="Loading" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowNoTitle">true</item>
        <!-- 设置背景色 透明-->
        <item name="android:background">@android:color/transparent</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <!-- 设置是否显示背景 -->
        <item name="android:backgroundDimEnabled">true</item>
        <!-- 设置背景透明度 -->
        <item name="android:backgroundDimAmount">0.6</item>
        <!-- 设置点击空白不消失 -->
        <item name="android:windowCloseOnTouchOutside">false</item>
    </style>

</resources>

Loading布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#88888888"
        android:gravity="center"
        android:textColor="#FFFF0000"
        android:padding="10dp"
        android:text="Loading" />

</RelativeLayout>

使用

初始化

cancle()是按返回键,Loading框关闭的回调,可以做取消加载请求的操作。

// 添加Loading
Loading mLoading = new Loading(this) {
    @Override
    public void cancle() {

    }
};

显示Loading框

// 显示Loading
mLoading.show();

关闭Loading框

// 关闭Loading
mLoading.dismiss();
相关文章
|
6月前
|
前端开发
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
|
API
Element UI Loading 加载组件动态变更 text 值(加载文案)
有这样的一个需求,我在上传文件的时候,上传阶段耗时较长,所以利用加载动画作为友好提示用户等待。
1287 0
Element UI Loading 加载组件动态变更 text 值(加载文案)
|
3月前
|
JavaScript
成功解决:el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。(每次页面刷新后、第一次打开dialog窗口、图片数不加载)
这篇文章分享了解决Vue中`el-dialog`弹出窗口在第一次打开时数据未加载问题的技巧,通过改变组件的`key`属性来强制Vue重新渲染DOM,从而确保数据正确加载。
成功解决:el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。(每次页面刷新后、第一次打开dialog窗口、图片数不加载)
解决layer弹框加载时闪白屏功能
解决layer弹框加载时闪白屏功能
71 1
|
6月前
elementUI引用el-image-viewer组件全局方法预览大图
elementUI引用el-image-viewer组件全局方法预览大图
|
Web App开发 移动开发 前端开发
多种方法实现Loading(加载)动画效果
当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次。 既能让用户知道正在提交中,也能防止二次提交,好处多多呢。
多种方法实现Loading(加载)动画效果
|
JavaScript 前端开发
css:隐藏input file标签并触发点击上传文件事件
css:隐藏input file标签并触发点击上传文件事件
602 0
css:隐藏input file标签并触发点击上传文件事件
|
小程序 程序员
【小程序】全局配置window和tabBar
【小程序】全局配置window和tabBar
172 0
【小程序】全局配置window和tabBar
el-dialog弹出框被遮罩层覆盖的解决办法
el-dialog弹出框被遮罩层覆盖的解决办法
1052 0
el-dialog弹出框被遮罩层覆盖的解决办法
|
JavaScript
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
849 0