需求:
-
昵称(文字)+身份(渐变背景色+文字)
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)];
<UIImage:0x283e245a0 anonymous {73, 20}>
(lldb) visualize 0x283e245a0
生成的图片，but圆角处有点模糊
- 生成的图片.png
该怎么解决呢？这有一解绘制圆角边框、文字 生成图片
