Android 重载AlertDialog自定义美化弹窗

1. 创建自定义布局

首先，创建一个XML布局文件dialog_custom.xml，这个布局将作为AlertDialog的内容。

<!-- res/layout/dialog_custom.xml -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:orientation="vertical"

    android:padding="24dp"

    android:background="@drawable/dialog_background">


    <TextView

        android:id="@+id/tv_title"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="提示"

        android:textColor="@color/black"

        android:textSize="20sp"

        android:textStyle="bold"

        android:layout_marginBottom="16dp"/>


    <TextView

        android:id="@+id/tv_content"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="这是一个自定义的AlertDialog。"

        android:textColor="@color/gray"

        android:textSize="16sp"

        android:layout_marginBottom="24dp"/>


    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">


        <Button

            android:id="@+id/btn_negative"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="取消"

            style="@style/DialogButtonStyle"/>


        <Button

            android:id="@+id/btn_positive"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="确定"

            style="@style/DialogButtonStyle"/>

    </LinearLayout>

</LinearLayout>

2. 定义按钮样式

在res/values/styles.xml中定义按钮的样式。

<!-- Button样式 -->

<style name="DialogButtonStyle" parent="Widget.AppCompat.Button.Colored">

    <item name="android:background">@drawable/button_background</item>

    <item name="android:textColor">@color/white</item>

    <item name="android:textAllCaps">false</item>

</style>

3. 定义背景和按钮背景

在res/drawable目录下创建两个XML文件dialog_background.xml和button_background.xml。

<!-- dialog_background.xml -->

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#FFFFFF"/>

    <corners android:radius="8dp"/>

    <padding android:top="16dp" android:right="16dp" android:bottom="16dp" android:left="16dp"/>

</shape>

<!-- button_background.xml -->

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">

        <shape>

            <solid android:color="#E0E0E0"/>

        </shape>

    </item>

    <item>

        <shape>

            <solid android:color="#FFFFFF"/>

        </shape>

    </item>

</selector>

4. 创建AlertDialog

在你的Activity或Fragment中，创建AlertDialog并设置自定义布局。

public void showCustomDialog() {

    LayoutInflater inflater = LayoutInflater.from(this);

    View dialogView = inflater.inflate(R.layout.dialog_custom, null);

    AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.DialogAnimationStyle);

    builder.setView(dialogView);


    final AlertDialog dialog = builder.create();


    TextView title = dialogView.findViewById(R.id.tv_title);

    TextView message = dialogView.findViewById(R.id.tv_content);

    Button negativeButton = dialogView.findViewById(R.id.btn_negative);

    Button positiveButton = dialogView.findViewById(R.id.btn_positive);


    title.setText("自定义提示");

    message.setText("这是一个完全自定义的AlertDialog。");


    negativeButton.setOnClickListener(v -> dialog.dismiss());

    positiveButton.setOnClickListener(v -> {

        // 处理确定按钮的逻辑

        dialog.dismiss();

    });


    dialog.show();

}

5. 定义AlertDialog动画样式

在res/values/styles.xml中定义AlertDialog的动画样式。

<!-- Dialog动画样式 -->

<style name="DialogAnimationStyle" parent="Theme.AppCompat.Light.Dialog.Alert">

    <item name="android:windowEnterAnimation">@anim/slide_in_bottom</item>

    <item name="android:windowExitAnimation">@anim/slide_out_bottom</item>

</style>

6. 创建动画

在res/anim目录下创建两个动画文件slide_in_bottom.xml和slide_out_bottom.xml。

<!-- slide_in_bottom.xml -->

<translate xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromYDelta="100%p"

    android:toYDelta="0"

    android:duration="300"/>

<!-- slide_out_bottom.xml -->

<translate xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromYDelta="0"

    android:toYDelta="100%p"

    android:duration="300"/>

这样，你就创建了一个具有自定义布局、自定义按钮样式、自定义背景和动画的AlertDialog。这个对话框在显示和隐藏时会有从底部滑入和滑出的动画效果，按钮也有按下时的背景变化，整体看起来更加美观和用户友好。