iOS 动态表情控件视图的实现

2015-09-04 by 木易哥哥　

做一个表情控件视图实现的思路主要是，UIScrollView装上表情的自定义view，表情view对应配置的表情库显示。

写了3个对象，EmotionScrollView，EmotionView，emoticons.plist，相关的主要代码是：

EmotionScrollView.h

#import <UIKit/UIKit.h>

#import "EmotionView.h"

@interface EmotionScrollView : UIView<UIScrollViewDelegate>{

    UIScrollView     *scrollView;

    EmotionView      *emotionView;

    UIPageControl    *pageControl;

}

-(void)getSelectBlock:(SelectBlock)block;

-(void)deleteBtnPressBlock:(deleteBtnPress)block;

-(void)sendBtnPressBlock:(sendBtnPress)block;

@end

EmotionScrollView.m

#import "EmotionScrollView.h"

@implementation EmotionScrollView

-(id)initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];

    if (self) {

        [self initViews];

    }

    return self;

}

-(void)getSelectBlock:(SelectBlock)block{

    if (self != nil) {

        emotionView.block = block;

    }

}

-(void)deleteBtnPressBlock:(deleteBtnPress)block

{

    if (self != nil) {

        emotionView.deleteBtnPressBlock = block;

    }

}

-(void)sendBtnPressBlock:(sendBtnPress)block

{

    if (self != nil) {

        emotionView.sendBtnPressBlock = block;

    }

}

- (void)initViews{

    emotionView  = [[EmotionView alloc]initWithFrame:CGRectMake(0, 0, 320*4,253)];

    scrollView   = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 253)];

    //NSLog(@"emotionView.height:%f",emotionView.height);

    scrollView.backgroundColor = [UIColor whiteColor];

    scrollView.contentSize = CGSizeMake(emotionView.width, 0);

    scrollView.alwaysBounceVertical = NO;

    scrollView.pagingEnabled = YES;

    scrollView.showsHorizontalScrollIndicator = NO;

    scrollView.clipsToBounds = NO;

    scrollView.delegate = self;

    

    [scrollView addSubview:emotionView];

    [self addSubview:scrollView];

    pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(140, 220, 40, 20)];//

    pageControl.backgroundColor = [UIColor clearColor];

    pageControl.numberOfPages   = emotionView.pageNumber;

    pageControl.pageIndicatorTintColor = [UIColor grayColor];

    pageControl.currentPageIndicatorTintColor = [UIColor blackColor];

    pageControl.currentPage     = 0;

    [self addSubview:pageControl];

    

}

- (void)drawRect:(CGRect)rect {

    //[[UIImage imageNamed:@"emoticon_keyboard_background.png"]drawInRect:rect];

}

#pragma  mark  - UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)_scrollView{

    int pageNumber = _scrollView.contentOffset.x/SCREEN_WIDTH;

    pageControl.currentPage = pageNumber;

    

    

}

@end

EmotionView.h

#import <UIKit/UIKit.h>

#import "SvGifView.h"

typedef void(^SelectBlock)(NSString *emotionName);

typedef void(^deleteBtnPress)();

typedef void(^sendBtnPress)();

@interface EmotionView : UIView{

@private

    NSMutableArray *items;

    UIImageView    *magnifierView;

    

    SvGifView       *_gifView;

}

@property(nonatomic,copy)NSString     *selectedEmotion;

@property(nonatomic,assign)NSInteger  pageNumber;

@property(nonatomic,copy)SelectBlock  block;

@property(copy,nonatomic)deleteBtnPress deleteBtnPressBlock;

@property(copy,nonatomic)sendBtnPress sendBtnPressBlock;

@property(nonatomic,assign)float  width;

@property(nonatomic,assign)float  height;

@end

EmotionView.m

