美文网首页androidAndroid开发经验谈Android开发
模仿android 7.x原生shortcut UI效果

模仿android 7.x原生shortcut UI效果

作者: _deadline | 来源:发表于2018-03-01 22:20 被阅读578次

    https://github.com/niniloveyou/ShortcutLayout (感觉不错的话,给star下)

    先来看个效果图,图片有点模糊,将就下 lAHPBbCc1XHXyx3NAyDNAZA_400_800.gif

    第一次看到原生的shortcut 动画的时候,就感觉很灵动,很喜欢,刚好项目中有类似的需要,所以就自己动手作了个类似的,效果还跟原生的有点差距。

    写这个效果,主要需要考虑以下几个问题:

    • 因为这是个可操作menu, 因此最好使用PopupWindow最为载体。

    • 使用什么父容器 ?是使用ViewGroup 还是使用ListView / RecyclerView ?首先考虑该效果的扩展性,仔细来看这种效果并不适合条目多的场景下,因为条目多了之后,这种效果动画时间长,用户第一次使用会感觉惊艳,时间长了用户就失去了新鲜感,并且条目多了之后UI效果也不好看,所以综合考虑之后还是选择直接使用LinearLayout作为父容器。

    • 展开搜索动画怎么实现?仔细观察动画,你会发现,动画是渐进执行的,每个条目的动画执行时间都不同, 这个其实也好做,自定义条目控件,根据数据源生成对应数量的控件条目,动态的添加到我们的LinearLayout中,然后因为是逐步展开的,所以我们for循环执行动画, 根据条目所在position给定不同的动画延时时间。

       public void expand(int itemAnimationTime, int itemAnimationGap){
            for (int i = 0; i < getChildCount(); i++) {
                if(getChildAt(i) instanceof ShortcutView){
                    ((ShortcutView) getChildAt(i)).expand(true, itemAnimationTime, (getChildCount() - i) * itemAnimationGap);
                }
            }
            isExpanded = true;
        }
    
    • 最后一点也是最麻烦的就是背景的问题,有的人说这还不简单弄个.9图片不就行了,但是如果你仔细观察效果,就知道没这么简单。
      1. 背景是有阴影的,同时也是有按压效果的
      2. 箭头的动画
        思虑再三之后决定写一个自定义的drawable, 自己用代码画背景.

    说了这么多,代码就不贴了,感兴趣的话github上看代码,如果对你有帮助star下吧,谢谢各位观众。

    相关文章

      网友评论

        本文标题:模仿android 7.x原生shortcut UI效果

        本文链接:https://www.haomeiwen.com/subject/mocwxftx.html