图文混排 -之- 图片垂直对齐(垂直居中)

需求:

• 昵称(文字)+身份(渐变背景色+文字)

  
  
  

  UI设计师给的效果图

managerPic.png

开发思路

• 法1 - 昵称label + 身份label
  实现难度低, 内心有木有一丝不屑呢哈哈... 换个对得起自己的方式吧, 图文混排呗~
• 法2 - ①文字nickName <--> append <--> ②图片managerPic

实现 法2

1 - 身份图片生成 - 图片上绘文字(水印)

image.png

// 贴代码
// 图文 合成
+ (UIImage *)imageWithText:(NSString *)text
textFont:(UIFont *)font
textColor:(UIColor *)textColor
textFrame:(CGRect)textFrame
originImage:(UIImage *)image
imageLocationViewFrame:(CGRect)viewFrame {
    
    if (!text)      {  return image;   }
    if (!textColor) {  textColor = [UIColor blackColor];   }
    if (!image)     {  return nil;  }
    if (viewFrame.size.height==0 || viewFrame.size.width==0 || textFrame.size.width==0 || textFrame.size.height==0 )
    {  return nil; }
    // 用UIGraphics进行2D图像渲染 不要用UIGraphicsBeginImageContext(size); 不然图片会模糊
    UIGraphicsBeginImageContextWithOptions(viewFrame.size, NO, 0.0);
    [image drawInRect:viewFrame];
    CGContextRef context= UIGraphicsGetCurrentContext();
    CGContextDrawPath (context, kCGPathStroke );
    
    NSDictionary *attr = @{NSFontAttributeName: font, NSForegroundColorAttributeName : textColor };
    //位置显示
    [text drawInRect:textFrame withAttributes:attr];
    
    UIImage *aimg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return aimg;
    
}

2 - 文字 拼接 图片

image.png

// 文字__昵称
NSMutableAttributedString * mutAttStr_nickName = [[NSMutableAttributedString alloc]initWithString:[message.senderDisplayName stringByAppendingString:@" "]];    // 空格 隔开

[mutAttStr_nickName addAttribute:NSFontAttributeName
                           value:(14)
                           range:NSMakeRange(0, message.senderDisplayName.length)];

// 图片(图片+水印 合成图)
UIImage * image = [ZHFGroupChatViewController imageWithText:@"吧主"
                                                   textFont:(20)
                                                  textColor:[UIColor whiteColor]
                                                  textFrame:CGRectMake((8), (0), (40), (28))
                                                originImage:UIIMAGE(@"managerPic")
                                     imageLocationViewFrame:CGRectMake((0), (0), (56), (28))
                   ];
// attachment
NSTextAttachment *textAttach_image = [[NSTextAttachment alloc] initWithData:nil ofType:nil];
// 调节 图文混排中, 图的垂直对齐 - 调整y值
textAttach_image.bounds = CGRectMake(0, -2, image.size.width/2, image.size.height/2);
textAttach_image.image = image ;
NSAttributedString *textAttachmentString = [NSAttributedString attributedStringWithAttachment:textAttach_image];
// 拼接
[mutAttStr_nickName appendAttributedString:textAttachmentString];

关键之处

• 拼接后,发现效果是 图片底部 与 label底部平齐, 显然不是想要的结果, 于是乎, google "ios, 图文混排中 Attachment 的 图片, 怎么靠中对齐",终于找到一处正解点击跳转

//在输入框中，表情和文字在水平方向上并不是对齐状态，上下有差值 
//解决方法：微调
let height = textView.font.lineHeight    
attachment.bounds = CGRectMake(0, -4, height, height)   

---

还有另外一种标签的需求，如下图

图片.png

这种情况的处理，就是直接绘制 边框、文字即可。代码实现

/** 创建"边框、文字" 图
 inset: 文字距离边框的边距
 */
+ (UIImage *)zy_imageWithBorderColor:(UIColor *)bColor borderRadius:(CGFloat)borderRadius text:(NSString *)text textColor:(UIColor *)tColor font:(UIFont *)font inset:(UIEdgeInsets)inset; {
    
    if (!bColor) {  bColor = kThemeRedColor;   }
    if (!text)   {  return nil;   }
    if (!tColor) {  tColor = [UIColor blackColor];   }
    if (!font)   {  font = kFont(10);  }
    
    CGSize textSize = [text sizeWithFont:font maxW:MAXFLOAT];
    CGRect frame = CGRectMake(0, 0, inset.left + textSize.width + inset.right, inset.top + textSize.height + inset.bottom);
    CGRect textFrame = CGRectMake(inset.left, inset.top, textSize.width, textSize.height);
    
    // 用UIGraphics进行2D图像渲染 不要用UIGraphicsBeginImageContext(size); 不然图片会模糊
    UIGraphicsBeginImageContextWithOptions(frame.size, NO, 0.0);
    
    UIBezierPath *rectPath = [UIBezierPath bezierPathWithRoundedRect:frame cornerRadius:borderRadius];
    [bColor set];
    [rectPath stroke];
    
    NSDictionary *attr = @{NSFontAttributeName: font, NSForegroundColorAttributeName : tColor };
    //位置显示
    [text drawInRect:textFrame withAttributes:attr];
    
    UIImage *aimg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return aimg;
    
}

调用方法 & 查看图片

(lldb) po [UIImage zy_imageWithBorderColor:[UIColor redColor] borderRadius:4 text:@"hhhhhaaaaaa" textColor:[UIColor blueColor] font:[UIFont systemFontOfSize:10] inset:UIEdgeInsetsMake(4, 4, 4, 4)];


(lldb) visualize 0x283e245a0

生成的图片，but圆角处有点模糊

• • 

    生成的图片.png

该怎么解决呢？这有一解绘制圆角边框、文字 生成图片