iOS开发之自定义表情键盘(组件封装与自动布局)

下面的东西是编写自定义的表情键盘，话不多说，开门见山吧！下面主要用到的知识有MVC, iOS开发中的自动布局，自定义组件的封装与使用，Block回调，CoreData的使用。有的小伙伴可能会问写一个自定义表情键盘肿么这么麻烦？下面将会介绍我们如何用上面提到的东西来定义我们的表情键盘。下面的内容会比较多，这篇博文还是比较有料的。

　　还是那句话写技术博客是少不了代码的，下面会结合代码来回顾一下iOS的知识，本篇博文中用到的知识点在前面的博客中都能找到相应的内容，本篇算是一个小小的功能整合。先来张图看一下本app的目录结构。我是根据自己对MVC的理解来构建的目录结构，希望起到抛砖引玉的作用，有好的解决方案欢迎评论或者留言指出。Face文件中存放的时我们的表情图片，Model文件封装的是从sqlite中读取历史头像的组件，View文件中封装的时我们自定义的组件，也就是自定义键盘相关的视图，Controller负责将我们的各个组件组装到一起完成我们想要的功能。下面会一一介绍。

 

　　上面是文件的组织结构，下面为了更为直观的了解我们想要的效果，下面先看几张截图，来直观的感受一下运行效果，上面是竖屏的显示效果，下面是横屏的显示效果。因为在封装自定义键盘中用到了自动布局所以横屏显示或者在更大的屏幕上显示是没问题的，常用表情是用户用过的表情，然后存在Sqlite中，显示时并按时间降序排列。more是用来扩展功能用的接口。话不多说，来的代码才是实在的。

 

　　一.View(自定义视图)

　　　　View文件夹下存放的时我们自定义的视图组件，因为是自定义的组件所以storyboard我们就用不了啦，所有的代码都必须手写，这样才能保证组件使用的灵活性和减少各个组件之间的耦合性，更利于团队之间的合作。在封装组件时要预留好外界可能使用到的接口，和返回该返回的数据。好啦，废话少说，来点干货吧！

　　　　1、FaceView组件的封装：FaceView即负责显示一个个的头像。在使用该组件时要传入要显示的图片和图片对应的文字（如【哈哈】），当点击图片的时候，会通过block回调的形式把该图片的image以及图片文字返回到使用的组件中去，下面是关键代码：

　　　　　　FaceView.h中的代码如下（下面代码是定义啦相应的Block类型和对外的接口）：

View Code

　　　　　　FaceView.m中的代码如下

View Code

　　　　代码说明：

　　　　　　主要就是block回调的使用，就是封装了一个自定义的button,具体内容请参考之前的博客“IOS开发之自定义Button(集成三种回调模式)”

 

　　　　2、FunctionView组件的封装，FunctionView就是使用FaceView组件和ScrollView组件把表情加载进来，在实例化FunctionView组件时，我们用到了自动布局来设置ScrollView和下面的Button

　　　　　　FunctionView.h的代码如下,在.h中留有组件的接口和回调用的Block, plistFileName用于加载我们的资源文件时使用，至于如何使用plist文件，请参考之前的博客：IOS开发之显示微博表情

View Code

　　　　　　FunctionView.m中的代码如下，常用表情是在sqlite中获取的，而全部表情是通过plist文件的信息在Face文件中加载的：

View Code

　　　　　　代码说明：

　　　　　　　　1、主要是通过对资源文件或者对从数据库中查询的资源进行遍历然后添加到ScrollView中

　　　　　　　　2.为了适应不同的屏幕给相应的组件添加了约束

 

　　　　3.ToolView组件的封装： ToolView就是在主屏幕上下面的类似于TabBar的东西，当键盘出来的时候,ToolView会运动到键盘上面的位置。为了使用不同的屏幕，也需要用自动布局来实现。

　　　　　　ToolView.h的代码如下：预留组件接口和声明block类型

View Code

　　　　　　ToolView.m的代码实现：

View Code

　　　　　　代码说明：

　　　　　　　　主要是对block回调的应用和给相应的组件添加相应的约束

　　　　4.MoreView组件的封装代码就不往上贴啦，和上面的类似，下面是调用MoreView组件的运行效果，有兴趣的读者请自行编写,以上就是视图部分的代码了

　　　　　

　　二. Mode部分的内容：

　　　　1.先定义我们要使用的数据模型，数据模型如下，time是使用表情的时间，用于排序。

　　　　2.下面编写我们的ImageModelClass类，里面封装了我们操作数据要用的方法

　　　　　　ImageModelClass.h的代码如下，主要是预留的对外的接口：

View Code

　　　　　　ImageModelClass.m的代码如下，主要是用CoreData对sqlite的操作：

View Code

　　　　　　代码说明：

　　　　　　　　1.保存图片时先查找图片是否存在，如果存在则更新时间，如果不存在则插入数据（写到这感觉想在用Hibernate写东西）。

 

　　三.Controller部分，把上面的组件进行组装

　　　　1.MainViewController.m中的延展部分的代码如下：

View Code

　　　　2.在viewDidLoad中进行组件的初始化和实现组件的Block回调，代码如下

View Code

　　　　3.当横竖屏幕切换时设置自定义键盘的高度

View Code

　　　　4.当键盘出来的时候，改变toolView的位置，通过键盘的通知来实现。当横屏的时候键盘的坐标系和我们当前的Frame的坐标系不一样所以当横屏时得做一坐标系的转换，代码如下；

View Code

　　　　5.系统键盘和自定义键盘切换的代码如下：

View Code