UIButton之EdgeInsets相关

最新推荐文章于 2024-03-14 11:27:43 发布

NiklausC

最新推荐文章于 2024-03-14 11:27:43 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

文章标签： uibutton 布局 imageview titleLabel

本文链接：https://blog.youkuaiyun.com/u013883974/article/details/52775143

本文探讨了iOS中UIButton的image和title布局方式，并介绍了通过EdgeInsets调整布局的具体方法。文中提供了多种EdgeInsets设置实例，帮助读者理解如何灵活调整按钮元素的位置。

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

iOS 默认button的image和title布局是，image在左title在右。平时写button的时候需要调整title和image的位置，例如image和title是上下位置等等情况。之前碰到这样的需求，总是参照网上的方法设置EdgeInsets就ok了，也没细想；最近想看看到底为什么是这样设置，写了一个简易的project，来探探究竟。

网上通常的两种做法是：

1.重写UIButton的imageView和titleLabel的布局方法，自定义一个button，你可以随心所欲的定制，对button要求较高；

2.利用EdgeInsets来调整image和title的位置；

主要谈谈对方法2的一些理解

注：从上到下4个button依次为btn,btn1,btn2,btn3

btn的EdgeInsets为image UIEdgeInsetsMake(0,btn.titleLabel.frame.size.width/2.0,0,-btn.titleLabel.frame.size.width/2.0)

btn1的EdgeInsets为image UIEdgeInsetsMake(0,btn1.titleLabel.frame.size.width,0,0)

btn2的EdgeInsets为image和title UIEdgeInsetsMake(0,0,0,0)

btn3的EdgeInsets为image UIEdgeInsetsMake(0,0,0,-btn3.titleLabel.frame.size.width)和title EdgeInsets为UIEdgeInsetsMake(0,0,0,-btn3.titleLabel.frame.size.width)

首先，button默认布局image距离左边距和title距离右边距是相等的

其次，btn和btn1的效果是相同的，所以可以理解为，向右偏移X距离等同于同时向左偏移-x/2.0和向右偏移x/2.0，在button中，左偏移和右偏移只改变位置，不会改变image或title的形状；但是上偏移和下偏移如果设置的超出button的size大小，则会出现image被压缩的情况（title不会），这里可以根据计算自己设置下image和title的上下偏移。

需要补充的是UIEdgeInsetsMake(0,0,0,0)的4个参数，依次为上、左、下、右四个偏移，即逆时针分布；沿着四个方向移距离参数为负，反之为正。例如，改变第一个参数，上偏移，如果需要往上移动100距离，即和参数名方向相同，参数值为负，设为-100。

了解了这些后，就可以根据计算，随意的布局button中的image和title的位置，而不用机械地参照网上的代码

附：位置计算可以参照