美文网首页
iOS UIFont,NSTextAttachment图文混排图

iOS UIFont,NSTextAttachment图文混排图

作者: 大宝来巡山 | 来源:发表于2023-04-06 09:59 被阅读0次

    查看系统UIFont 对应的属性:

    // Font attributes
    @property(nonatomic,readonly,strong) NSString *familyName;
    @property(nonatomic,readonly,strong) NSString *fontName;
    @property(nonatomic,readonly)        CGFloat   pointSize;
    @property(nonatomic,readonly)        CGFloat   ascender;
    @property(nonatomic,readonly)        CGFloat   descender;
    @property(nonatomic,readonly)        CGFloat   capHeight;
    @property(nonatomic,readonly)        CGFloat   xHeight;
    @property(nonatomic,readonly)        CGFloat   lineHeight API_AVAILABLE(ios(4.0));
    @property(nonatomic,readonly)        CGFloat   leading;
    
    [图片上传中...(20170406105939463.png-38522c-1680763119563-0)]

    X-height xHeight :小写x的高度

    Cap height capHeight:大写的高度

    Ascent ascender :基准线以上的高度

    Descent descender:基准线以下的高度

    Line height lineHeight:当前字体下的行高

    Point size pointSize:字体大小

    20170406105939463.png
    UIFont *font = [UIFont systemFontOfSize:20];
    NSLog(@"\nfont.pointSize = %f \nfont.ascender = %f \nfont.descender = %f \nfont.capHeight = %f \nfont.xHeight = %f \nfont.lineHeight = %f \nfont.leading = %f \n",font.pointSize,font.ascender,font.descender,font.capHeight,font.xHeight,font.lineHeight,font.leading);
    
    运行结果:
    font.pointSize = 20.000000 
    font.ascender = 19.042969 
    font.descender = -4.824219 
    font.capHeight = 14.091797 
    font.xHeight = 10.439453 
    font.lineHeight = 23.867188 
    font.leading = 0.000000
    
    

    1.设置的字体大小就是 pointSize
    2.ascender + descender = lineHeight
    3.实际行与行之间就是存在间隙的,间隙大小即为 lineHeight - pointSize,在富文本中设置行高的时候,其实际文字间的距离就是加上这个距离的。(原来一直错误的理解文字间的距离就是行间距)

    写一个UILabel分类:
    UILabel+Image.h

     #import <UIKit/UIKit.h>
    
    NS_ASSUME_NONNULL_BEGIN
    
    @interface UILabel (Image)
    
    -(void)setText:(NSString *)text frontImages:(NSArray<UIImage *> *)images imageSpan:(CGFloat)span;
    
    @end
    
    NS_ASSUME_NONNULL_END
    

    UILabel+Image.m

    #import "UILabel+Image.h"
    
    @implementation UILabel (Image)
    
    /**
     为UILabel首部设置图片标签
     
     @param text 文本
     @param images 标签数组
     @param span 标签间距
     */
    -(void)setText:(NSString *)text frontImages:(NSArray<UIImage *> *)images imageSpan:(CGFloat)span
    {
        NSMutableAttributedString *textAttrStr = [[NSMutableAttributedString alloc] init];
        
        for (UIImage *img in images) {//遍历添加标签
            
            NSTextAttachment *attach = [[NSTextAttachment alloc] init];
            attach.image = img;
            ///方式一:
            //计算图片大小,与文字同高,按比例设置宽度
            CGFloat imgH = self.font.lineHeight;
            CGFloat imgW = (img.size.width / img.size.height) * imgH;
            attach.bounds = CGRectMake(0, self.font.descender , imgW, imgH);
            
            //方式二:(可验证: lineHeight = ascender + descender)
    //        CGFloat imgH = self.font.lineHeight;
    //        CGFloat imgW = (img.size.width / img.size.height) * imgH;
    //        //计算文字padding-top ,使图片垂直居中
    //        CGFloat textPaddingTop = (self.font.lineHeight - self.font.ascender);
    //        attach.bounds = CGRectMake(0, -textPaddingTop, imgW, imgH);
            
            NSAttributedString *imgStr = [NSAttributedString attributedStringWithAttachment:attach];
            [textAttrStr appendAttributedString:imgStr];
            //标签后添加空格 图片与图片/文字之间的间距(占位1个字符)
            [textAttrStr appendAttributedString:[[NSAttributedString alloc] initWithString:@" "]];
        }
        
        //设置显示文本
        [textAttrStr appendAttributedString:[[NSAttributedString alloc]initWithString:text]];
        //设置间距:最后一个图片与文字的间距
        if (span != 0) {
            [textAttrStr addAttribute:NSKernAttributeName value:@(span)
                                range:NSMakeRange(0, images.count * 2/*(图片+1个空格字符):由于图片也会占用一个单位长度,所以带上空格数量,需要 *2 */)];
        }
        
        self.attributedText = textAttrStr;
    }
    
    @end
    

    调用代码如下:

    #import "ViewController.h"
    #import <Masonry.h>
    #import "UILabel+Image.h"
    
    @interface ViewController ()
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
      
        UIImageView* imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"CMS"]];
        imageView.frame = CGRectMake(0, 60, 60, 60);
        [self.view addSubview:imageView];
        
        
        UILabel* name = [[UILabel alloc]initWithFrame:CGRectMake(60, 60, 270, 20)];
        name.font = [UIFont systemFontOfSize:20];
        name.backgroundColor = [UIColor greenColor];
        NSString* nameStr = @"澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网澎拜网";
        UIImage* image = [UIImage imageNamed:@"yoda"];
        NSArray* imagesArr = @[image,image];
        //关键代码调用
        [name setText:nameStr frontImages:imagesArr imageSpan:10];
    
        [self.view addSubview:name];
        
        [name mas_makeConstraints:^(MASConstraintMaker *make) {
                make.left.equalTo(imageView.mas_right).with.offset(10);
                make.top.equalTo(imageView);
            }];
    
        UIImageView* imageView1 = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"CMS"]];
        imageView1.frame = CGRectMake([UIScreen mainScreen].bounds.size.width - 60, 60, 60, 60);
        [self.view addSubview:imageView1];
    
        [imageView1 mas_makeConstraints:^(MASConstraintMaker *make) {
                make.left.equalTo(name.mas_right).with.offset(0);
                make.top.equalTo(name);
                make.right.lessThanOrEqualTo(@(-5));
                make.width.height.equalTo(@30);
        }];
    
        UIFont *font = [UIFont systemFontOfSize:20];
        NSLog(@"\nfont.pointSize = %f \nfont.ascender = %f \nfont.descender = %f \nfont.capHeight = %f \nfont.xHeight = %f \nfont.lineHeight = %f \nfont.leading = %f \n",font.pointSize,font.ascender,font.descender,font.capHeight,font.xHeight,font.lineHeight,font.leading);
    }
    
    
    @end
    

    页面展示效果:


    飞书20230406-175741.jpg

    相关文章

      网友评论

          本文标题:iOS UIFont,NSTextAttachment图文混排图

          本文链接:https://www.haomeiwen.com/subject/ibgeddtx.html