UI篇-CATextLayer和 富文本的交融

前言

CATextLayer适用于IOS或者MAC,比UIlablel 和 NSTextView 能做的事很多,可以这样说UIlablel是通过CATextLayer实现的,身为CALayer的三大子类之一,它的功能远比 UIlablel 强大的多的多,其最主要的特点是CATextLayer可以被NSMutableAttributedString直接附值。而NSMutableAttributedString有可以最自己内容作出颜色以及大小的调整,这样结合起来使用的话,就远比UILabel 灵活的多,效果也酷炫的多,也许CATextLayer就是为了NSMutableAttributedString而生的,(哈哈,开个玩笑)。下面就简要介绍下CATextLayer 的常规使用,不足之处,还望朋友们下面留言补充,不胜感谢。
苹果官网给出CATextLayer的API解释


初始化一个CATextLayer

CATextLayer *lary =[CATextLayer layer];   
lary.string = @"dasfasa";    
lary.bounds = CGRectMake(0, 0, 320, 20);      
lary.font = @"HiraKakuProN-W3";//字体的名字 不是 UIFont   
lary.fontSize = 12.f;//字体的大小      
lary.alignmentMode = kCAAlignmentCenter;//字体的对齐方式    
lary.position = CGPointMake(160, 410);     
lary.foregroundColor =[UIColor redColor].CGColor;//字体的颜色  
[self.view.layer addSublayer:lary];
/*
 @property CGFloat contentsScale; 使用CATextLayer设置文本,可能会产生模糊状态,因为该默认的分辨率不是retina,设置如下代码即可:
*/
  • CATextLayer与 CAGradientLayer(渐变图层)结合,[金闪闪动画字体]
字.gif
  • CATextLayer与CAShapeLayer(波浪)
波浪.gif

这里只提供思路 具体代码地址

富文本AttributedString

AttributedString可以分为NSAttributedString和NSMutableAttributedString两种。在使用中通过将AttributedString赋值给控件的 attributedText 属性来添加文字样式。有属性的控件有UILabel、UITextField和UITextView。

  • 使用方式一

    初始化一个NSMutableAttributedString,然后向里面添加文字样式,将其赋给控件的  
    *attributedText*属性。
    
    NSString *str = @"相看两不厌,唯有敬亭山";
    //创建NSMutableAttributedString
     NSMutableAttributedString *attrStr = [[NSMutableAttributedString alloc]initWithString:str];
    //设置字体和设置字体的范围
    [attrStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30.0f]  range:NSMakeRange(0, 3)];
    //添加文字颜色
    [attrStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(17, 7)];
    
    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(60, 100, 200, 0)];
    label.backgroundColor = [UIColor greenColor];
    //自动换行
    label.numberOfLines = 0;
    //设置label的富文本
    label.attributedText = attrStr;
     //label高度自适应
    [label sizeToFit];
    [self.view addSubview:label];
    
  • 使用方式二
    创建属性字典,并将各种属性初始化。赋值,
    并利用方法appendAttributedString: 添加入NSMutableAttributedString,将其赋给控件的
    attributedText
    属性。**

    //初始化NSMutableAttributedString
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc]init];
    //设置字体格式和大小NSString *str0 = @"设置字体格式和大小";
    NSDictionary *dictAttr0 = @{NSFontAttributeName:[UIFont systemFontOfSize:14]};
    NSAttributedString *attr0 = [[NSAttributedString alloc]initWithString:str0 attributes:dictAttr0];      
    [attributedString appendAttributedString:attr0];
    
    //设置字体颜色NSString *str1 = @"\n设置字体颜色\n";
    NSDictionary *dictAttr1 = @{NSForegroundColorAttributeName:[UIColor purpleColor]};
    NSAttributedString *attr1 = [[NSAttributedString alloc]initWithString:str1 attributes:dictAttr1];       
    [attributedString appendAttributedString:attr1];
    
     UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(60, 100, 300, 0)];
    label.backgroundColor = [UIColor lightGrayColor];
    //自动换行
    label.numberOfLines = 0;
    //设置label的富文本
    label.attributedText = attributedString;
    //label高度自适应[label sizeToFit];
    [self.view addSubview:label];
    

文本属性Attributes

1.直接上干货,多个属性可以一同使用

