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图片不就行了,但是如果你仔细观察效果,就知道没这么简单。
- 背景是有阴影的,同时也是有按压效果的
- 箭头的动画
思虑再三之后决定写一个自定义的drawable, 自己用代码画背景.
说了这么多,代码就不贴了,感兴趣的话github上看代码,如果对你有帮助star下吧,谢谢各位观众。
网友评论