高仿几个当前流行的Dialog样式

牛牛佳俊 · · 216 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

最近研究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就能解决。

  1. 创建布局文件,再创建一个类继承DialogFragment,在onCreateView中返回对应的View。
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.lib_gift_app_dialog, container);
    }
  1. 布局文件中加入ImageView和Button就行了。

版本更新

这个是仿的网易云音乐的版本更新。

主要讲View部分吧:




Dialog的View可以分成三部分:

  1. 上部的ImageView显示头部的View,透明的地方是这个图留了透明,Dialog的圆角则是图片在对应的部分做了圆角处理。
  2. 中间的信息部分是一个垂直的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>
  1. 最下方也是一个垂直的LinearLayout,并没有设置背景,所以是透明的。里面有一个View加一个ImageView就可以了。

申请权限

这个则是仿的FaceU激萌的权限申请弹窗。也主要讲布局吧:


从图中可以看出这个Dialog头部的图片是矩形的,但是最终的显示效果却是圆角矩形,这是在代码中对图片进行了处理,将图片切割为了上面两个角为圆角,下面两个为直角的不规则形状,所用的控件也是继承ImageView的自定义View。

具体来说就是

  1. 先用canvas绘制一个圆角矩形



  2. 再在这个圆角矩形的下方用canvas绘制一个直角矩形,盖住圆角矩形的圆角,形成一个上部圆角,下部直角的矩形。



  3. 之后再利用
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

这行代码将设置图像混合的模式为SRC_IN,就是用前面绘制的形状切割下面的图像。

  1. 然后再用canvas绘制图片的bitmap。



最后图片就会被切割成我们想要的形状了。


而头部下面就是一个垂直的LinearLayout了,和上面的版本更新Dialog一样也是设置了背景为白色,下面两个角为圆角。这样就将整个Dialog设置为了圆角矩形。

结尾

其实这篇文章主要也是分析了不同Dialog样式的View的组成吧,干货可能不多。最后贴上源码:
https://github.com/xiaoniu/SomeDialogStyle
源码中还有别的东西,不过比较简单就不去说了。

本文来自:简书

感谢作者:牛牛佳俊

查看原文:高仿几个当前流行的Dialog样式

216 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet