Loading系列:实现一个Loading弹窗

上效果:

github完整demo

  • 导入中间的转动圆条
    //进度窗
    implementation 'me.zhanghai.android.materialprogressbar:library:1.4.2'
  • Dialog布局文件,dialog_loading.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="96dp"
    android:layout_height="96dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/bg_dialog_loading"
    android:orientation="vertical"
    android:gravity="center">

    <me.zhanghai.android.materialprogressbar.MaterialProgressBar
        android:id="@+id/progress"
        style="@style/LoadingProgressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:indeterminate="true"
        android:maxHeight="30dp"
        android:maxWidth="30dp"
        android:minHeight="30dp"
        android:minWidth="30dp" />
    <TextView
        android:id="@+id/tv_note"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="正在处理..."
        android:layout_marginTop="5dp"
        android:textColor="#ffffff"
        />
</LinearLayout>
  • bg_dialog_loading.xml代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp"/>
    <solid android:color="#99000000"/>
</shape>
  • 转动条需要的style,路径:res/values/styles.xml
    <style name="LoadingProgressBar" parent="Widget.MaterialProgressBar.ProgressBar">
        <item name="android:minWidth">32dp</item>
        <item name="android:maxWidth">32dp</item>
        <item name="android:minHeight">32dp</item>
        <item name="android:maxHeight">32dp</item>
    </style>
  • Dialog需要的style,文件路径:res/values/styles.xml
    <!-- 弹窗 -->
    <style name="AlertDialogStyle" parent="@android:style/Theme.Dialog">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowFrame">@null</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>
  • MainActivity.java调用显示逻辑:
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


    public Dialog mDialog;

    public void initLoadDialog(String content) {
        if (mDialog == null) {
            mDialog = getLoadingDialog(MainActivity.this, content);
            mDialog.setCancelable(false);
        } else {
            dialogTvContent.setText(content);
        }

        if (!mDialog.isShowing()) {
            mDialog.show();
        }
    }

    TextView dialogTvContent;

    public  Dialog getLoadingDialog(Context context, String content) {
        Dialog dialog = new Dialog(context, R.style.AlertDialogStyle);
        View view = LayoutInflater.from(context).inflate(R.layout.dialog_loading, null);
        dialogTvContent = view.findViewById(R.id.tv_note);
        if (TextUtils.isEmpty(content)) {
            dialogTvContent.setVisibility(View.GONE);
        } else {
            dialogTvContent.setText(content);
        }
        dialog.setContentView(view, new ViewGroup.LayoutParams(DensityUtil.dp2px(context, 96), DensityUtil.dp2px(context, 96)));
        return dialog;
    }

    public void dismissLoadDialog() {
        if (mDialog != null && mDialog.isShowing()) {
            mDialog.dismiss();
        }
    }

    public void testShowLoading(View view) {
        initLoadDialog("请等待");
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                dismissLoadDialog();
            }
        }, 2000);
    }
}
  • DensityUtil.java代码
public class DensityUtil {
    /** dp转px */
    public static int dp2px(Context context, float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, context.getResources().getDisplayMetrics());
    }

    /** sp转px */
    public static int sp2px(Context context, float spVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                spVal, context.getResources().getDisplayMetrics());
    }

    /** px转dp */
    public static float px2dp(Context context, float pxVal) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (pxVal / scale);
    }

    /** px转sp */
    public static float px2sp(Context context, float pxVal) {
        return (pxVal / context.getResources().getDisplayMetrics().scaledDensity);
    }

}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以使用异步编程的方式来解决element比较耗时的方法加loading的问题。具体实现方式是在方法执行前显示loading,然后使用异步编程的方式执行方法,方法执行完毕后关闭loading。以下是一个示例代码: ``` <template> <div> <el-button @click="handleClick">执行耗时方法</el-button> <el-dialog :visible.sync="loadingVisible"> <el-progress type="circle" :percentage="loadingPercentage"></el-progress> </el-dialog> </div> </template> <script> export default { data() { return { loadingVisible: false, loadingPercentage: 0 } }, methods: { async handleClick() { this.loadingVisible = true this.loadingPercentage = 0 const result = await this.longTimeMethod() this.loadingVisible = false console.log(result) }, longTimeMethod() { return new Promise(resolve => { setTimeout(() => { resolve('long time method result') }, 5000) }) } } } </script> ``` 在上面的代码中,我们使用了一个loadingVisible变量来控制loading的显示和隐藏,使用了一个loadingPercentage变量来控制loading进度条的进度。在handleClick方法中,我们首先将loadingVisible设置为true,然后使用异步编程的方式执行longTimeMethod方法,方法执行完毕后将loadingVisible设置为false。在longTimeMethod方法中,我们使用了Promise来模拟一个耗时的方法,方法执行完毕后返回一个结果。在实际应用中,我们可以将longTimeMethod替换为我们需要执行的耗时方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhangjin1120

可靠的文章费时费力,希望支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值