//NSFontAttributeName 字号 UIFont 默认12 
//NSParagraphStyleAttributeName 段落样式 NSParagraphStyle 
//NSForegroundColorAttributeName 前景色 UIColor 
//NSBackgroundColorAttributeName 背景色 UIColor 
//NSObliquenessAttributeName 字体倾斜 NSNumber 
//NSExpansionAttributeName 字体加粗 NSNumber 比例 0就是不变 1增加一倍 
//NSKernAttributeName 字间距 CGFloat 
//NSUnderlineStyleAttributeName 下划线 1或0 
//NSUnderlineColorAttributeName 下划线颜色
 //NSStrikethroughStyleAttributeName 删除线 1或0
 //NSStrikethroughColorAttributeName 某种颜色 
//NSStrokeColorAttributeName same as ForegroundColor 
//NSStrokeWidthAttributeName CGFloat 
//NSLigatureAttributeName 连笔字 1或0 没看出效果 
//NSShadowAttributeName 阴影 NSShawdow
 //NSTextEffectAttributeName 设置文本特殊效果,取值为 NSString 对象,目前只有图版印刷效果可用: 
//NSAttachmentAttributeName NSTextAttachment 设置文本附件,常用插入图片 
//NSLinkAttributeName 链接 NSURL (preferred) or NSString
 //NSBaselineOffsetAttributeName 基准线偏移 NSNumber 
//NSWritingDirectionAttributeName 文字方向 @[@(1),@(2)] 分别代表不同的文字出现方向等等,我想你一定用不到它 - -
 //NSVerticalGlyphFormAttributeName 水平或者竖直文本 1竖直 0水平 在iOS没卵用,不支持竖版

2.设置段落样式:段落样式中允许你设置文字与文字之间的行间距、字符间距、以及对齐模式,但是注意的是,在设置段落样式的时候,必须保证控件的

numberofline属性必须为0

NSMutableAttributedString* str2 = [[NSMutableAttributedString alloc]initWithString:@"这是测试段落样式的文字,这是测试段落样式的文字,这是测试段落样式的文字,这是测试段落样式的文字,这是测试段落样式的文字,这是测试段落样式的文字。"];
NSMutableParagraphStyle* paragraphStyle = [[NSMutableParagraphStyle alloc]init];
//对齐模式
//NSTextAlignmentCenter;//居中
//NSTextAlignmentLeft //左对齐
//NSTextAlignmentCenter //居中
//NSTextAlignmentRight //右对齐
//NSTextAlignmentJustified//最后一行自然对齐
//NSTextAlignmentNatural //默认对齐脚本
[paragraphStyle setAlignment:NSTextAlignmentLeft];
//换行裁剪模式
 //NSLineBreakByWordWrapping = 0,//以空格为边界,保留单词
//NSLineBreakByCharWrapping, //保留整个字符
//NSLineBreakByClipping, //简单剪裁,到边界为止
//NSLineBreakByTruncatingHead, //按照"……文字"显示
//NSLineBreakByTruncatingTail, //按照"文字……文字"显示
//NSLineBreakByTruncatingMiddle //按照"文字……"显示
[paragraphStyle setLineBreakMode:NSLineBreakByCharWrapping];
 //行间距
[paragraphStyle setLineSpacing:5.f];
 //字符间距
[paragraphStyle setParagraphSpacing:2.f];
[str2 addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [str2 length])];

**最后,将上面设置**文字**样式,设置**段落**样式的两部分代码分别加入UILable  attributedText 来查看结果:**

设置段落格式示例

    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    paragraphStyle.lineSpacing = Scale_Y(7);// 字体的行间距
    paragraphStyle.paragraphSpacing = Scale_Y(3);
    attributes = @{
                                 NSFontAttributeName:[UIFont systemFontOfSize:SMALL_FONT],
                                 NSParagraphStyleAttributeName:paragraphStyle,
                                 NSForegroundColorAttributeName:[UIColor whiteColor]
                                 };
    _textV.attributedText = [[NSAttributedString alloc] initWithString:_textV.text attributes:attributes];
    _textV.textColor = [UIColor whiteColor];

值得注意的地方是 drawAtPoint和drawInRect的区别是后一个可以自动换行,不过代价是 不设置属性,都是默认的属性有时候是无法接受的。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容