ios开发 UI高级 自定义表情键盘

ViewController.h

ViewController.m

#import "ViewController.h"

// 宏定义
#define kScreenWidth [UIScreen mainScreen].bounds.size.width
#define kScreenHeight [UIScreen mainScreen].bounds.size.height
@interface ViewController ()
@property(nonatomic,strong)FaceFannel *facePannel;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self createViews];
    [self showFacePannel];
    
}

-(void)createViews{
    
    _textView = [[UITextView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight -50)];
    _textView.backgroundColor = [UIColor orangeColor];
    _textView.font = [UIFont systemFontOfSize:15.0];
    [_textView becomeFirstResponder];
    [self.view addSubview:_textView];
    
    //编辑栏
    _editorView = [[UIView alloc] initWithFrame:CGRectMake(0, _textView.bottom, kScreenWidth, 50)];
    _editorView.backgroundColor = [UIColor cyanColor];
    _editorView.alpha = 0.68;
    [self.view addSubview:_editorView];

}

//显示表情
- (void)showFacePannel{
    [_textView resignFirstResponder];
    
    if (_facePannel == nil) {
        _facePannel = [[FaceFannel alloc] initWithFrame:CGRectMake(0, kScreenHeight, 0, 0)];
        [self.view addSubview:_facePannel];
    }
    [UIView animateWithDuration:.35 animations:^{
        
        _facePannel.transform = CGAffineTransformMakeTranslation(0, -_facePannel.height);
        _editorView.bottom = _facePannel.top;
        
        _textView.height = kScreenHeight - _editorView.height- _facePannel.height;
        
    }];
}

FaceView.h

#import <UIKit/UIKit.h>
#import "UIViewExt.h"

// 宏定义
#define kScreenWidth [UIScreen mainScreen].bounds.size.width
#define kScreenHeight [UIScreen mainScreen].bounds.size.height
#define imgSize 30
#define itemSize (kScreenWidth/7)

@interface FaceView : UIView

// 表情小数组
@property(nonatomic,strong)NSMutableArray *items ;
// 选中图片
@property(nonatomic,strong)UIImageView *selectImgView;
// 选中的表情名
@property(nonatomic,strong)NSString *selectImgName;
@property(nonatomic,strong)NSString *text;

FaceView.m

#import "FaceView.h"

@implementation FaceView

// 复写初始化方法
-(instancetype)initWithFrame:(CGRect)frame{
    
    if ([super initWithFrame:frame]) {
        [self loadPlist];
    }
    return self;
}

//整理表情
- (void)loadPlist{
    //获取plist
    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"emoticons.plist" ofType:nil];
    //所有表情的数组
    NSArray *array = [NSArray arrayWithContentsOfFile:filePath];
    //装小数组
    _items = [NSMutableArray array];
    NSMutableArray *item2D = nil;
    for (int i= 0; i<array.count; i++) {
        //创建小数组
        if (item2D == nil|| item2D.count==28) {
            
            item2D = [NSMutableArray array];
            [_items addObject:item2D];
        }
        NSDictionary *faceDic = [array objectAtIndex:i];
        [item2D addObject:faceDic];
        
    }
    
    //内部写死宽高
    self.width = kScreenWidth *_items.count;
    self.height = 4*itemSize;
    
}

// 画表情
- (void)drawRect:(CGRect)rect {
    //确定行和列
    CGFloat row = 0;
    CGFloat culom = 0;
    //那表情
    for (int i=0; i<_items.count; i++) {
        
        NSMutableArray *item2D = _items[i];
        
        for (int j = 0; j<item2D.count; j++) {
            
            NSDictionary *dic = item2D[j];
            //图片的名字
            NSString *imgName = [dic objectForKey:@"png"];
            UIImage *img = [UIImage imageNamed:imgName];
            
            CGFloat x = culom *itemSize + (itemSize-imgSize)/2 + kScreenWidth*i;
            CGFloat y = row *itemSize +(itemSize-imgSize)/2;
            //绘制
            [img drawInRect:CGRectMake(x, y, imgSize, imgSize)];
            //更新行和列
            culom++;//0-6
            if (culom==7) {
                culom = 0;
                row++;
            }
            if (row==4) {//0-3
                row=0;
            }
        }
        
    }
    
    
}

