IOS開發之顯示微博表情

標籤：dict   case   tostring   開發   elf   get   sel   instr   attribute   

　要用到的知識：IOS開發中的資源檔.plist, 可變的屬性字串，TextView和Regex的使用。

　　解決的整體思路：把源字串同過正則匹配擷取到每個表情的range, 再通過range擷取元字串中的表情字串，如[哈哈]， 在把[哈哈] 和我們.plist中item下的chs欄位匹配，然後擷取對應的圖片名，擷取圖片後把圖片轉換成可變字串的附件，然後做一個替換即可。先這麼大致一說，下面會詳細的講解一下。

　　1.要想在我們手機上顯示網路請求的表情，首先我們本地得有相應的資源檔，在.plist檔案中又我們想要的東西，其中儲存的東西如下所示，整個root是一個數組，數組中的item是一個字典，字典中存放的時文字到圖片名的一個映射，當然啦，圖片名和我們本地資源的圖片名相同。如下

　　2.如何從.plist檔案中擷取資料呢？先通過bundle擷取資源檔的路徑，在通過檔案路徑建立數組，數組中儲存的資料就是檔案中的內容代碼如下：

    //載入plist檔案中的資料    NSBundle *bundle = [NSBundle mainBundle];    //尋找資源的路徑    NSString *path = [bundle pathForResource:@"emoticons" ofType:@"plist"];    //擷取plist中的資料    NSArray *face = [[NSArray alloc] initWithContentsOfFile:path];

 

　　3.產生我們的測試字串，最後一個不是任何錶情，不做替換。

    //我們要顯示的字串（類比網路請求的字串格式）    NSString *str = @"我[圍觀]你[威武]你[嘻嘻]我[愛你]你[兔子]我[酷]你[帥]我[思考]你[錢][123456]";

 

　　4.把上面的str轉換為可變的屬性字串，因為我們要用可變的屬性字串在TextView上顯示我們的表情圖片，轉碼如下：

   //建立一個可變的屬性字串    NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc] initWithString:str];

 

　　5.進行正則匹配，擷取每個表情在字串中的範圍，下面的Regex會匹配[/*],所以[123567]也會被匹配上，下面我們會做相應的處理

  //正則匹配要替換的文字的範圍    //Regex    NSString * pattern = @"\\[[a-zA-Z0-9\\u4e00-\\u9fa5]+\\]";    NSError *error = nil;    NSRegularExpression * re = [NSRegularExpression regularExpressionWithPattern:pattern options:NSRegularExpressionCaseInsensitive error:&error];        if (!re) {        NSLog(@"%@", [error localizedDescription]);    }        //通過Regex來匹配字串    NSArray *resultArray = [re matchesInString:str options:0 range:NSMakeRange(0, str.length)];

 

　　6.資料準備工作完成，下面開始遍曆資源檔找到文字對應的圖片，找到後把圖片名存入字典中，圖片在源字串中的位置也要存入到字典中，最後把字典存入可變數組中。代碼如下：

 1     //用來存放字典，字典中儲存的是圖片和圖片對應的位置 2     NSMutableArray *imageArray = [NSMutableArray arrayWithCapacity:resultArray.count]; 3      4     //根據匹配範圍來用圖片進行相應的替換 5     for(NSTextCheckingResult *match in resultArray) { 6         //擷取數組元素中得到range 7         NSRange range = [match range]; 8          9         //擷取原字串中對應的值10         NSString *subStr = [str substringWithRange:range];11         12         for (int i = 0; i < face.count; i ++)13         {14             if ([face[i][@"chs"] isEqualToString:subStr])15             {16                 17                 //face[i][@"gif"]就是我們要載入的圖片18                 //建立文字附件來存放我們的圖片19                 NSTextAttachment *textAttachment = [[NSTextAttachment alloc] init];20               21                 //給附件添加圖片22                 textAttachment.image = [UIImage imageNamed:face[i][@"png"]];23                 24                 //把附件轉換成可變字串，用於替換掉源字串中的表情文字25                 NSAttributedString *imageStr = [NSAttributedString attributedStringWithAttachment:textAttachment];26                 27                 //把圖片和圖片對應的位置存入字典中28                 NSMutableDictionary *imageDic = [NSMutableDictionary dictionaryWithCapacity:2];29                 [imageDic setObject:imageStr forKey:@"image"];30                 [imageDic setObject:[NSValue valueWithRange:range] forKey:@"range"];31                 32                 //把字典存入數組中33                 [imageArray addObject:imageDic];34                 35             }36         }37     }

 

　　7.轉換完成，我們需要對attributeString進行替換，替換的時候要從後往前替換，弱從前往後替換，會造成range和圖片要放的位置不匹配的問題。替換代碼如下：

1     //從後往前替換2     for (int i = imageArray.count -1; i >= 0; i--)3     {4         NSRange range;5         [imageArray[i][@"range"] getValue:&range];6         //進行替換7         [attributeString replaceCharactersInRange:range withAttributedString:imageArray[i][@"image"]];8         9     }

 

　　8.把替換好的可變屬性字串賦給TextView

1     //把替換後的值賦給我們的TextView2     self.myTextView.attributedText = attributeString;

 

　　9.替換前後效果如下：

IOS開發之顯示微博表情