iOS AttributeString 使用詳解
阿新 • • 發佈：2019-01-09
http://blog.csdn.net/hello_hwc/article/details/46731991
一個簡單的例子 繪製不同顏色不同字型的一個AttributeString,如圖 這裡寫圖片描述 程式碼 UILabel * Label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 200, 60)]; [self.view addSubview:Label]; NSMutableAttributedString * firstPart = [[NSMutableAttributedString alloc] initWithString:@"Wenchen"]; NSDictionary * firstAttributes = @{ NSFontAttributeName:[UIFont boldSystemFontOfSize:12],NSForegroundColorAttributeName:[UIColor redColor],}; [firstPart setAttributes:firstAttributes range:NSMakeRange(0,firstPart.length)]; NSMutableAttributedString * secondPart = [[NSMutableAttributedString alloc] initWithString:@" Huang"]; NSDictionary * secondAttributes = @{NSFontAttributeName:[UIFont systemFontOfSize:10],NSForegroundColorAttributeName:[UIColor blueColor],}; [secondPart setAttributes:secondAttributes range:NSMakeRange(0,secondPart.length)]; [firstPart appendAttributedString:secondPart]; Label.attributedText = firstPart; 1 2 3 4 5 6 7 8 9 10 先看看所有的Key NSFontAttributeName; //字型，value是UIFont物件 NSParagraphStyleAttributeName;//繪圖的風格（居中，換行模式，間距等諸多風格），value是NSParagraphStyle物件 NSForegroundColorAttributeName;// 文字顏色，value是UIFont物件 NSBackgroundColorAttributeName;// 背景色，value是UIFont NSLigatureAttributeName; // 字元連體，value是NSNumber NSKernAttributeName; // 字元間隔 NSStrikethroughStyleAttributeName;//刪除線，value是NSNumber NSUnderlineStyleAttributeName;//下劃線，value是NSNumber NSStrokeColorAttributeName; //描繪邊顏色，value是UIColor NSStrokeWidthAttributeName; //描邊寬度，value是NSNumber NSShadowAttributeName; //陰影，value是NSShadow物件 NSTextEffectAttributeName; //文字效果，value是NSString NSAttachmentAttributeName;//附屬，value是NSTextAttachment 物件 NSLinkAttributeName;//連結，value是NSURL or NSString NSBaselineOffsetAttributeName;//基礎偏移量，value是NSNumber物件 NSUnderlineColorAttributeName;//下劃線顏色，value是UIColor物件 NSStrikethroughColorAttributeName;//刪除線顏色，value是UIColor NSObliquenessAttributeName; //字型傾斜 NSExpansionAttributeName; //字型扁平化 NSVerticalGlyphFormAttributeName;//垂直或者水平，value是 NSNumber，0表示水平，1垂直 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 字型，顏色，背景色 涉及到的屬性 - NSFontAttributeName - NSForegroundColorAttributeName - NSBackgroundColorAttributeName 效果 這裡寫圖片描述 程式碼 UILabel * Label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 200, 60)]; [self.view addSubview:Label]; NSMutableAttributedString * mutableAttriStr = [[NSMutableAttributedString alloc] initWithString:@"Wenchen"]; NSDictionary * attris = @{NSForegroundColorAttributeName:[UIColor whiteColor],NSBackgroundColorAttributeName:[UIColor grayColor],NSFontAttributeName:[UIFont boldSystemFontOfSize:14]}; [mutableAttriStr setAttributes:attris range:NSMakeRange(0,mutableAttriStr.length)]; Label.attributedText = mutableAttriStr; 1 2 3 4 5 6 下劃線 涉及到的兩個屬性 NSUnderlineStyleAttributeName NSUnderlineColorAttributeName 效果 這裡寫圖片描述 程式碼 UILabel * Label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 200, 60)]; [self.view addSubview:Label]; NSMutableAttributedString * mutableAttriStr = [[NSMutableAttributedString alloc] initWithString:@"Wenchen"]; NSDictionary * attris = @{NSFontAttributeName:[UIFont boldSystemFontOfSize:12],NSForegroundColorAttributeName:[UIColor redColor], NSUnderlineStyleAttributeName:@(NSUnderlineStyleSingle), NSUnderlineColorAttributeName:[UIColor blueColor],}; [mutableAttriStr setAttributes:attris range:NSMakeRange(0,mutableAttriStr.length)]; Label.attributedText = mutableAttriStr; 1 2 3 4 5 6 7 描邊 涉及到的兩個屬性 NSStrokeColorAttributeName NSStrokeWidthAttributeName 效果 這裡寫圖片描述 程式碼 UILabel * Label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 200, 60)]; [self.view addSubview:Label]; NSMutableAttributedString * mutableAttriStr = [[NSMutableAttributedString alloc] initWithString:@"Wenchen"]; NSDictionary * attris = @{NSForegroundColorAttributeName:[UIColor whiteColor],NSStrokeColorAttributeName:[UIColor greenColor],NSStrokeWidthAttributeName:@(2)}; [mutableAttriStr setAttributes:attris range:NSMakeRange(0,mutableAttriStr.length)]; Label.attributedText = mutableAttriStr; 1 2 3 4 5 6 附屬屬性（例如圖片） 涉及到的屬性 NSAttachmentAttributeName 效果 這裡寫圖片描述 程式碼 UILabel * Label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 200, 60)]; [self.view addSubview:Label]; //建立Attachment Str NSTextAttachment * attach = [[NSTextAttachment alloc] init]; attach.image = [UIImage imageNamed:@"memoAccess"]; attach.bounds = CGRectMake(0, 0, 20, 20); NSAttributedString * imageStr = [NSAttributedString attributedStringWithAttachment:attach]; //新增 NSMutableAttributedString * mutableAttriStr = [[NSMutableAttributedString alloc] initWithString:@"Wenchen"]; [mutableAttriStr appendAttributedString:imageStr]; Label.attributedText = mutableAttriStr; 1 2 3 4 5 6 7 8 9 10 11 繪製風格 為什麼要紅字？因為這個屬性真的很重要。 涉及到的屬性 NSMutableParagraphStyle 效果(看起來很奇怪，僅僅為了展示某些功能) 這裡寫圖片描述 程式碼 @interface TestView : UIView @end @implementation TestView -(instancetype)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (!self) { return nil; } self.opaque = NO; return self; } // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { NSMutableAttributedString * attributeStr = [[NSMutableAttributedString alloc] initWithString:@"The anthor of this blog is wenchenhuang"]; NSMutableParagraphStyle * paragraphStyle = [[NSMutableParagraphStyle alloc] init]; paragraphStyle.alignment = NSTextAlignmentRight; paragraphStyle.headIndent = 4.0; paragraphStyle.lineBreakMode = NSLineBreakByCharWrapping; paragraphStyle.lineSpacing = 2.0; NSDictionary * attributes = @{NSParagraphStyleAttributeName:paragraphStyle}; [attributeStr setAttributes:attributes range:NSMakeRange(0, attributeStr.length)]; [attributeStr drawInRect:self.bounds]; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 TestView *test = [[TestView alloc] initWithFrame:CGRectMake(100, 100,100, 60)]; [self.view addSubview:test]; 1 2 陰影 涉及到的屬性 NSShadowAttributeName 效果 這裡寫圖片描述 UILabel * Label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 200, 60)]; [self.view addSubview:Label]; NSMutableAttributedString * mutableAttriStr = [[NSMutableAttributedString alloc] initWithString:@"Wenchen"]; NSShadow * shadow = [[NSShadow alloc] init]; shadow.shadowColor = [UIColor blueColor]; shadow.shadowBlurRadius = 2.0; shadow.shadowOffset = CGSizeMake(1.0, 1.0); NSDictionary * attris = @{NSShadowAttributeName:shadow}; [mutableAttriStr setAttributes:attris range:NSMakeRange(0,mutableAttriStr.length)]; Label.attributedText = mutableAttriStr; 1 2 3 4 5 6 7 8 9 10 文字效果 相關屬性 NSTextEffectAttributeName 這裡寫圖片描述 程式碼 UILabel * Label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 200, 60)]; [self.view addSubview:Label]; NSMutableAttributedString * mutableAttriStr = [[NSMutableAttributedString alloc] initWithString:@"Wenchen"]; NSDictionary * attris = @{NSTextEffectAttributeName:NSTextEffectLetterpressStyle}; [mutableAttriStr setAttributes:attris range:NSMakeRange(0,mutableAttriStr.length)]; Label.attributedText = mutableAttriStr; 1 2 3 4 5 6 連結 相關屬性 NSLinkAttributeName 例子 點選開啟連結 @interface ViewController ()<UITextViewDelegate> @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)]; textView.scrollEnabled = NO; textView.editable = NO; textView.textContainer.lineFragmentPadding = 0; textView.textContainerInset = UIEdgeInsetsMake(0, 0, 0, 0); textView.delegate = self; [self.view addSubview:textView]; NSMutableAttributedString * mutableAttriStr = [[NSMutableAttributedString alloc] initWithString:@"Wenchen"]; NSDictionary * attris = @{NSLinkAttributeName:[NSURL URLWithString:@"http://www.baidu.com"]}; [mutableAttriStr setAttributes:attris range:NSMakeRange(0,mutableAttriStr.length)]; textView.attributedText = mutableAttriStr; // Do any additional setup after loading the view, typically from a nib. } - (BOOL)textView:(UITextView *)textView shouldInteractWithURL:(NSURL *)url inRange:(NSRange)characterRange { return YES; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 文字連體 涉及到的屬性 NSLigatureAttributeName 舉例 NSLigatureAttributeName 屬性位@(0) 和@(1) 這裡寫圖片描述 這裡寫圖片描述 字元間隔 相關屬性 NSKernAttributeName 舉例 字元間距拉大到4 這裡寫圖片描述 對比下，預設的 這裡寫圖片描述 UILabel * Label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 200, 120)]; [self.view addSubview:Label]; NSMutableAttributedString * mutableAttriStr = [[NSMutableAttributedString alloc] initWithString:@"Wenchen"]; NSDictionary * attris = @{NSKernAttributeName:@(4), NSFontAttributeName:[UIFont systemFontOfSize:30]}; [mutableAttriStr setAttributes:attris range:NSMakeRange(0,mutableAttriStr.length)]; Label.attributedText = mutableAttriStr; 1 2 3 4 5 6 7 baseline基礎偏移量 相關屬性 - NSBaselineOffsetAttributeName 效果 對比下偏移量為0 和20 程式碼 NSDictionary * attris = @{NSBaselineOffsetAttributeName:@(0), NSFontAttributeName:[UIFont systemFontOfSize:30]}; 1 2 字型傾斜 相關屬性 NSObliquenessAttributeName 效果 這裡寫圖片描述 程式碼 NSDictionary * attris = @{NSObliquenessAttributeName:@(0.5), NSFontAttributeName:[UIFont systemFontOfSize:30]}; 1 2 字型扁平化 相關屬性 NSExpansionAttributeName 效果 這裡寫圖片描述 程式碼 NSDictionary * attris = @{NSExpansionAttributeName:@(1.0), NSFontAttributeName:[UIFont systemFontOfSize:30]}; 1 2