Overview
UIButton默认图片和标题的位置是左右结构,即图片在左标题在右,但是在开发过程中经常遇到需要调整Button的图片和标题的位置。其实现方法大致有以下几种:
- 重新自定义一个View,然后设置位置布局,添加手势。
- 自定义一个UIButton,重写方法,设置布局。
- 直接用UIButton的属性
titleEdgeInsets
、imageEdgeInsets
、contentEdgeInsets
设置位置。
下面主要介绍第三种方法的使用。
UIButton属性说明
UIButton有三个属性:titleEdgeInsets
、imageEdgeInsets
、contentEdgeInsets
,通过设置这三个属性,就可以实现所有需要的Button的样式,如:图片在上标题在下,图片在右标题在左。在调整位置之前,我们需要知道这三个属性所对应的位置关系。
titleEdgeInsets
是标题相对于其 上下左右 边缘的内边距。如果只有标题,那么标题的 上下左右 都是 相对于Button 的;如果同时有图片和标题,那么标题的 上下右 是 相对于Button 的, 左 是 相对于标题 的。
imageEdgeInsets
是图片相对于其 上下左右 边缘的内边距。如果只有图片,那么图片的 上下左右 都是 相对于Button 的;如果同时有图片和标题,那么图片的 上下左 是 相对于Button 的, 右 是 相对于标题 的。
contentEdgeInsets
是Button内的整个内容(包括图片、标题)相对于其 上下左右 边缘的内边距,通过它可以改变UIButton的大小。
ps:
titleEdgeInsets
、imageEdgeInsets
这两个属性的修改并不能改变UIButton的大小,而如果想改变UIButton的大小,可以使用属性contentEdgeInsets
。
以上介绍的三个属性的类型都为UIEdgeInsets
,表示上下左右的偏移量,具体含义如下:
top
为正数的时候,是往下偏移,为负数的时候往上偏移;left
为正数的时候往右偏移,为负数的时候往左偏移;bottom
为正数的时候往上偏移,为负数的时候往下偏移;right
为正数的时候往左偏移,为负数的时候往右偏移;
UIButton 图片标题位置设置
默认样式调整图片标题间距
let space: CGFloat = 20; // 间距
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: -space, bottom: 0, right: space);
button.contentEdgeInsets = UIEdgeInsets(top: 0, left: space, bottom: 0, right: 0);
图片在右边,标题在左,整体居中,调整间距
方法一:
let space: CGFloat = 20; // 间距
button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0);
button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0);
button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0);
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: -space, bottom: 0, right: space);
button.contentEdgeInsets = UIEdgeInsets(top: 0, left: space, bottom: 0, right: 0);
方法二:
let space: CGFloat = 20; // 间距
// 为了确保正确的获取标题的尺寸
button.contentEdgeInsets = UIEdgeInsets.zero;
button.imageEdgeInsets = UIEdgeInsets.zero;
button.titleEdgeInsets = UIEdgeInsets.zero;
button.setTitle(button.title(for: .normal), for: .normal);
button.setTitle(button.title(for: .disabled), for: .disabled);
button.layoutIfNeeded();
button.titleLabel?.sizeToFit();
// 获取图片、标题大小
let imHeight = button.currentImage!.size.height;
let imWidth = button.currentImage!.size.width;
let lblHeight = button.titleLabel!.frame.height;
let lblWidth = button.titleLabel!.frame.width;
// let lblHeight = button.titleLabel!.intrinsicContentSize.height;
// let lblWidth = button.titleLabel!.intrinsicContentSize.width;
// 位置设置
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: lblWidth, bottom: 0, right: -lblWidth);
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(imWidth + space), bottom: 0, right: (imWidth + space))
button.contentEdgeInsets = UIEdgeInsets(top: 0, left: space, bottom: 0, right: 0);
图片在下面,标题在上面,整体居中,调整间距
let space: CGFloat = 20; // 间距
// 为了确保正确的获取标题的尺寸
button.contentEdgeInsets = UIEdgeInsets.zero;
button.imageEdgeInsets = UIEdgeInsets.zero;
button.titleEdgeInsets = UIEdgeInsets.zero;
button.setTitle(button.title(for: .normal), for: .normal);
button.setTitle(button.title(for: .disabled), for: .disabled);
button.layoutIfNeeded();
button.titleLabel?.sizeToFit();
// 获取图片、标题大小
let imHeight = button.currentImage!.size.height;
let imWidth = button.currentImage!.size.width;
let lblHeight = button.titleLabel!.frame.height;
let lblWidth = button.titleLabel!.frame.width;
// let lblHeight = button.titleLabel!.intrinsicContentSize.height;
// let lblWidth = button.titleLabel!.intrinsicContentSize.width;
// 位置设置
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: lblWidth * 0.5, bottom: 0, right: -lblWidth * 0.5);
button.titleEdgeInsets = UIEdgeInsets(top: -(imHeight + lblHeight) * 0.5 - space, left: -imWidth * 0.5, bottom: (imHeight + lblHeight) * 0.5 + space, right: imWidth * 0.5);
button.contentEdgeInsets = UIEdgeInsets(top: lblHeight + space, left: -(lblWidth + imWidth - max(lblWidth, imWidth)) * 0.5, bottom: 0, right: -(lblWidth + imWidth - max(lblWidth, imWidth)) * 0.5);
图片在上面,标题在下,整体居中,调整间距
let space: CGFloat = 20; // 间距
// 为了确保正确的获取标题的尺寸
button.contentEdgeInsets = UIEdgeInsets.zero;
button.imageEdgeInsets = UIEdgeInsets.zero;
button.titleEdgeInsets = UIEdgeInsets.zero;
button.setTitle(button.title(for: .normal), for: .normal);
button.setTitle(button.title(for: .disabled), for: .disabled);
button.layoutIfNeeded();
button.titleLabel?.sizeToFit();
// 获取图片、标题大小
let imHeight = button.currentImage!.size.height;
let imWidth = button.currentImage!.size.width;
let lblHeight = button.titleLabel!.frame.height;
let lblWidth = button.titleLabel!.frame.width;
// let lblHeight = button.titleLabel!.intrinsicContentSize.height;
// let lblWidth = button.titleLabel!.intrinsicContentSize.width;
// 位置设置
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: lblWidth * 0.5, bottom: 0, right: -lblWidth * 0.5);
button.titleEdgeInsets = UIEdgeInsets(top: (imHeight + lblHeight) * 0.5 + space, left: -imWidth * 0.5, bottom: -(imHeight + lblHeight) * 0.5 - space, right: imWidth * 0.5)
button.contentEdgeInsets = UIEdgeInsets(top: 0, left: -(lblWidth + imWidth - max(lblWidth, imWidth)) * 0.5, bottom: lblHeight + space, right: -(lblWidth + imWidth - max(lblWidth, imWidth)) * 0.5);