android AlertDialog自定义对话框界面的实现

AlertDialog只是一个很简单的对话框，用法上也没什么难的，但实际当中系统提供的样式应该是远远不够用的，所以我们需要自定义对话框的样式，那天在用支付宝的时候突然弹出了以下的一个领取红包的对话框：

于是想着模仿这个界面弄一个类似的对话框页面，搞了许久，可算弄好了，实现出的效果如下：

由于样式图实在难找到一模一样的，只能网上找一个了，不过原理肯定是一样的

一开始从书上学习的时候也就知道有这么个AlertDialog，但是以前确实没弄过，心里想着应该是可以自定义样式的，但是开始弄的时候对话框大小和图片样式始终对不上，结果就是这个图片外围还有一圈白色的背景，非常难看，后续调好之后，叉叉这个图标又令我纠结了，莫名其妙的就不见了，看了下别人实现的类似效果，结果只需要在叉叉的父布局上再加一个布局，结果就变得很美好了，下面把相关的代码贴上：

首先是自定义的布局文件activity_main：

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

    <RelativeLayout
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/close_view"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/delete_white" />

        <FrameLayout
            android:id="@+id/money_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="40dp"
            android:layout_centerInParent="true">

            <ImageView
                android:layout_width="280dp"
                android:layout_height="320dp"
                android:background="@drawable/money_2"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/button_selector_2"
                android:layout_gravity="center_horizontal|bottom"
                android:textColor="#ED1518"
                android:textSize="20dp"
                android:textStyle="bold"
                android:text="   点击领取 >   "
                android:layout_marginBottom="42dp"/>

            <Button
                android:layout_gravity="bottom|center_horizontal"
                android:layout_marginBottom="47dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/button_selector"
                android:textColor="#ED1518"
                android:textSize="20dp"
                android:textStyle="bold"
                android:text="   点击领取 >   "/>
        </FrameLayout>

    </RelativeLayout>

</RelativeLayout>

一定要记得在叉叉的父布局外再套一个父布局，不然实现的时候叉叉莫名其妙的不知道跑哪去了

接下来是DialogActivity，代码如下：

import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class DialogActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_blank);
        Button button = findViewById(R.id.button_view);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AlertDialog.Builder builder = new AlertDialog.Builder(DialogActivity.this,R.style.AlertDialog);
                View view = View.inflate(getApplication(),R.layout.activity_main,null);
                builder.setView(view);
                builder.setCancelable(false);
                final AlertDialog dialog = builder.create();
                dialog.show();
                ImageView close = view.findViewById(R.id.close_view);
                close.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        dialog.dismiss();
                    }
                });
            }
        });
    }
}

启动页面的布局就不放了，这个随便弄，我这边是放了一个按钮，然后点击可以弹出对话框的页面

还有一个很重要的东西，就是对话框的主题，样式和对话框大小怎么实现完美贴合就是靠的这个文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AlertDialog" parent="android:style/Theme.Dialog">
        <item name="android:background">@android:color/transparent</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

活动当中的R.style.AlertDialog就是引用了这个主题

另外还有些需要注意的就是图中的按钮了，这里其实放了两个按钮，然后设置离底部不同距离从而看出来有一种立体按钮的效果，上面的那个按钮还设置了渐变色，不太理解的可以自己找找相关的知识看看

android AlertDialog自定义对话框界面的实现

猜你喜欢