使用UIButton巧妙布局，让你的iOS应用界面更美观

2023-09-28 23:57:22

在iOS应用开发中，UIButton是开发者们必不可少的控件。它不仅能设置各种样式，还能自定义添加图片和标题，可谓用途广泛。但当我们实际设计界面时，却常常会遇到与上图所示的默认样式不一致的情况。比如，图片和文字间距为10，图片距离左边的间距为10，标题距离右边为10，这就需要我们使用一些巧妙的方法来实现效果。

使用imageEdgeInsets实现图片偏移

要调整图片与标题的间距，我们可以使用imageEdgeInsets属性。该属性可以控制图片在按钮中的位置，从而实现偏移效果。具体使用方法如下：

let button = UIButton()
button.setImage(UIImage(named: "icon"), for: .normal)
button.setTitle("按钮标题", for: .normal)
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)

通过设置left属性为10，我们可以将图片向右偏移10个单位，从而调整图片和标题的间距。

使用contentEdgeInsets实现文字偏移

与imageEdgeInsets类似，contentEdgeInsets属性可以控制按钮的内容（包括标题）的位置。我们可以通过设置right属性来调整标题与按钮右边的间距：

let button = UIButton()
button.setImage(UIImage(named: "icon"), for: .normal)
button.setTitle("按钮标题", for: .normal)
button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10)

通过设置right属性为10，我们可以将标题向左偏移10个单位，从而调整标题与按钮右边的间距。

灵活运用titleEdgeInsets实现标题偏移

titleEdgeInsets属性专门用于控制标题的位置。它可以设置标题在按钮中的上、下、左、右四个方向的偏移量。如果我们只想调整标题与图片的间距，可以设置left属性：

let button = UIButton()
button.setImage(UIImage(named: "icon"), for: .normal)
button.setTitle("按钮标题", for: .normal)
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)

通过设置left属性为10，我们可以将标题向右偏移10个单位，从而调整标题与图片的间距。

巧妙组合，实现复杂布局

通过灵活组合上述方法，我们可以实现更加复杂的布局。例如，我们可以同时调整图片与标题的间距，并设置标题在按钮中的位置：

let button = UIButton()
button.setImage(UIImage(named: "icon"), for: .normal)
button.setTitle("按钮标题", for: .normal)
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)
button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10)
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)