目前有个业务需求是实现如下图两个提示窗

image.png

需求

需要实现可复用的弹窗，一般中间部分的思路是使用控件一点点的相对布局，本文采用更优雅的形式，中间整体部分用富文本实现

代码如下

-(NSMutableAttributedString *)getAttrStringFromDic:(NSDictionary *)dic{
    NSString *firstTitle = dic[@"firstTitle"];
    NSString *firstDes = dic[@"firstDes"];
    NSString *secondTitle = dic[@"secondTitle"];
    NSArray *secondDesArr = dic[@"secondDesArr"];
    
//    NSString *firstTitle = @"课程理念";
//    NSString *firstDes = @"自然拼读是母语为英语国家的小朋友学英语的一套发音方法，帮助孩子摆脱死记硬背单词。课程系统学习26个字母和常见字母组合的发音规则，让孩子见词能读，能听能写，提升记单词的效率，同时提高阅读能力，通过自然拼读课程的学习可以解码小学阶段80%以上的单词。";
//    NSString *secondTitle =@"预期效果";
//    NSArray *secondDesArr = @[@"1.正确区分26个字母对应大小写，并掌握26个字母",@"2.正确区分26个字母对应大小写，并掌握26个字母",@"3.正确区分26个字母对应大小写，并掌握26个字母"];
    
    // 小空行
    NSMutableAttributedString *space = [[NSMutableAttributedString alloc] initWithString:@" \n" attributes:@{
        NSForegroundColorAttributeName:RGBA(72, 106, 154),
        NSFontAttributeName:[UIFont systemFontOfSize:8],
    }];
    
    // 大空行
    NSMutableAttributedString *bigSpace = [[NSMutableAttributedString alloc] initWithString:@" \n" attributes:@{
        NSForegroundColorAttributeName:RGBA(72, 106, 154),
        NSFontAttributeName:[UIFont systemFontOfSize:20],
    }];
    
    // 最终字符
    NSMutableAttributedString *totalString = [[NSMutableAttributedString alloc] init];
    
    // 标题
    NSMutableAttributedString *firstTitleStr = [[NSMutableAttributedString alloc] initWithString:firstTitle?:@"" attributes:@{
        NSForegroundColorAttributeName:RGBA(18, 39, 69),
        NSFontAttributeName:[UIFont boldSystemFontOfSize:14],
    }];
    [totalString appendAttributedString:firstTitleStr];
    
    [totalString appendAttributedString:space];
    [totalString appendAttributedString:space];
    
    // 描述
    NSMutableAttributedString *firstDesStr = [[NSMutableAttributedString alloc] initWithString:firstDes?:@"" attributes:@{
        NSForegroundColorAttributeName:RGBA(18, 39, 69),
        NSFontAttributeName:[UIFont systemFontOfSize:12],
    }];
    [totalString appendAttributedString:firstDesStr];
    
    // 增加小空行和大空行
    [totalString appendAttributedString:[space copy]];
    [totalString appendAttributedString:[bigSpace copy]];
    
    // 标题
    NSMutableAttributedString *secondTitleStr = [[NSMutableAttributedString alloc] initWithString:secondTitle?:@"" attributes:@{
        NSForegroundColorAttributeName:RGBA(18, 39, 69),
        NSFontAttributeName:[UIFont boldSystemFontOfSize:14],
    }];
    [totalString appendAttributedString:secondTitleStr];
    
    // 增加空行
    [totalString appendAttributedString:[space copy]];
    [totalString appendAttributedString:[space copy]];
    
    // 描述字断
    for (NSString *subtitle in secondDesArr) {
        NSMutableAttributedString *subtitleStr = [[NSMutableAttributedString alloc] initWithString:subtitle?:@"" attributes:@{
            NSForegroundColorAttributeName:RGBA(18, 39, 69),
            NSFontAttributeName:[UIFont systemFontOfSize:12],
        }];
        [totalString appendAttributedString:subtitleStr];
        [totalString appendAttributedString:[space copy]];
    }
    
    
    return totalString

这样只用一个label的attributestring就能实现所有内容的绘制。

技巧

  NSMutableAttributedString *space = [[NSMutableAttributedString alloc] initWithString:@" \n" attributes:@{
        NSForegroundColorAttributeName:RGBA(72, 106, 154),
        NSFontAttributeName:[UIFont systemFontOfSize:8],
    }];

利用此代码实现换行的作用，行的高度可以用空格的字体大小来控制。优雅的解决了需求。