UIButton将title和image放置在任意位置上

最新推荐文章于 2025-07-19 15:02:10 发布

小Q_K

最新推荐文章于 2025-07-19 15:02:10 发布

阅读量431

点赞数

CC 4.0 BY-SA版权

分类专栏： iOS 文章标签： UIButton EdgeInsets

本文链接：https://blog.youkuaiyun.com/ITMan_K/article/details/60961231

iOS 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何使用UIButton的contentEdgeInsets属性，结合UIImageView和UILabel的相对位置，来实现title和image在按钮上的任意布局。通过调整EdgeInsets，可以实现图片与文字的间距、左右或上下对齐等多种效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果图:

// 设置内容对齐方式,并设置内容距离四周距离(上左下右)
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
button.contentEdgeInsets = UIEdgeInsetsMake(0,10, 0, 0);
// 利用EdgeInsets属性将title和image放置在任意位置上,实现上图效果
/*
UIButton自带了UIImageView和UILabel两个控件,可以显示image和title,通过imageEdgeInsets和titleEdgeInsets属性可以将image和title放置在任意位置上
其实UIImageView和UILabel是相互联系的,在设置属性时需要将两者当做一个整体来考虑
实时计算图片宽高 CGSize imageSize = button.imageView.frame.size;
实时计算文字宽高 CGSize stringSize = [button.titleLabel.text sizeWithAttributes:@{NSFontAttributeName:button.titleLabel.font}];
*/
#define UI_SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width
#define UI_BUTTON_HEIGH 49
// 在默认情况下,图片在前文字在后显示,且中间没有间距（如button1）
[button1 setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[button1 setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
// 让图片和文字之间间距为10（如button2）
[button2 setImageEdgeInsets:UIEdgeInsetsMake(0, (UI_SCREEN_WIDTH-imageSize.width-stringSize.width-10)/2, 0, (UI_SCREEN_WIDTH-imageSize.width-stringSize.width-10)/2+10)];
[button2 setTitleEdgeInsets:UIEdgeInsetsMake(0, (UI_SCREEN_WIDTH-imageSize.width-stringSize.width-10)/2+10, 0, (UI_SCREEN_WIDTH-imageSize.width-stringSize.width-10)/2)];
// 让图片距离右侧边缘10,让文字距离左侧边缘10（如button3）
[button3 setImageEdgeInsets:UIEdgeInsetsMake(0, UI_SCREEN_WIDTH-imageSize.width-10, 0, 10-stringSize.width)];
[button3 setTitleEdgeInsets:UIEdgeInsetsMake(0, 10-imageSize.width, 0, UI_SCREEN_WIDTH-stringSize.width-10)];
// 让图片距离上侧边缘10,让文字距离下侧边缘10（如button4）
[button4 setImageEdgeInsets:UIEdgeInsetsMake(10, 0, UI_BUTTON_HEIGH-10-imageSize.height, 0)];
[button4 setTitleEdgeInsets:UIEdgeInsetsMake(UI_BUTTON_HEIGH-10-stringSize.height, 0, 10, 0)];
// 让图片和文字都居中显示,且图片距离上侧边缘5,文字距离下侧边缘5（如button5）
[button5 setImageEdgeInsets:UIEdgeInsetsMake(5, (UI_SCREEN_WIDTH-imageSize.width)/2, UI_BUTTON_HEIGH-5-imageSize.height, (UI_SCREEN_WIDTH-imageSize.width)/2-stringSize.width)];
[button5 setTitleEdgeInsets:UIEdgeInsetsMake(UI_BUTTON_HEIGH-5-stringSize.height, (UI_SCREEN_WIDTH-stringSize.width)/2-imageSize.width, 5, (UI_SCREEN_WIDTH-stringSize.width)/2)];