iOS @人实现

利用NSTextAttachment实现UITextView中图文混排


   由于项目需要实现@人的相关需求,所以对UITextView的文字属性做了一些研究。最开始,实现`@人`的功能使用的是UITextView的attributedText的属性,通过UITextView的代理方法,记住其所在的位置,并在适当的时间去改变`@人`的颜色,在操作的时候通过位置来判断选择、替换、删除、改变颜色等操作。

   但,这种方式实现起来相当麻烦,并且很容易产生一些问题。所以,经过查找,了解到NSAttributeString有一个`NSTextAttachment`的样式类,可以实现图文混排的效果,我就想,能不能把@人转化为图片进行排版,并用一个类存储下@人的个人信息,这样,就不用记下位置信息,以及改变文本时候需要频繁的计算`@人`的位置信息了,删除的时候还能一下删除`@人`整个区域,并不会对其它造成影响,刚好适合需求。于是,就对`NSTextAttachment`做了一些研究。

首先,来看下苹果官方对该类的描述:

NSTextAttachment objects are used by the NSAttributedString class cluster as the values for attachment attributes (stored in the attributed string under the key named NSAttachmentAttributeName). The objects you create with this class are referred to as text attachment objects, or when no confusion will result, as text attachments or merely attachments.

NSTextAttachment对象被NSAttributedString类集群用作附件属性的值(存储在名为的键下的属性字符串中NSAttachmentAttributeName)。使用此类创建的对象被称为文本附件对象,或者作为文本附件或仅附件的时候,不会导致混淆。

它的属性:

@property(NS_NONATOMIC_IOSONLY) CGRect bounds NS_AVAILABLE(10_11, 7_0); //展示内容的bounds,默认为CGRectZero.
@property(nullable, strong, NS_NONATOMIC_IOSONLY) UIImage *image NS_AVAILABLE(10_11, 7_0); //以图片的形式来展示文本内容

由于,不光需要将文字转化为图片,后续还需要遍历出文本中@人的信息,所以,写一个类继承于NSTextAttachment,并为其添加一个person的属性,就能在后续获取到其中的信息。如下:

#import <UIKit/UIKit.h>

@class YYPersonItem;
@interface JMAtTextAttachment : NSTextAttachment

@property (nonatomic, copy) NSString *personId;
@property (nonatomic, assign) CGSize imageSize;
@property (nonatomic, strong) YYPersonItem *personItem;
@property (nonatomic, strong) NSArray *atAllPersons;

@end

因为需要显示@的人名,把人名转化为图片,而不是已经准备好的图片,就需要自己将文字转化为图片了。当然,如果是设定好的emoji或其它图片,直接赋值到它的image属性就好了。其中,将文字转化为图片的方法如下:

+ (UIImage *)imageWithString:(NSString *)string font:(UIFont *)font color:(UIColor *)color {
    CGSize size = CGSizeMake([string getSizeWithFont:font constrainedWidth:0 numberOfLines:1].width, font.pointSize + 3);
    NSDictionary *attributes = @{NSFontAttributeName:font,
                                 NSForegroundColorAttributeName:color};
    NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:string attributes:attributes];
    
    UIGraphicsBeginImageContextWithOptions(size, 0, 0);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    CGContextSetCharacterSpacing(ctx, 10);
    
    CGContextSetTextDrawingMode (ctx, kCGTextFill);
    
    CGContextSetRGBFillColor (ctx, 255, 255, 255, 1);
    
    [attributedString drawInRect:CGRectMake(0, 0, size.width, size.height)];
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return image;
}
//这个根据需求可以自己调整font、color、characterSpacing等

这样,在UITextView中通过插入图片来展示特殊的文本就实现了,而且易操作,不容易因为range发生改变而产生的错乱,颜色改变等一些判断错误的问题。但是,这样只是完成了功能,显示的时候尺寸确不符合要求,那么NSTextAttachment的bounds属性就是发挥作用的时候了。


设置显示NSTextAttachment的图片位置,有两种方式:

  1. 设置实例化的NSTextAttachment的bounds属性. //这个适用于单独设置某一需求

  2. 继承NSTextAttachment,重写下面的方法即可控制图片显示的位置.(这个适用于统一需求)

     -(CGRect)attachmentBoundsForTextContainer:(nullable NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex NS_AVAILABLE(10_11, 7_0);//具体位置需要自己来调试达到最佳显示位置
    


要注意的:

到这里,好像基本工作都完成了。但是,如果没有设置好位置信息,UITextView换行后,行距会发生变化,如果之前是AttributeString, 那么则需要同样把Attribute属性赋给这个包含NSTextAttachment的AttributeString,示例如下:

    JMAtTextAttachment *attach = [[JMAtTextAttachment alloc] init];
    if ([personItem.ddId isEqualToString:kPerson_AtAll_ddId]) {
        attach.atAllPersons = atAllPersons;
    }
    UIFont *font = textView.font;
    NSString *nameAndSpace = [NSString stringWithFormat:@"@%@ ", personItem.name];
    attach.image = [UIImage imageWithString:nameAndSpace font:font color:color];
    CGSize size = CGSizeMake([nameAndSpace getSizeWithFont:font constrainedWidth:0 numberOfLines:1].width, font.pointSize + 3);
    attach.imageSize = CGSizeMake(size.width, size.height);
    attach.personItem = personItem;

    NSAttributedString * imageStr = [NSAttributedString attributedStringWithAttachment:attach];
    NSMutableAttributedString *mutablImageStr = [[NSMutableAttributedString alloc] initWithAttributedString:imageStr];
    
    [mutablImageStr addAttributes:attributes range:NSMakeRange(0, imageStr.length)];
    [addMutableAttributeStr appendAttributedString:mutablImageStr];

JMAtTextAttachment.m中如下:

#import "JMAtTextAttachment.h"

@implementation JMAtTextAttachment  
- (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex {
    return CGRectMake(0, -3, _imageSize.width, _imageSize.height);
}   
@end

实现效果如下:


@人效果图.png

到这里,基本就完善了。当然,具体项目中还有许多逻辑要处理,比如@重复的人键盘输入@点@按钮的处理@人替换等,就需要根据具体情况具体分析了。其中,将文字转化图片还好,最难处理的就是图片的bounds了,需要一点一点的试着去调,即使设置了需要的attributes属性,有时还是达不到需要的展示效果。若有不足,敬请指导.

Demo下载地址:
https://github.com/Aoce/YYAtPerson

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

推荐阅读更多精彩内容