微信用来输入 gif 表情的那个键盘是怎么实现的?有人了解么?

2014-12-26 20:24:58 +08:00
 jox
我从github上下载了weico用的表情键盘,他们的做法是采用了collection view,显示键盘的时候读取每个图片,说实话我不太想用这种方法来实现,觉得有点麻烦,而且性能上也不太行,总感觉collection view比table view性能上要差一些,不太想用。百度贴吧和微信是怎么实现的不清楚,感觉微信的表情键盘用起来更顺畅,而且用户还可以定制,做得挺好的。

我现在能想到的办法是将默认的表情分组排列到几张图片里,弄成一个矩阵,在滚动的时候不是一个表情一个表情地读取,而是整张整张地读取优化过的图片,这样CPU主要负责从硬盘读取图片就可以了,如果内存够的话可以直接使用解码过的图片,性能上肯定是比使用collection view一个一个地读取然后再贴上去快一些,实现起来也很容易,使用scroll view分页就能搞定,通过用户touch的位置在矩阵的哪个部分来判断是哪个表情被用户选中,但是要花时间在图片编辑上,我用的还是GIMP 😱

不知道大家还有没有更好的想法?
8427 次点击
所在节点    iDev
39 条回复
jox
2014-12-26 20:26:35 +08:00
百度贴吧的输入表情键盘在滚动的时候会有比较明显的卡顿,貌似是在主线程做的渲染,晕,还是微信的做得好。
chmlai
2014-12-26 20:33:35 +08:00
collection view 没啥问题, 有性能问题应该做Profile.
jox
2014-12-26 20:40:26 +08:00
@chmlai 我下载了weico,性能上感觉还行,与微信的表情键盘比起来差不多一样顺畅,我很好奇微信是怎么实现的,这位朋友了解吗?
Elethom
2014-12-26 20:44:30 +08:00
越獄之後上工具分析一下就知道了.
jox
2014-12-26 20:52:20 +08:00
@Elethom 什么工具?我开始做iOS上的开发没多久,目前工具只会用xcode和instruments,什么工具能满足我的需要?
OctWu
2014-12-26 21:32:25 +08:00
@jox reveal?好像是这么拼。可以看图层结构的
jox
2014-12-26 21:39:23 +08:00
@OctWu 就是这个!我在网上检索了一下,非常感谢!
yellowV2ex
2014-12-26 22:06:04 +08:00
你collection view的cell你也可以自己写度缓存啊,并且collection view的cell会自动重用,最省事官方最推荐的一大堆格子scroll的方式就是collection了,ios6之后都支持。

再说,collection view只是读个静态小图,ios的性能轻松应付没问题的,你想的太多了。
jox
2014-12-26 22:19:03 +08:00
@yellowV2ex 刚刚研究了一下微信,微信似乎也是用的collection view,额,我之前用过一段时间collection view,因为觉得不如table view流畅又换回了table view,所以对collection view的印象不太好。


你觉得使用几张固定尺寸的扁平的图片来排列表情这个方法怎么样呢?比如微信的兔斯基表情,微信是每个表情有一个gif文件,同时还有一个对应静态的png文件,里面是gif的第一帧,用户在输入兔斯基表情之前展示的表情列表是使用png文件组合出来的,表情发出去之后是用gif文件渲染的,列表的尺寸是固定的,所以这个也可以使用一张静态图片来实现,使用collection view就是用多个小图片来组合列表,然后通过collection view的delegate方法来捕获点击事件,使用静态图片的话就要使用gesture recognizer然后在捕获touch事件之后通过判断touch的位置来确定选择哪个表情。这样就不用写代码来一张一张地读取小图片然后组合列表了,但是需要使用图片剪辑软件来生成静态的列表。
yellowV2ex
2014-12-26 22:38:30 +08:00
@jox 你是不是想错了

选表情的那个列表,肯定是静态图啊,并且还是很小的静态图,对应的并不是一个真的gif文件,只是一行网址的字符串,发过去给对方的也是一条特殊信息比如 gif|http://xxx.com/xxx.gif 而已。
至于显示gif部分,是收到这条信息,上面消息列表的tableview的cell干的事情。
yellowV2ex
2014-12-26 22:39:54 +08:00
@jox 真不知道你在纠结什么,一共就几十个小图,你考虑这个资源占用不如花时间想想消息储存和显示的结构啊
dcty
2014-12-26 22:46:00 +08:00
直接用单例的淡定路过。因为表情少,只有四页。
性能瓶颈不在这里,把优化留给cell的富文本展示去吧。
yellowV2ex
2014-12-26 22:47:56 +08:00
另外,微信不一定是collection view,因为支持ios5,ios5是不支持collection view的,也可能是判断了ios6使用了collection view
jox
2014-12-26 22:50:17 +08:00
@yellowV2ex 不止几十个啊。而且我也没说列表是用动态图组成的啊,只是说发出去之后渲染用的是gif,发出去之后发送者和接受者两边不都得显示动画啊?你从哪看出来我的意思是用gif来组合列表的?

我在考虑该用什么样的方式来实现,性能是一方面,实现方式的难易也是一方面,我没实现过类似的东西,考虑一下不行吗?
jox
2014-12-26 22:51:44 +08:00
@yellowV2ex 如果不用collection view,还可以用什么方法来实现呢?直接使用scroll view来模拟collection view吗?
yellowV2ex
2014-12-26 22:53:26 +08:00
@jox 你一屏不最多就几十个小图么?用collection view你放几万个都没问题啊,你到底在纠结个什么鬼啊。

collection view最简单,写几个delegate 方法和一个cell就搞定,占用资源也是最小的,也是自带系统优化的,cell也是重用的。
另外你说的那个方法不现实,后台如果修改一下顺序或者增加减少一个你全部页都要重新生成图片,并且得到的好处也不多,做起来也比collection view麻烦好几倍。
yellowV2ex
2014-12-26 22:54:33 +08:00
@jox collection view出现之前,一直是scroll view来模拟cell的,有些人也会用tableview,一个cell里横着放几个图这样,但前提都是有重用机制,不然滑来滑去容易闪退
xummer
2014-12-26 22:57:05 +08:00
微信自定义的MMUIScrollView继承的UIScrollView https://farm9.staticflickr.com/8681/16085385516_02b82fd1ae_o.png
xummer
2014-12-26 23:00:25 +08:00
ainopara
2014-12-26 23:05:53 +08:00
想向楼主打听一下weico的表情键盘是哪个repo?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/156975

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX