iOS自定義的emoji表情鍵盤

iOS自定義的表情鍵盤

1、關於emoji表情

        隨着iOS系統版本的升級，對原生emoji表情的支持也愈來愈豐富。emoji表情是unicode碼中爲表情符號設計的一組編碼，固然，還有獨立於unicode的另外一套編碼SBUnicode，在OS系統中，這兩種編碼都有很好的支持。UI系統會自動幫咱們將編碼轉義成表情符號，例如用SBUnicode以下代碼：

  UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    label.font = [UIFont systemFontOfSize:25];
    label.text = @"\uE056";
    [self.view addSubview:label];

就會在屏幕上出現一個笑臉：

      

2、開發表情鍵盤的思路

        首先爲了實現跨平臺，不管iOS端，andorid端仍是web端，都要有一個相同的標準，這個標準就能夠是國際Unicode編碼，咱們的思路是將表情文字進行unicode編碼後再進行傳輸，所以，有兩中方式，一種是經過自定義一套表情切圖，將其與unicode碼一一對應，在轉碼的時候，咱們一一遍歷，轉換成unicode後進行傳輸，這樣的好處是咱們能夠保證全部平臺所能使用的表情統一。在iOS端，能夠有另外一種方式，經過上面咱們知道，經過SBUnicode碼咱們能夠在客戶端顯示錶情符號，而且這個碼的排列是十分有規律的，經過這個特色，咱們能夠經過遍歷SBUnicode碼的範圍進行表情的建立，省去的圖片素材的麻煩。

        iOS中可用的表情unicode範圍是：0xE001~0xE05A,0xE101~0xE15A,

0xE201~0xE253,0xE401~0xE44C,0xE501~0xE537。

        咱們能夠經過遍歷的方法，將其都加入數據源數組中：

int emojiRangeArray[10] = {0xE001,0xE05A,0xE101,0xE15A,0xE201,0xE253,0xE401,0xE44C,0xE501,0xE537};
    for (int j = 0 ; j<10 ; j+=2 ) {
        
        int startIndex = emojiRangeArray[j];
        int endIndex = emojiRangeArray[j+1];
        
        for (int i = startIndex ; i<= endIndex ; i++ ) {
        //添加到數據源數組
            [dataArray addObject:[NSString stringWithFormat:@"%C", (unichar)i]];
        }
    }

鍵盤的擺放，能夠經過collectionView來作，十分方便：

    //爲了擺放分頁控制器，建立一個背景view
    bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 200)];
    //分頁控制器
    pageControlBottom = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 170, [UIScreen mainScreen].bounds.size.width, 20)];
    [bgView addSubview:pageControlBottom];
    //collectionView佈局
    UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc]init];
    //水平佈局
    layout.scrollDirection=UICollectionViewScrollDirectionHorizontal;
    //設置每一個表情按鈕的大小爲30*30
    layout.itemSize=CGSizeMake(30, 30);
    //計算每一個分區的左右邊距
    float xOffset = (kscreenWidth-7*30-10*6)/2;
    //設置分區的內容偏移
    layout.sectionInset=UIEdgeInsetsMake(10, xOffset, 10, xOffset);
    scrollView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 160) collectionViewLayout:layout];
    //打開分頁效果
    scrollView.pagingEnabled = YES;
    //設置行列間距
    layout.minimumLineSpacing=10;
    layout.minimumInteritemSpacing=5;
    
    scrollView.delegate=self;
    scrollView.dataSource=self;
    scrollView.backgroundColor = bgView.backgroundColor;
    [bgView addSubview:scrollView];

在collectionView的回調方法中，處理以下：

//每頁28個表情
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    if (((dataArray.count/28)+(dataArray.count%28==0?0:1))!=section+1) {
         return 28;
    }else{
        return dataArray.count-28*((dataArray.count/28)+(dataArray.count%28==0?0:1)-1);
    }
   
}
//返回頁數
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return (dataArray.count/28)+(dataArray.count%28==0?0:1);
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"biaoqing" forIndexPath:indexPath];
    for (int i=cell.contentView.subviews.count; i>0; i--) {
        [cell.contentView.subviews[i-1] removeFromSuperview];
    }
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 30, 30)];
    label.font = [UIFont systemFontOfSize:25];
    label.text =dataArray[indexPath.row+indexPath.section*28] ;
   
    
    [cell.contentView addSubview:label];
    return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSString * str = dataArray[indexPath.section*28+indexPath.row];
    //這裏手動將表情符號添加到textField上
    
}
//翻頁後對分頁控制器進行更新
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat contenOffset = scrollView.contentOffset.x;
    int page = contenOffset/scrollView.frame.size.width+((int)contenOffset%(int)scrollView.frame.size.width==0?0:1);
    pageControlBottom.currentPage = page;

}

3、切換系統鍵盤和自定義的表情鍵盤

        UITextField和UITextView都會有下面這個屬性和方法：

@property (nullable, readwrite, strong) UIView *inputView;   
- (void)reloadInputViews;

inputView咱們能夠設置textView和textField成爲第一響應時的彈出附件，若是咱們不設置或者設置爲nil，則會彈出系統鍵盤，reloadInputView方法可使咱們刷新這個附件視圖，經過這兩個，咱們能夠很是輕鬆的實現鍵盤的切換，好比咱們在一個出發方法中以下處理：

-(void)imageViewTap{
    if (![_publishContent isFirstResponder]) {
        return;
    }
    if (isEmoji==NO) {
        isEmoji=YES;
        //呼出表情
        _textView.inputView=bgView;
        [_textView reloadInputViews];
    }else{
        isEmoji=NO;
        _textView.inputView=nil;
        [_textView reloadInputViews];
    }

    
}

效果以下：

 

           

追注：測試上面的SBUnicode碼在模擬器上能夠正常顯示，真機並不能識別，能夠經過將表情符所有添加到一個plist文件中，經過文件讀取來建立鍵盤的方式進行真機上的開發。plist文件地址以下：

http://pan.baidu.com/s/1o6AdkBw

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592