一、關於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];
就會在屏幕上出現一個笑臉:
二、開發表情鍵盤的思路
首先為了實現跨平台,無論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;
}
三、切換系統鍵盤和自定義的表情鍵盤
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://linux.linuxidc.com/
用戶名與密碼都是www.linuxidc.com
具體下載目錄在 /2015年資料/12月/12日/iOS自定義的emoji表情鍵盤/
下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm
------------------------------------------分割線------------------------------------------