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

实现需求

由于公司项目开发需求

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

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

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

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

实现方法

首先图片和文字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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,496评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,407评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,632评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,180评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,198评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,165评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,052评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,910评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,324评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,424评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,017评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2 353

推荐阅读更多精彩内容