
最近研究GitHub上的一个版本升级库,就是这个AppUpdate。个人觉得这个库很不错,代码规范,其中也使用了很多流行的库,并且支持kotlin,研究这个库的源码对Android进阶有很大的帮助,在此也感谢作者WVector。不过这篇文章并不是对开源库进行探究,而是发现库中所用的Dialog很不错,想对此学习研究一下,自己又拓展了一些。
效果
第一步当然是展示最终效果啦,不喜欢的话就可以直接关掉网页了。
版本更新样式

申请权限样式

礼品活动样式

弹窗
下面正式开始。
平时的开发中除了我们会经常用到各种弹窗来与用户进行交互,最简单的就是这种:

只需要创建一个AlertDialog然后设置Title,Message,Button就可以了,这只能处理最简单的需求。大多数弹窗其实长这样:

来源:弹窗 | 学UI网—APP截图站_APP欣赏_APP图片
可以看到,Dialog的主要用途是给用户展示信息,比如美团和滴滴的,真的就是为了展示信息,这种弹窗就是一个图片+一个关闭的按钮。除了展示信息,Dialog还能给用户提供一些交互, 比如领红包,选择分享,开启某项权限之类的,其实这就是非全屏形式的Activity或者Fragment,也正因此,才有了DialogFragment这个类。
关于DialogFrament,可以看鸿洋大神这篇文章的介绍: Android 官方推荐 : DialogFragment 创建对话框
实现
前面说了这么多,接下来就开始实战。本文中所有的Dialog都是使用DialogFragment构建的,当然直接使用Dialog,然后setView也可以实现相同的效果,这就自己选择了。
礼品活动
由浅入深,这个是最简单的形式了,一个ImageView+一个Button就能解决。
- 创建布局文件,再创建一个类继承DialogFragment,在onCreateView中返回对应的View。
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.lib_gift_app_dialog, container);
}
- 布局文件中加入ImageView和Button就行了。
版本更新
这个是仿的网易云音乐的版本更新。
主要讲View部分吧:

Dialog的View可以分成三部分:
- 上部的ImageView显示头部的View,透明的地方是这个图留了透明,Dialog的圆角则是图片在对应的部分做了圆角处理。
- 中间的信息部分是一个垂直的LinearLayout,设置了背景为白色,底部的圆角也是在背景中设置的。
background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp"/>
<solid android:color="@android:color/white"/>
</shape>
- 最下方也是一个垂直的LinearLayout,并没有设置背景,所以是透明的。里面有一个View加一个ImageView就可以了。
申请权限
这个则是仿的FaceU激萌的权限申请弹窗。也主要讲布局吧:

从图中可以看出这个Dialog头部的图片是矩形的,但是最终的显示效果却是圆角矩形,这是在代码中对图片进行了处理,将图片切割为了上面两个角为圆角,下面两个为直角的不规则形状,所用的控件也是继承ImageView的自定义View。
具体来说就是
-
先用canvas绘制一个圆角矩形
-
再在这个圆角矩形的下方用canvas绘制一个直角矩形,盖住圆角矩形的圆角,形成一个上部圆角,下部直角的矩形。
- 之后再利用
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
这行代码将设置图像混合的模式为SRC_IN,就是用前面绘制的形状切割下面的图像。
-
然后再用canvas绘制图片的bitmap。
最后图片就会被切割成我们想要的形状了。

而头部下面就是一个垂直的LinearLayout了,和上面的版本更新Dialog一样也是设置了背景为白色,下面两个角为圆角。这样就将整个Dialog设置为了圆角矩形。
结尾
其实这篇文章主要也是分析了不同Dialog样式的View的组成吧,干货可能不多。最后贴上源码:
https://github.com/xiaoniu/SomeDialogStyle
源码中还有别的东西,不过比较简单就不去说了。
网友评论