-(void)initData{

items = [[NSMutableArray alloc]init];

    

    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"emoticons" ofType:@"plist"]; //"emoticons.plist"是个数组

    NSArray *fileArray = [NSArray arrayWithContentsOfFile:filePath]; //目前这个fileArray有没有分类的104个表情，现在我们需要把它分类成上面注释中items的形式

    //NSLog(@"fileArray:%@",fileArray);

    //----------整理表情，整理成一个二维数组----------

    NSMutableArray *item2D = nil;

    for (int i=0; i < fileArray.count; i++) {

        NSDictionary *item = [fileArray objectAtIndex:i];

        if (i % 28 == 0) {

            item2D  = [NSMutableArray arrayWithCapacity:28];

            [items addObject:item2D];

        }

        [item2D addObject:item];

    }

    

    //----------设置尺寸---------------

    self.width  =  items.count *SCREEN_WIDTH;

    self.height =  4 * item_height;

}

//画图

- (void)drawRect:(CGRect)rect {

    int row = 0,colum = 0;  //定义行、列

    for (int i = 0; i < items.count; i++) {

        NSArray *items2D = [items objectAtIndex:i];

        for (int j = 0; j < items2D.count+1; j++) {

            CGRect   emotionFrame   = CGRectMake(colum*item_width + 15, row*item_height +15, 20, 20);

            

            //考虑页数，需要加上前面一页的宽度

            float x = (i*SCREEN_WIDTH) + emotionFrame.origin.x;

            emotionFrame.origin.x = x;

            

             if (j < items2D.count)//为了增加删除发送按钮

             {

                 NSDictionary *item = [items2D objectAtIndex:j];

                //[emotionImage drawInRect:emotionFrame];

                

                //load gif picture begin

                NSURL *fileUrl = [[NSBundle mainBundle] URLForResource:[item objectForKey:@"cht"] withExtension:@"gif"];

                _gifView = [[SvGifView alloc] initWithCenter:emotionFrame fileURL:fileUrl];

                //NSLog(@"fileUrl:%@",fileUrl);

                _gifView.backgroundColor = [UIColor clearColor];

                _gifView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;

                [self addSubview:_gifView];

                [_gifView startGif];

                //load gif picture end

                 

                 //更新列、行

                 colum ++;

                 if (colum % 7 == 0) {

                     row ++;

                     colum = 0;

                 }

                 if (row % 4 == 0) {

                     row = 0;

                 }

            }

             else{

                 //删除按钮

                 UIButton *deleteButton = [[UIButton alloc] initWithFrame:CGRectMake(emotionFrame.origin.x+item_width*5-10, emotionFrame.origin.y+item_height*4-5, 40, 29)];

                 [deleteButton setImage:[UIImage imageNamed:@"faceDelete"] forState:0];

                 [deleteButton addTarget:self action:@selector(deleteButtonPress:) forControlEvents:UIControlEventTouchUpInside];

                 [self addSubview:deleteButton];

                 

                 //发送按钮

                 UIButton *sendButton = [[UIButton alloc] initWithFrame:CGRectMake(emotionFrame.origin.x+item_width*6-5, emotionFrame.origin.y+item_height*4, 30, 20)];

                 [sendButton setBackgroundImage:[UIImage imageNamed:@"blueLongBtn"] forState:0];

                 sendButton.titleLabel.font = [UIFont systemFontOfSize:13];

                 [sendButton setTitle:@"发送" forState:0];

                 [sendButton addTarget:self action:@selector(sendButtonPress:) forControlEvents:UIControlEventTouchUpInside];

                 [self addSubview:sendButton];

                 

             }

            

            

        }

        

    }

}

- (void)deleteButtonPress:(id)sender

{

    if (self.deleteBtnPressBlock != nil) {

        self.deleteBtnPressBlock();

    }

}

- (void)sendButtonPress:(id)sender

{

    if (self.sendBtnPressBlock != nil) {

        self.sendBtnPressBlock();

    }

}

emoticons.plist的配置如图

最后调试效果如图