#pragma mark - 触摸事件
// 开始触摸
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    self.selectImgView.hidden = NO;
    // 避免滑动冲突
    if ([self.superview isKindOfClass:[UIScrollView class]]) {
        UIScrollView *scroll = (UIScrollView *) self.superview;
        scroll.scrollEnabled = NO;
    }
    // 获取触摸点位置
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    
    [self touchFace:point];
}
// 移动触摸
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //获取触摸点的位置
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    [self touchFace:point];
}
// 触摸结束
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    // 隐藏选中图片
    self.selectImgView.hidden = YES;
    if ([self.superview isKindOfClass:[UIScrollView class]]) {
        UIScrollView *scroll = (UIScrollView *) self.superview;
        scroll.scrollEnabled = YES;
        
    }
    // 显示表情名
    self.selectImgName = self.text;
}

//寻找点击的表情
- (void)touchFace:(CGPoint)point{
    //1.当前页
    NSInteger page = point.x/kScreenWidth;
    //容错处理(手指点出表情外)
    if (page>=_items.count || page < 0) {
        return;
    }
    //确定小数组的索引
    /**
     CGFloat x = culom *itemSize + (itemSize-imgSize)/2 + kScreenWidth*i;
     CGFloat y = row *itemSize +(itemSize-imgSize)/2;
     */
    NSInteger culom = (point.x - ((itemSize-imgSize)/2 + kScreenWidth*page))/itemSize;
    NSInteger row = (point.y - (itemSize-imgSize)/2)/itemSize;
    //容错处理
    if (culom >6) culom =6;
    if (culom <0) culom =0;
    if (row >3) row =3;
    if (row <0) row =0;
    
    NSInteger index = row*7+culom;
    //处理最后一页数组越界
    if (page == _items.count-1) {
        NSArray *item2D = _items[page];
        
        if (index>item2D.count-1) {
            return;
        }
    }
    NSArray *item2D = _items[page];
    NSDictionary *faceDic = item2D[index];
    
    NSString *imgName = faceDic[@"png"];
    NSString *faceName = faceDic[@"chs"];
    
    if (![self.selectImgName isEqualToString:faceName]) {
        //确定放大镜的位置
        CGFloat bottom = row *itemSize +itemSize/2;
        CGFloat x = culom *itemSize + itemSize/2 + page *kScreenWidth;
        self.selectImgView.center = CGPointMake(x, 0);
        self.selectImgView.bottom = bottom;
        //赋值
        UIImageView *imgView =[self.selectImgView viewWithTag:1100];
        imgView.image = [UIImage imageNamed:imgName];
        
        self.text = faceName;
    }
    
}

- (UIImageView *)selectImgView{
    if (_selectImgView == nil) {
        
        _selectImgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"emoticon_keyboard_magnifier.png"]];
        [_selectImgView sizeToFit];
        [self addSubview:_selectImgView];
        
        UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake((_selectImgView.width-imgSize)/2, 15, imgSize, imgSize)];
        imgView.tag = 1100;
        [_selectImgView addSubview:imgView];
        
    }
    
    return _selectImgView;
    
}

FaceFannel.h

#import <UIKit/UIKit.h>
#import "FaceView.h"

@interface FaceFannel : UIView<UIScrollViewDelegate>

@end

FaceFannel.m

#import "FaceFannel.h"

@implementation FaceFannel

// 初始化
-(instancetype)initWithFrame:(CGRect)frame{
    
    if ([super initWithFrame:frame]) {
        [self createSubView];
    }
    return self;
}

// 创建子视图
- (void)createSubView{
    //初始化faceView
    FaceView *faceView = [[FaceView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
    faceView.backgroundColor = [UIColor clearColor];
    faceView.tag = 6666;
    // 初始化滑动视图
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, faceView.height)];
    scrollView.contentSize = CGSizeMake(faceView.width, faceView.height);
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.showsVerticalScrollIndicator = NO;
    scrollView.clipsToBounds = NO;
    scrollView.pagingEnabled = YES;
    scrollView.delegate = self;
    [scrollView addSubview:faceView];
    [self addSubview:scrollView];
    
    // 初始化分页控件
    UIPageControl *pageC = [[UIPageControl alloc] initWithFrame:CGRectMake(0, faceView.bottom, kScreenWidth, 20)];
    pageC.numberOfPages = faceView.items.count;
    pageC.tag = 2016;
    self.width = kScreenWidth;
    self.height = faceView.height + pageC.height;
    
    [self addSubview:pageC];
    
}

#pragma mark - UIScrollView的代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    NSInteger index = scrollView.contentOffset.x/kScreenWidth;
    
    UIPageControl *pageC = (UIPageControl *) [self viewWithTag:2016];
    
    pageC.currentPage = index;
    
}

// 复写drawRect方法
- (void)drawRect:(CGRect)rect {
    UIImage *img = [UIImage imageNamed:@"emoticon_keyboard_background.png"];
    [img drawInRect:rect];
}

运行结果图：