iOS UIButton图文调整

原创已于 2023-02-13 19:19:38 修改 · 712 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #objective-c #开发语言

于 2022-12-06 17:53:50 首次发布

ios开发专栏收录该内容

10 篇文章

订阅专栏

本文介绍了解决 UIButton 图文布局问题的方法，包括图文间距控制及不同布局方式（如左图右文、上图下文等）。提供了实用代码示例，帮助开发者在不同 iOS 版本下实现灵活的 UIButton 布局。

一、前言

UIButton的Image默认在左边，title默认在右边。并且在iOS系统低版本SDK中并没有很好用的API来控制两者的相对位置和两者的间距问题，这里提供一种解决方案，可以直接拷贝到项目中使用。如果出现图片、文案显示不全，则可能UIButton的高度、宽度不符合要求，需要您重新计算调整一下。

二、具体解决方案

1、左image + 右title

CGFloat spacing = 8;  //图文间距
_yourBtn.imageEdgeInsets = UIEdgeInsetsMake(0, - (spacing / 2), 0, spacing / 2);
_yourBtn.titleEdgeInsets = UIEdgeInsetsMake(0, spacing / 2, 0, - (spacing / 2));

2、左title + 右image

CGFloat spacing = 8;  //图文间距
CGFloat labelWidth = [_yourBtn.titleLabel.text boundingRectWithSize:CGSizeZero options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:_yourBtn.titleLabel.font} context:nil].size.width;
CGFloat imageWidth = _yourBtn.imageView.image.size.width;
_yourBtn.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth + spacing / 2, 0, - (labelWidth + spacing) / 2);
_yourBtn.titleEdgeInsets = UIEdgeInsetsMake(0, - (imageWidth + spacing / 2), 0, imageWidth + spacing / 2);

//补充一种transform翻转的用法(好用)
CGFloat space = 10;
_yourBtn.transform = CGAffineTransformMakeScale(-1.0, 1.0);
_yourBtn.titleLabel.transform =  CGAffineTransformMakeScale(-1.0, 1.0);
_yourBtn.imageView.transform =  CGAffineTransformMakeScale(-1.0, 1.0); 
_yourBtn.imageEdgeInsets = UIEdgeInsetsMake(0, -space/2, 0, space/2);
_yourBtn.titleEdgeInsets = UIEdgeInsetsMake(0, space/2, 0, -space/2);

3、上image + 下title

CGFloat spacing = 8;  //图文间距
CGSize labelSize = [_yourBtn.titleLabel.text boundingRectWithSize:CGSizeZero options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:_yourBtn.titleLabel.font} context:nil].size;
CGSize imageSize = _yourBtn.imageView.image.size;
CGFloat totalHeight = labelSize.height + imageSize.height + spacing;
_yourBtn.imageEdgeInsets = UIEdgeInsetsMake( - (totalHeight - imageSize.height) / 2, labelSize.width / 2, (totalHeight - imageSize.height) / 2, - labelSize.width / 2);
_yourBtn.titleEdgeInsets = UIEdgeInsetsMake( (totalHeight - labelSize.height) / 2, - imageSize.width / 2, - ((totalHeight - labelSize.height) / 2), imageSize.width / 2);

4、上title + 下image

CGFloat spacing = 8;  //图文间距
CGSize labelSize = [_yourBtn.titleLabel.text boundingRectWithSize:CGSizeZero options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:_yourBtn.titleLabel.font} context:nil].size;
CGSize imageSize = _yourBtn.imageView.image.size;
CGFloat totalHeight = labelSize.height + imageSize.height + spacing;
_yourBtn.imageEdgeInsets = UIEdgeInsetsMake( (totalHeight - imageSize.height) / 2, labelSize.width / 2, - (totalHeight - imageSize.height) / 2, - labelSize.width / 2);
_yourBtn.titleEdgeInsets = UIEdgeInsetsMake( - (totalHeight - labelSize.height) / 2, - imageSize.width / 2, ((totalHeight - labelSize.height) / 2), imageSize.width / 2);