1、FaceView组件的封装：FaceView即负责显示一个个的头像。在使用该组件时要传入要显示的图片和图片对应的文字（如【哈 哈】），当点击图片的时候，会通过block回调的形式把该图片的image以及图片文字返回到使用的组件中去，下面是关键代码：
FaceView.h中的代码如下（下面代码是定义啦相应的Block类型和对外的接口）：
#import //声明表情对应的block,用于把点击的表情的图片和图片信息传到上层视图
typedef void (^FaceBlock) (UIImage *image, NSString *imageText);
@interface FaceView : UIView
//图片对应的文字
@property (nonatomic, strong) NSString *imageText;
//表情图片
@property (nonatomic, strong) UIImage *headerImage;
//设置block回调
-(void)setFaceBlock:(FaceBlock)block;
//设置图片，文字
-(void)setImage:(UIImage *) image ImageText:(NSString *) text;
@end
FaceView.m中的代码如下
// FaceView.m
// MyKeyBoard
//
// Created by 青玉伏案 on 14-9-16.
// Copyright (c) 2014年 Mrli. All rights reserved.
//
#import "FaceView.h"
@interface FaceView ()
@property(strong, nonatomic) FaceBlock block;
@property (strong, nonatomic) UIImageView *imageView;
@end
@implementation FaceView
//初始化图片
- (id)initWithFrame:(CGRect)frame
{
//face的大小
frame.size.height = 30;
frame.size.width = 30;
self = [super initWithFrame:frame];
if (self) {
self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
[self addSubview:self.imageView];
}
return self;
}
-(void) setFaceBlock:(FaceBlock)block
{
self.block = block;
}
-(void) setImage:(UIImage *)image ImageText:(NSString *)text
{
//显示图片
[self.imageView setImage:image];
//把图片存储起来
self.headerImage = image;
self.imageText = text;
}
//点击时回调
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
//判断触摸的结束点是否在图片中
if (CGRectContainsPoint(self.bounds, point))
{
//回调,把该头像的信息传到相应的controller中
self.block(self.headerImage, self.imageText);
}
}
@end
代码说明：
主要就是block回调的使用，就是封装了一个自定义的button
2、FunctionView组件的封装，FunctionView就是使用FaceView组件和ScrollView组件把表情加载进来，在实例化FunctionView组件时，我们用到了自动布局来设置ScrollView和下面的Button.
FunctionView.h的代码如下,在.h中留有组件的接口和回调用的Block, plistFileName用于加载我们的资源文件时使用。
