如何实现图片多种颜色的文字混排并且带的背景颜色范围比文字图片范围大

简介: 如何实现图片多种颜色的文字混排并且带的背景颜色范围比文字图片范围大

由于标签是从开始显示的,文字的内容长度又不固定,图片的位置相对固定。

想实现这样的效果需要计算出文字和图片的总长度,通过设置分段文字颜色的富文本来实现:

-(void)setRank:(NSUInteger) rank
{
    _rank = rank;
    UIColor *strokeColor = BGColorHex(C69116);
    NSUInteger tempRank = rank/10+1;
    if(0 == rank)
    {
        tempRank = 0;
    }
    else if(rank >= 100)
    {
        tempRank = 10;
    }
    switch (tempRank) {
        case 0:
            strokeColor = BGColorHex(A1A1A1);
            break;
        case 1:
            strokeColor = BGColorHex(FE7241);
            break;
        case 2:
            strokeColor = BGColorHex(FF9802);
            break;
        case 3:
            strokeColor = BGColorHex(FFBF01);
            break;
        case 4:
            strokeColor = BGColorHex(CBDC3C);
            break;
        case 5:
            strokeColor = BGColorHex(699E38);
            break;
        case 6:
            strokeColor = BGColorHex(26A99C);
            break;
        case 7:
            strokeColor = BGColorHex(05A8F3);
            break;
        case 8:
            strokeColor = BGColorHex(4F6BEA);
            break;
        case 9:
            strokeColor = BGColorHex(663CB5);
            break;
        case 10:
            strokeColor = BGColorHex(E9407B);
            break;
            
        default:
            break;
    }
    
    NSString *rankStr = [NSString stringWithFormat:@"%lu", rank];
    NSString *str = [NSString stringWithFormat:@"fron%@", rankStr];
    NSUInteger fillCharacterCount = 4;
    NSMutableAttributedString *textAttributedString = [[NSMutableAttributedString alloc] initWithString:str];
    [textAttributedString addAttribute:NSForegroundColorAttributeName value:[UIColor clearColor] range:NSMakeRange(0, fillCharacterCount)];
    [textAttributedString addAttribute:NSStrokeColorAttributeName value:strokeColor range:NSMakeRange(fillCharacterCount, rankStr.length)];
    [textAttributedString addAttribute:NSStrokeWidthAttributeName value:@4.0 range:NSMakeRange(fillCharacterCount, rankStr.length)];
   [textAttributedString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:12.f] range:NSMakeRange(0, fillCharacterCount)];
   [textAttributedString addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:12.f] range:NSMakeRange(fillCharacterCount, rankStr.length)];
    self.describeTitleLabel.attributedText = textAttributedString;
    [self.describeTitleLabel updateLayout];
    
    textAttributedString = [[NSMutableAttributedString alloc] initWithString:str];
    [textAttributedString addAttribute:NSForegroundColorAttributeName value:[UIColor clearColor] range:NSMakeRange(0, fillCharacterCount)];
    [textAttributedString addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor] range:NSMakeRange(fillCharacterCount, rankStr.length)];
    [textAttributedString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:12.f] range:NSMakeRange(0, fillCharacterCount)];
    [textAttributedString addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:12.f] range:NSMakeRange(fillCharacterCount, rankStr.length)];
    self.underDescribeTitleLabel.attributedText = textAttributedString;
    [self.underDescribeTitleLabel updateLayout];
    
    
    NSString *filename = [NSString stringWithFormat:@"lv%lu", tempRank];
    self.decribeImageView.image = [UIImage imageNamed:filename];
}
目录
相关文章
|
23天前
|
数据安全/隐私保护
图片添加文字水印
【10月更文挑战第21天】图片添加文字水印是一种重要的保护和宣传手段。通过合理选择文字内容、设计和添加方法,可以有效地为图片添加水印,保护图片的权益和价值。同时,随着技术的发展,我们也需要不断探索和创新,以适应不断变化的需求。你还可以根据具体的行业需求和实际情况,进一步深入研究和优化文字水印的添加策略,确保图片得到更好的保护和利用。
25 0
|
3月前
在图片上的文字背景,颜色是黑色?
在图片上的文字背景,颜色是黑色?
20 0
在图片上的文字背景,颜色是黑色?
|
索引
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的) ...
4145 0
|
4月前
|
PHP 数据安全/隐私保护 计算机视觉
ThinkPHP图片处理之压缩图片大小,图片处理之图片水印(添加平铺文字水印,并设置文字之间的间距和文字的角度)
ThinkPHP图片处理之压缩图片大小,图片处理之图片水印(添加平铺文字水印,并设置文字之间的间距和文字的角度)
89 1
|
6月前
如何实现带背景的镂空文字
如何实现带背景的镂空文字
40 1
|
6月前
|
C# 开发工具 数据安全/隐私保护
C# 给图片添加文字水印
C# 给图片添加文字水印
|
前端开发 JavaScript
NaiveUI中看起来没啥用的组件(文字渐变)实现原来这么简单
用不到80行代码复原了NaiveUI中的渐变文字组件,内容不多,非常简单,小小娱乐一次。。。。。。。
382 0
|
架构师 开发者
图片和文字控件|学习笔记
快速学习图片和文字控件。
|
测试技术 Go Android开发