iOS 坑的集中营iOS Developerios实用开发技巧

iOS 设置下划线与文字之间的距离

2017-05-11  本文已影响563人  踩坑小分队

富文本丰富了UITextView和和UILabel的展示文本的形式
设置下划线可以使用富文本进行设置,行了,闲话少说,直接上需求和样式吧。
需求就是:调整下下划线与文字之间的距离,因为使用富文本本身设置的下划线几乎是贴着文字展示的。

image.png

没有找到相关的方法进行设置<如果哪位大神找到的话,记得交流下>。
没有找到相关的设置方法,只能是歪门邪道的想了。
发现一个简单暴力<比较low,但是效果还不错>的方法。
原理效果如下:

image.png

大概的思路如下:
1、创建两个不管富文本,还是大小,什么属性都一样的UITextView或者UILabel。
2、一个只显示字儿(textView1),一个只显示下划线(textView2)
3、将textView2添加到textView1上面,并且textView2.y = 你想控制的距离
说白了就是给textView1搞个影子。
相关的注意事项都写在了注释中。

具体代码如下:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    NSString *contentStr = @"鲸属于脊索动物门,脊椎动物亚门,哺乳纲,真兽亚纲,包含了大约98种生活在海洋、河流中的胎生哺乳动物。中国海域就有30余种。“鲸”本身定义比较模糊,鲸目可以包含所有鲸类,还有特定科的鲸类。";
    
    // 设置下划线的颜色为透明,或者不设置
    _textView1 = [self createTextViewWithTextColor:[UIColor blackColor] underLineColor:[UIColor clearColor] withText:contentStr];
    _textView1.editable = NO;
    [_textView1 sizeToFit];
    [self.view addSubview:_textView1];
    
    CGRect textView1Frame = _textView1.frame;
    textView1Frame.size.height = 350;
    _textView1.frame = textView1Frame;
    
    _textView1.layer.borderColor = [UIColor redColor].CGColor;
    _textView1.layer.borderWidth = 1;
    
    
    // 设置字儿的颜色为透明
    _textView2 = [self createTextViewWithTextColor:[UIColor clearColor] underLineColor:[UIColor blueColor] withText:contentStr];
    // 关闭交互,不然会影响_textView1的滚动或者相关事件的响应
    _textView2.userInteractionEnabled = NO;
    // 得设置最大高度,不然在_textView1滚动的时候显示不全
    [_textView2 sizeToFit];
    // 背景颜色设置为透明,不然会影响_textView1的显示
    _textView2.backgroundColor = [UIColor clearColor];
    // 一定要添加在_textView1上面,不然滚动就不能玩儿了
    [_textView1 addSubview:_textView2];
    CGRect textView2Frame = _textView2.frame;
    // 这里设置的是下划线和字儿之间的距离
    textView2Frame.origin.y = 10;
    // 因为textView的_textView1.contentInset.left的关系,得设置偏左一些,不然会对应不上
    textView2Frame.origin.x = -_textView1.contentInset.left;
    _textView2.frame = textView2Frame;
    
}

/**
 创建一个textView

 @param textColor 字体的颜色
 @param underLineColor 下划线的颜色
 @param content 显示的内容
 */
- (UITextView *)createTextViewWithTextColor:(UIColor *)textColor underLineColor:(UIColor *)underLineColor withText:(NSString *)content
{
    UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(10, 30, KWidth-20, 0)];
    NSMutableAttributedString *attributedString = [self attributedStringForChat:content withColor:textColor withFontSize:[UIFont systemFontOfSize:25] withLineSpace:30 withUnderLineColor:underLineColor];
    textView.attributedText = attributedString;
    
    return textView;
}


/**
 设置富文本

 @param textString 富文本的内容
 @param color 文本的颜色
 @param font 文字的大小
 @param lineSpace 行间距
 @param underLineColor 下划线的颜色
 @return 富文本
 */
- (NSMutableAttributedString *)attributedStringForChat:(NSString *)textString withColor:(UIColor *)color withFontSize:(UIFont *)font withLineSpace:(CGFloat)lineSpace withUnderLineColor:(UIColor *)underLineColor{
    NSInteger strLength=textString.length;
    NSMutableAttributedString *attributedString=[[NSMutableAttributedString alloc] initWithString:textString];
    //字颜色
    [attributedString addAttribute:NSForegroundColorAttributeName value:color range:NSMakeRange(0, strLength)];
    //字大小
    [attributedString addAttribute:NSFontAttributeName value:font range:NSMakeRange(0, strLength)];
    //行间距
    NSMutableParagraphStyle *paragraphStyle=[[NSMutableParagraphStyle alloc] init];
    [paragraphStyle setLineSpacing:lineSpace];
    [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, strLength)];
    
    // 设置下划线
    [attributedString addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleSingle] range:NSMakeRange(0, 18)];
    
    [attributedString addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleThick] range:NSMakeRange(25, 10)];
    
    [attributedString addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleDouble] range:NSMakeRange(strLength-18, 10)];
    
    [attributedString addAttribute:NSUnderlineColorAttributeName value:underLineColor range:NSMakeRange(0, strLength)];
    
    
    return attributedString;
}

最终实现效果:


image.png

如有失误请各位路过大神即时指点,或有更好的做法,也请指点一二。

相关的<a href="https://github.com/RunOfTheSnail/SetUnderlineDemo">Demo参考地址</a>

上一篇下一篇

猜你喜欢

热点阅读