iOS 在可折行的label后面添加带边框的标签

最近项目需要实现一个类似下图这样的效果:

image

在可换行显示的UILabel后面拼接一个带边框样式的label,两个label的内容都可接受外部传值,具体做法如下:

因为两个标签的中间有一定的间隙,所以前面的文本框内容后面要多加一个空格:


NSString *str = @"测试测试测试测试测试测试测试测试测试测试测试";

addressLabel.text = [NSString stringWithFormat:@"%@  ",str];



NSString *tagStr = @"标签内容";

 UIView *tagV = [[UIView alloc] init];

 //此处应该根绝小标签字体大小,计算小标签的宽度

int kuan = 100;

if([tagStr length] >0) {

         tagV.layer.backgroundColor = [[UIColor whiteColor] CGColor];

         tagV.width = kuan;

         tagV.height =16;

    }

   //标记地址属性的小标签

   UILabel *tagLabel = [[UILabel alloc] init];

   tagLabel.frame = CGRectMake(0,0, kuan,16);

  [tagLabel setFont:[UIFont systemFontOfSize:10]];

   [tagLabel setTextAlignment:NSTextAlignmentCenter];

   [tagLabel setTextColor:[UIColor redColor]];

  [tagLabel setText:str];

  [tagV addSubview:tagLabel];

 if([tagLabel.text length] >0) {

         tagLabel.layer.backgroundColor= [[UIColor whiteColor] CGColor];

         [tagLabel.layer setCornerRadius:3];

         [tagLabel.layer setMasksToBounds:YES];

         tagLabel.layer.borderWidth=1;

          tagLabel.layer.borderColor = [UIColor redColor].CGColor;

   }

       //拼接标签

     NSTextAttachment *attach = [[NSTextAttachment alloc] init];

    //label转图片

    UIImage *img = [self imageWithUIView:tagV];

    attach.image= img;

    attach.bounds = CGRectMake(5, -3, tagV.width, tagV.height);

    NSAttributedString *imageStr = [NSAttributedString attributedStringWithAttachment:attach];

    NSMutableAttributedString *abs = [[NSMutableAttributedString alloc] initWithString:addressLabel.text];

  [abs appendAttributedString:imageStr];

 addressLabel.attributedText= abs;

因为富文本的样式里没有给固定文本设置边框色的样式,但可以拼接图片,所以需要把后面带边框的边框label所在的tagV转成图片再拼接上去,下面是UIView转UIImage的方法:


//将UIView转成UIImage

- (UIImage*)imageWithUIView:(UIView*) view {

    UIGraphicsBeginImageContext(view.bounds.size);

    UIGraphicsBeginImageContextWithOptions(view.bounds.size, YES, [UIScreen mainScreen].scale);

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    [view.layer renderInContext:ctx];

    UIImage* tImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    returnt Image;

}

补充说明:上面为什么不直接拼接label,而是拼接UIView,把label放在这个view上,我刚开始试的是直接拼接label,把label转成image,但设置的背景色不起作用,设置圆角效果后,背景色还是黑色的,四个角会出现四个小黑点,具体啥原因我还没弄明白,有了解的大神可以帮忙指点一下,按上面的方法可以实现图片中的效果,如果有更简便实现该效果的方法,烦请不吝赐教~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341

推荐阅读更多精彩内容