• 首页
  • 关于
    • zerone-z photo

      zerone-z

      记录下自己学习的过程、点滴,也为了分享自己的收获。

    • Learn More
    • Email
    • Github
  • 博客
    • 博客
    • 标签
  • 随笔
  • 项目

UIButton 图片标题位置

07 Aug 2017

Reading time ~2 minutes

Overview

UIButton默认图片和标题的位置是左右结构,即图片在左标题在右,但是在开发过程中经常遇到需要调整Button的图片和标题的位置。其实现方法大致有以下几种:

  1. 重新自定义一个View,然后设置位置布局,添加手势。
  2. 自定义一个UIButton,重写方法,设置布局。
  3. 直接用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);