欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-22 23:01:34
...

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

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

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

android 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就是引用了这个主题

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