目标:实现一个点击删除的Item
效果图如下:我知道作为研发肯定会吐槽这个删除的设计,但是我还是要上图,不然我们岂不是不明真相的吃瓜群众…
两个删除的按钮
点击减号出现垃圾桶
点击垃圾桶删除当前的item
出现垃圾桶,点击空白处回到初始状态显示减号
虽然这个交互个人不太赞同,但是并表示我们实现不了,PS产品还说了,不要支持滑动,都用点击来交互(我了啦个F*CK)
下面我们就一步步实现这view
实现方法有很多种,这个东西不是特别难,其中涉及到一些小的计算思路和实现思路给大家分享下;
你可以用布局上下层嵌套写到xml里面来实现,这是最简单的实现
你可以用LayoutInfater填充上下层view来组合出来这view,然后加动画
我们还可以自定义一个Layout提供设置姓名的方法,和删除的事件出去,剩下的动作在view内部完成
国家惯例,先看完成的效果图,
再来一个动态图吧,没GIF没真相;
-
从效果图分析,我们需要提供的属性有一下几种
实现思路;分析完需要的属性后,不要着急写代码,我们从效果图分析,下怎么写可以最方便的实现这个View;
很多人一看到上下两层的第一进入脑袋中的思路是不是
FrameLayout
但是如果要把上下层用代码实现,FrameLayout的params不如
RelativeLayout
好用,这里我选择了RL来实现这个小东西;
现在开始着手实现,自定义View继承RelativeLayout
在构造中获取我们分析的自定义属性
获取到属性后,用代码构造我们的上层View和下层View以及上层的文字控件
给构造出来的view暴漏事件给外部,方便界面中使用
-
确定View的比例以及尺寸然后构造上下层的View
-
添加底部icon的View
我们在构造中绘制了底部的颜色,现在只需要构造一个Image然后add到view中即可 添加上层View
我们观察下上层不是一个view,他是由一个上层布局,上层布局中有一个textview结合完成的;
到此为止我们已经实现了View的80%的工作了剩下的就是提供暴漏设置名字,和删除的事件,以及让我们的上层View动起来,
剩下的事情就比较简单了,我们提供一个属性动画让上层VIew沿着X轴运动,
这里需要注意的移动的距离以及textview的联动
为什么呢？是这样的,因为我们垃圾桶的显示比例和上层View的文字控件并不是一个宽度,我们的如果不处理TextView的联动,会出现什么问题????
没错,就是垃圾桶全部显示的时候,textview会被隐藏一部分,但是如果textview的坐标位置,和垃圾桶的宽度一致的话,在折叠状态textview太靠右边,巨丑无比……各位好好理解下,所以我们为什么一开始就提供了两个属性一个是上层icon的距离,文字的距离还有一个上层icon距离左边的距离,我们用着两个距离结合垃圾桶的距离计算出来,当垃圾桶全部展开的时候,上层icon正好完全隐藏,而且文字正好是全部展示的这个距离
说一千道一万,看代码直接,特别简单,我们拿到上层view的图片宽度,加上上层icon距离左边的距离就是这个间距
下面就是我们暴露出来的公开事件,
ok,剩下的就是点击的时候,我们需要让上层View和文字的View 联动就大功告成了
下面我们看下view的动画代码
到此这个view就分析完毕了,这里还有一个知识点给大家分享下,外面提供的设置文字内容和暴漏的事件的方法,如果直接调用是不会生效的,假如我们不在view内部处理一些东西的话,
大家都知道,我们findViewByID后直接获取view的宽高,是不是获取不到,都是0,
那是因为,但是我们要是写一个延时,5秒再获取宽高就能获取到了,所以我们难道要这样处理吗,那肯定不行啊,他自己处理完毕后会在一个生命周期中通知我们的,就是他会告诉activity,我OK了你可以来获取我的宽高了,想必大家都知道这个方法吧,
onWindowFocusChanged
就是他,这就是为什么我们提供的设置内容的方法,只是记录了外界提供的值,并没直接调用 textview.settext(),如果直接后面加上这一句会发生事情,大家肯定都知道的,
直接就crash了,textview是null,这块要注意下,于是我们改成这样的写法
好了最后一个坑也填平了,虽然这个view没有很炫酷的动画
,但是也没有很高深的源码分析,
不要感觉啥都没学到,这样的*网上多的去了,自己造的*,能填补一些知识忙点！
由于微信对于代码支持不是很友好，非常大段的完整代码我就不在这里粘贴了，想要源码的或者查看的去原作者博客浏览即可。