你的位置:首页 > 操作系统

[操作系统]iOS IM开发建议(二)计算TableViewCell的高度:图文混排


  计算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。。。