美文网首页
按钮文字自动换行并字体大小适配

按钮文字自动换行并字体大小适配

作者: 草莓味辣妹 | 来源:发表于2018-08-18 17:43 被阅读0次

    实现需求

    由于公司项目开发需求

    按钮大小固定,按钮内有图片与文字,图片在左,文字在右,图片与文字之间有固定间距。按钮文字需要多语言适配,也就是说当手机更换系统语言时,按钮文字也需要变更成对应语言的文字,因此会导致文字长度变更,可能超过按钮长度。

    因此需要实现文字自动换行并且字体自适应

    不过自动换行和字体自适应貌似有冲突

    为了显示效果正常,文字不能超过两行,若超过两行字体自适应

    实现方法

    首先图片和文字label使用的是UIButton自带的imageView和titleLabel

    分别设置图片和文字

    UIButton *btn = [[UIButton alloc] init];

    [btn setTitle:@"这是一个Button" forState:UIControlStateNormal];

    [btn setImage:[UIImage imageNamed:imgName] forState:UIControlStateNormal];

    //获取图片和文字label的宽度以及按钮长度

     CGFloatimageViewWidth =CGRectGetWidth(btn.imageView.frame);

        CGFloat labelWidth = CGRectGetWidth(btn.titleLabel.frame);

        CGFloatbuttonLen = btn.frame.size.width;

    //计算图片和文字作为一个整体居中时距离按钮两端的边距

        CGFloatedgeLen = (buttonLen-(imageViewWidth+labelWidth+9))/2;

    //计算图片和文字和边界约束

        btn.imageEdgeInsets=UIEdgeInsetsMake(0, edgeLen,0, edgeLen+9);

       btn.titleEdgeInsets=UIEdgeInsetsMake(0, edgeLen+9,0, edgeLen);

    效果如图所示:

    设置按钮图片和文字

    上面两行代码基本固定了图片位置和titleLabel位置和大小,当更改文字时可能由于文字长度超出titleLabel的宽度,文字无法完全显示

    按钮文字显示不全

    (目前)解决办法是,获取文字长度,重新设定图片与文字的边界约束

    1.首先获取文字长度,使用的是boundingRectWithSize这个API,这个方法需要设定一些参数例如文字大小排版格式最大宽度等,方法返回一个rect参数。

    CGSize maxSize = CGSizeMake(buttonLen-3*imageViewWidth-9.f, self.loginButton.frame.size.height);

    NSMutableParagraphStyle* style = [[NSMutableParagraphStyle alloc] init];

    NSStringDrawingOptions options = NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading;

    UIFont* font = [UIFont systemFontOfSize:16.f];

    NSDictionary* attributes =@{NSFontAttributeName:font, NSParagraphStyleAttributeName:style};

    CGRect rect = [[LoginUtil loginBtnTextWithType:self.loginType] boundingRectWithSize:maxSize options:options attributes:attributes context:nil];

    当文字长度超过设定的最大宽度时,返回的rect是文字换行后的rect,rect宽度为最大宽度,高度为换行后的高度

    2.重新设定图片和文字的边界约束

    CGFloat buttonLen = self.btn.frame.size.width;

    CGFloat imageViewWidth = CGRectGetWidth(self.btn.imageView.frame);

    CGFloat labelWidth = rect.size.width;

    CGFloat edgeLen = (buttonLen-(imageViewWidth+labelWidth+9))/2;

    self.btn.imageEdgeInsets = UIEdgeInsetsMake(0, edgeLen, 0, edgeLen+9);

    self.btn.titleEdgeInsets = UIEdgeInsetsMake(0, edgeLen+9, 0, edgeLen);

    3.一些注意和疑问的点

        想让文字换行,必须设置titleLabel的numberOfLines为0,否则重新设置边界约束后文字长度超过约束长度而又没设置换行时文字依然显示不全

    当文字换行后,如果文字高度超过button高度,文字显示会超出button,但是已经设定边界约束了,为什么还会超出?猜测可能是numberOfLines为0与边界约束的优先级不同

    当_showText.titleLabel.numberOfLines = 2时,titleLabel的高度固定了,就是两行文字的高度,那么当文字超过两行时,文字显示不全,并不会超出button范围显示多行

    当设置titleLabel.adjustsFontSizeToFitWidth = YES(文字大小自适应)时,若_showText.titleLabel.numberOfLines = 2

    文字大小自适应

    若_showText.titleLabel.numberOfLines = 0,则字体大小不改变,显示多行

    多行

    由此可见,只有当Label的大小固定时,文字大小才能自适应变化。

    SizeToFit

    相关文章

      网友评论

          本文标题:按钮文字自动换行并字体大小适配

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