同福

自定义对话框的实现

介绍

介绍

福哥在做完登录页面后,想在点击登录按钮后出一个“处理中...”的消息框

发现在 android 里这个只能自己做,无语~~~

一顿折腾终于做出来了,现在分享一下

教程

技术要点

这里面有几个重要的东西要弄明白

  • 对话框使用独立的布局

  • 通过AlertDialog弹出对话框

  • 对话框设置圆角边框

  • 对话框设置背景透明样式

对话框布局

我们在对话框里放了一个 ImageView,一个 TextView,使用的是约束布局

福哥在这里面用了一个 shape_corners 样式,后面有定义

<androidx.constraintlayout.widget.ConstraintLayout
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:background="@drawable/shape_corners">

    <ImageView
        android:id="@+id/loading_icon"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:paddingVertical="10dp"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/loading_text"
        app:layout_constraintTop_toBottomOf="@+id/loading_icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="处理中..."
        android:textColor="#333333"
        android:textAlignment="center"
        android:paddingVertical="10dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

调用对话框

我们在需要弹出对话框的地方通过以下代码进行调用

ShowLoading 用来弹出对话框,这里面有判断是否初始化过,没有初始化过需要先做初始化

HideLoading 用来关闭对话框

福哥在初始化对话框的时候使用了一个样式 Transparent,用来将对话框背景设置成透明的,后面有定义

private void ShowLoading(){
    if(dialog == null) {
        View view = LayoutInflater.from(this).inflate(R.layout.loading, null);
        AlertDialog.Builder builder = new AlertDialog.Builder(Login.this, R.style.Transparent);
        dialog = builder.setView(view).show();

        // set size of dialog
        Window dialogWindow = dialog.getWindow();
        WindowManager m = getWindowManager();
        Display d = m.getDefaultDisplay();
        WindowManager.LayoutParams p = dialogWindow.getAttributes();
        p.width = (int) (d.getWidth() * 0.65);
        // p.height = (int) (d.getHeight() * 0.45);
        dialogWindow.setAttributes(p);

        // cancel outside of dialog click event
        dialog.setCanceledOnTouchOutside(false);
        dialog.setCancelable(false);
    }
    else{
        dialog.show();
    }
}

private void HideLoading(){
    dialog.dismiss();
}

圆角边框样式

如果只完成上面两个步骤,会发现对话框方方的很难看

所以我们需要通过 shape corners 来给对话框设置圆角样式

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp"/>
    <solid android:color="#ffffff"/>
</shape>

透明背景样式

如果只完成上面三个步骤,会发现对话框还是方的

其实这是因为对话框布局的背景是默认白色的,所以我们的内容布局和对话框布局连在一起了,看不出圆角了(话说这个问题折腾了福哥大半天,真是无语啊~~)

所以我们需要设置一个透明背景的样式给对话框的背景调成透明的

<style name="Transparent" parent="Theme.AppCompat.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:windowBackground">@android:color/transparent</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:backgroundDimAmount">0.8</item>
</style>

总结

这样一顿调整后,就可以出现很漂亮的对话框了~~