iOS IM開發建議(二)計算TableViewCell的高度:圖文混排,iostableviewcell
計算Cell高度一直是一個很熱的問題,在IM app大量湧現之後,這問題就更加頻繁了。我這裡說一下計算NSAttributedString高度的方法,純程式碼。
首先,普通的文本sizetofit 就好了,所以不存在難度。那麼圖文混排呢?一般人會說用CoreText,不過你用了就知道了,誰用誰傻。iOS7 開始Apple提供了TextKit來處理圖文混排。這個的方法比較簡單,而且直觀。
TextKit實現圖文混排
我先貼一下code,然後慢慢解釋一下。
第一步,拼接string
1 /*! 2 * 插入表情 3 * 4 * @param rangeArray 所要插入表情的位置 每個元素包括(loc) 5 * @param facesArray 要插入的表情的資訊 每個model包括(id imageName) 6 * @param pStr 原始的字串 7 * @param sourceArray 表情包 8 * 9 * @return 拼接好的字串10 */11 + (NSMutableAttributedString *)setupEmojiByRangeArray:(NSArray *)rangeArray facesArray:(NSArray *)facesArray plainStr:(NSAttributedString *)pStr sourceArray:(NSArray *)sourceArray {12 NSMutableAttributedString * mutStr = [pStr mutableCopy];13 __block int offset = 0;//每次加過一個表情後 字串會變長 這個變數會記錄已經增加的長度,不然插入的位置會錯位的14 if(rangeArray.count == facesArray.count) { // 看看要插入的位置的數量 是不是和要插入的表情數量一致15 [facesArray enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {// 數組的枚舉16 for(FaceModel * fm in sourceArray){// 這個在不在表情包裡面17 if(fm.id == [obj[@"ID"]intValue]) {
18 UIImage * image1 = [UIImage imageNamed:fm.imageName];19 NSTextAttachment * attachment1 = [[NSTextAttachment alloc] init];//這就是要插入的對象20 attachment1.bounds = CGRectMake(0, -3, 20, 20);// 插入的表情的大小21 attachment1.image = image1;22 NSAttributedString * attachStr1 = [NSAttributedString attributedStringWithAttachment:attachment1];// 把要插入的對象轉為string23 NSDictionary * dic = [rangeArray objectAtIndex:idx];// 看看插入哪個位置24 [mutStr insertAttributedString:attachStr1 atIndex:offset+[dic[@"loc"]intValue]];25 offset += (int)attachStr1.length;// 插入結束要計算一下位移量26 }27 }28 }];29 }30 // //添加連結31 // NSURL * url = [NSURL URLWithString:@"http://www.baidu.com"];32 // [mutStr addAttribute:NSLinkAttributeName value:url range:NSMakeRange(loc, length)];33 // mainText.attributedText = [mutStr copy];34 35 return mutts;// 返回處理好的字串36 }
仔細看一下上面的代碼,我做了表情的插入。這個是IM的必要需求了。通過NSTextAttachment的使用,我們可以插入表情的image了。因為我這個是批量處理,所以我插入規格一致的表情。同理,我們可以插入一張圖片。。。對,就是圖片,這就圖文混排了。
第二步,計算NSMutableAttributedString的Rect
1 // 字型大小 2 UIFont *font =[UIFont systemFontOfSize:14];
3 // 段落設定 4 NSMutableParagraphStyle *p = [[NSMutableParagraphStyle alloc]init]; 5 p.lineBreakMode = NSLineBreakByCharWrapping; 6 p.lineSpacing = 0.1f; 7 p.paragraphSpacing = 0.1f; 8 p.alignment = NSTextAlignmentLeft; 9 // 設定NSAttributedString 的樣式10 NSAttributedString * str = [[NSAttributedString alloc]initWithString:rString attributes:@{NSFontAttributeName:font,NSParagraphStyleAttributeName:p}];11 // 計算Rect12 // w代表你想要的寬度 h代表你的字串最大支援的高度13 CGRect rect = [sstr boundingRectWithSize:CGSizeMake(w,h) options:NSStringDrawingUsesFontLeading|NSStringDrawingUsesLineFragmentOrigin context:nil];
依靠計算出來的rect 我們就知道要怎麼設定cell的高度了:這個string放到一個textView裡面,textvView放到cell上。一切OK。。。