首页 > 技术文章 > 自定义的加载弹窗

Jett 2016-05-16 09:29 原文

Android数据加载的时候,往往需要一个等待弹窗。而系统自带的弹窗样式往往和我们软件不想符合,这些记录一个,简单的自定义样式的加载等待框。(用到的所有素材我会在分享给大家)

先上效果图

1、新建自定义布局样式 loading_dialog.xml。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:id="@+id/dialog_view"
 4     android:orientation="vertical"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:minHeight="80dp"
 8     android:minWidth="200dp"
 9     android:gravity="center"
10     android:background="@drawable/corners_5"
11     android:padding="10dp">
12     <ImageView
13         android:id="@+id/img"
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:src="@drawable/ll_loading_outside"
17         android:layout_marginBottom="10dp"
18         />
19     <TextView
20         android:id="@+id/tipTextView"
21         android:layout_width="wrap_content"
22         android:layout_height="wrap_content"
23         android:text="数据加载中……" />
24 </LinearLayout>
View Code

2、新建样式属性文件 corners_5.xml。

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

    <!-- 填充色 -->
    <solid android:color="#fff" />
    <!-- 边距 -->
    <corners
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"/>
</shape>
View Code

3、在styles.xml 下添加自定义样式 

    <!-- 自定义loading dialog -->
    <style name="loading_dialog" parent="android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@color/colorEmpty</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
View Code

4、在colors.xml 定义一个空白的颜色样式

<color name="colorEmpty">#00000000</color><!-- 透明色-->
View Code

5、在res文件夹下新建文件夹anim 并在该文件夹下新建弹窗动画效果 loadingdialog_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false" xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromDegrees="0"
        android:toDegrees="+360"
        android:duration="1500"
        android:startOffset="-1"
        android:repeatMode="restart"
        android:repeatCount="-1"/>
</set> 
View Code

6、下面我们自定义一个帮助类 LoadingDialog。

package until;

import android.app.Dialog;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.lyf.net.R;

/**
 * lyf on 2016/5/14.
 * 显示等待弹窗
 */
public class LoadingDialog {

    public static Dialog  getLoadingDialog(Context context,String msg) {

        LayoutInflater inflater = LayoutInflater.from(context);
        View v = inflater.inflate(R.layout.loading_dialog, null);// 得到加载view
        LinearLayout layout = (LinearLayout) v.findViewById(R.id.dialog_view);// 加载布局
        // main.xml中的ImageView
        ImageView spaceshipImage = (ImageView) v.findViewById(R.id.img);
        TextView tipTextView = (TextView) v.findViewById(R.id.tipTextView);// 提示文字
        // 加载动画
        Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(context, R.anim.loadingdialog_anim);
        // 使用ImageView显示动画
        spaceshipImage.startAnimation(hyperspaceJumpAnimation);
        tipTextView.setText(msg);// 设置加载信息

        Dialog loadingDialog = new Dialog(context, R.style.loading_dialog);// 创建自定义样式dialog

        loadingDialog.setCancelable(false);// 不可以用“返回键”取消

        loadingDialog.setContentView(layout, new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT));// 设置布局
        return loadingDialog;
    }
}
View Code

这样我们的自定义的Dialog弹窗就结束了,下面是调用。

Dialog pd = LoadingDialog.getLoadingDialog(AddXF_InfoActivity.this,"加载中...");
pd.show();

关闭

pd.dismiss();

素材下载地址:https://yunpan.cn/cSZ58jgIGcGXH  访问密码 a13e。


推荐阅读