iOS Button图文混排的四种实现方式

Demo:ButtonAlignmentDemo

方法一:设置 imageEdgeInsets、titleEdgeInsets

思路:先计算出原始距离 space,在此基础上将内置控件移位,如果对间隔有需求,记得最后调整 contentEdgeInsets

  • 左文右图 (没有间距需求可以直接设置 semanticContentAttribut 属性)

    • 将文字和图片移动相应的位置
    • 如果有间距需要,那么记得最后调整 contentEdgeInsets
  • 上下排布

    • 先将图片和文字都水平移动至中间
    • 将图片和文字各自纵向移动,移动距离是 另一控件.height*0.5,方向相反
    • 有间距需要,则图片和文字各自上下移动,移动距离是 间距*0.5,方向相反
    • 调整 contentEdgeInsets

方法二:利用 NSAttributedString 实现

思路:image + \n + title

步骤:
1> 利用 NSTextAttachment 在属性字符串上添加图片

NSTextAttachment *attachment = [NSTextAttachment new];
attachment.image = image;
attachment.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
NSAttributedString *imgAttStr = [NSAttributedString attributedStringWithAttachment:attachment];

2> 使用 \n 实现上下分行

NSMutableAttributedString *attr = [[NSMutableAttributedString alloc] init];
[attr appendAttributedString:imgAttStr];
// \n
[attr appendAttributedString:[[NSAttributedString alloc] initWithString:@"\n"]];
// title
[attr appendAttributedString:[[NSAttributedString alloc] initWithString:title attributes:attributes]];

3> 追加 paragraphStyle 设置行间距

NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
style.lineBreakMode = NSLineBreakByTruncatingTail;
style.lineSpacing = lineGap;
style.alignment = NSTextAlignmentCenter;
// ! 使用 addAttribute 追加属性,不要使用 setAttributes,会覆盖
[attr addAttribute:NSParagraphStyleAttributeName value:style range:NSMakeRange(0, attr.length)];

4> 构造 button,设置 titleLabel,使 label 可以接收 \n

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
// 设置 titleLabel 可接收 '\n'
btn.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
btn.titleLabel.textAlignment = NSTextAlignmentCenter;
[btn setAttributedTitle:attr.copy forState:UIControlStateNormal];

5> 如果图片要 resize的话,实现 resize方法

+ (UIImage *)resize:(UIImage *)image size:(CGSize)size {
    if (CGSizeEqualToSize(image.size, size)) return image;
    
    CGRect rect = CGRectMake(0, 0, size.width, size.height);
    CGImageAlphaInfo alpha = CGImageGetAlphaInfo(image.CGImage);
    BOOL hasAlpha = (alpha == kCGImageAlphaFirst ||
                     alpha == kCGImageAlphaLast ||
                     alpha == kCGImageAlphaPremultipliedFirst ||
                     alpha == kCGImageAlphaPremultipliedLast);
    UIGraphicsBeginImageContextWithOptions(rect.size, !hasAlpha, 0.0f);
    [image drawInRect:rect];
    
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

方法三:自定义 Button,重写rectForContentRect:方法

- (CGRect)titleRectForContentRect:(CGRect)contentRect;  
- (CGRect)imageRectForContentRect:(CGRect)contentRect;

具体实现可参考:
https://github.com/LQi2009/LQRelayoutButton/blob/master/LQRelayoutButton/obj_sub/LQRelayoutButton.m


方法四:自定义 Button,创建 my_imgView 和 my_titleLabel
最稳的实现方式,同时也是最费劲的方式。

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