Android 详解自定义简洁大方的Dialog

在android开发中常常会出现用户手机系统版本不同,导致默认的弹窗样式也会不同;或者是系统弹窗跟UI设计的界面风格不搭的现象,这时候就需要我们自定义弹窗风格样式,才能做到弹窗统一,画风和谐效果。现在我们就来学习如何自定义Dialog弹窗。

先看看自定义Dialog的效果图:
在这里插入图片描述

如何实现简洁大方的Dialog?

1.新建一个dialog_layout.xml布局,如下图:
在这里插入图片描述

可以看到Button按钮的背景是白色的并带有圆角,这个效果可以让UI设计师提供背景图片,也可以用shape绘制。

1.1在drawable下新建bg_radius_top_white_8.xml文件绘制背景,比如拨打电话的背景:
在这里插入图片描述

1.2如果需要统一设置按钮的宽,高,颜色,字体,可以在styles.xml中设置,在dialog_layout.xml布局引用,如下图:

在这里插入图片描述

2.自定义Dialog样式,同样是在styles.xml中设置:
在这里插入图片描述

2.1在colors.xml中设置颜色:
在这里插入图片描述

3自定义Dialog的入场、出场动画
3.1新建资源文件夹命名为anim,并新建动画的xml文件:
在这里插入图片描述
在这里插入图片描述

3.2 弹窗进入时(从底部垂直进入,动画持续300毫秒),如下图

在这里插入图片描述

3.3 弹窗退出时的布局是dialog_exit.xml(从底部垂直退出到手机屏幕外,动画持续300毫秒)

3.4同样在styles.xml设置:

在这里插入图片描述

4.新建BottomUpDialog 继承Dialog,在构造方法中引入写好的自定义Dialog样式:R.style.bottom_dialog,如下图:

在这里插入图片描述

最后在MainActivity中调用一下,就能看到效果了
在这里插入图片描述

完整demo地址:https://github.com/yanhuomatou2015/CustomDialogDemo

今天的分享结束了,再见~

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值