在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
今天的分享结束了,再见~
网友评论