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

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


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



第一次看到原生的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下吧,谢谢各位观众。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值