IOS 小常识
2:按钮的图与标题位置调整
如图：
这5张图中，最左边的是正常的按钮图文排列，图左文右。另外4张分别是图左／图右／图上／图下，且图片与文字之间的距离为3。
那么，改如何达到这样的效果呢？不多说了，上代码：
这一段代码是自定义的图片方向枚举类型。
typedef NS_ENUM(NSInteger, ImageDirection){
Top = 1,
Left,
Bottom,
Right
};
这一段代码是一个方法直接拖进工程调用就可以了。
#pragma mark 按钮图片标题设置方法
/*图片标题设置方法
direction:图片的方向
space: 图片与标题之间的间隔
button: 要设置的按钮
*/
- (void)setImageDirection:(ImageDirection)direction andSpace:(int)space forButton:(UIButton *)button{
//获取图片等size 与title的size
CGSize imageSize = button.imageView.bounds.size;
CGSize titleSize = button.titleLabel.bounds.size;
//正常的按钮形式是图左，标题右
switch (direction) {
case Top://图在上，标题在下
{
//图上移自身高度与设定空隙的1/2
button.imageEdgeInsets = UIEdgeInsetsMake(imageSize.height/2.0+space/2.0, titleSize.width/2.0, -imageSize.height/2.0-space/2.0, -titleSize.width/2.0);
//标题下移自身高度与设定空隙的1/2
button.titleEdgeInsets = UIEdgeInsetsMake(-titleSize.height/2.0-space/2.0, -imageSize.width/2.0, titleSize.height/2.0+space/2.0, imageSize.width/2.0);
}
break;
case Left:
{
//图左移设定空隙的1/2
button.imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
//标题右移设定空隙的1/2
button.titleEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
}
break;
case Bottom:
{
//图下移自身宽度与设定空隙的1/2
button.imageEdgeInsets = UIEdgeInsetsMake(-imageSize.height/2.0-space/2.0, titleSize.width/2.0, imageSize.height/2.0+space/2.0, -titleSize.width/2.0);
//标题上移自身高度与设定空隙的1/2
button.titleEdgeInsets = UIEdgeInsetsMake(titleSize.height/2.0+space/2.0, -imageSize.width/2.0, -titleSize.height/2.0-space/2.0, imageSize.width/2.0);
}
break;
case Right:
{
//图左移设定空隙的1/2
button.imageEdgeInsets = UIEdgeInsetsMake(0, titleSize.width+space/2.0, 0, -titleSize.width-space/2.0);
//标题右移设定空隙的1/2
button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageSize.width-space/2.0, 0, imageSize.width+space/2.0);
}
break;
default:
break;
}
}
如果只是恰巧碰到这样的问题需要解决方法的看到这里就可以了。下面的想要深入了解研究一下的可以继续看。
按钮（UIButton）是开发项目最常用的控件之一，用于触发事件所用。事件触发方式20（严格来说是19种，最后一种是所有事件都会触发）种，触摸触发类的事件有9种，其中最为我们所熟悉
的是UIControlEventTouchUpInside。
今天跟大家讲一讲按钮的图片与标题位置问题。
按钮上可以放图片，放标题（title），系统会自动根据内容来进行排版格式。正常情况下，一般为图左文字右，图与标题之间的空隙近乎为0。如图：
但很多时候，我们所需要的并不是这样的样式。有可能我们需要一个图右文字左的，图上文字下的（这种最常见），图下文字上的。甚至为了凸显个性，而需要一些“杀马特家族”的按钮来撑场子。这个时候我们该怎么办能？本文今天就以比较常见的4种——图右文字左，图上文字下，以及图下文字上来进行讨论一下。嗯？你问我为什么只写了3个，第四个在哪？嗯，……
在讲解之前，先告诉大家一个好消息，那就是自定义图片文字格式其实很简单，只要修改两个属性就可以了。这两个属性分别是imageEdgeInsets 和 titleEdgeInsets，因为我们就是通过按钮的这两个属性来对按钮的图片和文字进行操作的。大家可以在xcode中查看一下imageEdgeInsets 和 titleEdgeInsets的定义，就会发现他们都是UIEdgeInsets这个结构体的。默认初始值为UIEdgeInsetsZero
这是xcode的原文
typedef struct UIEdgeInsets {
CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;
结构体包括4个浮点数的属性，按顺序为 上／左／下／右。这4个属性值默认为0。通过改变这4个属性的值就能对图片已经文字格式进行修改了。
好的，现在我们可以上干货了。我们先来讨论一下图上文字下的，
图上文字下：
在对图片与标题的位置格式进行修改之前，我们首先需要获取按钮图片与文字的宽高。
只需要两行代码：
//获取图片等size 与title的size
CGSize imageSize = button.imageView.bounds.size;
CGSize titleSize = button.titleLabel.bounds.size;
想要这种图上文字下的代码，我们应该怎么做呢。首先大家要明白，按钮的图片与文字排版其实是很规范的。那就是两者的中心点center.y值必定为按钮高的1/2，而图片视图左边缘（imageView.frame.origin.x）距离按钮的左边缘的距离与标题视图右边缘（titleLabel.frame.origin.x+titleLabel.frame.size.width）距离按钮的右边缘的距离是相等的。
所以如果你想要得到一个图片在上文字在下的按钮，你只需要把按钮的图片视图上移为图像视图高度的一半，标题视图下移为标题视图高度的一半。
代码如下：
//图上移自身高度的1/2
button.imageEdgeInsets = UIEdgeInsetsMake(imageSize.height/2.0, 0, -imageSize.height/2.0, 0);
//标题下移自身高度的1/2
button.titleEdgeInsets = UIEdgeInsetsMake(-titleSize.height/2.0,0, titleSize.height/2.0, 0);
代码中，imageEdgeInsets的top属性为正表示上移，bottom属性为负表示上移。titleEdgeInsets中同样如此。
到了这里，就够了吗？不，还不够。别忘了，还有左右方向的调整。图片视图要向右移动标题视图宽度的一半，标题视图也要左移图片视图宽度的一半。当然左右方向的移动规则同比上下放下的移动是一样的。
代码如下：
//图上移自身高度的1/2，右移标题视图宽度的1/2
button.imageEdgeInsets = UIEdgeInsetsMake(imageSize.height/2.0, titleSize.width/2.0, -imageSize.height/2.0, -titleSize.width/2.0);
//标题下移自身高度的1/2，左移图片视图宽度的1/2
button.titleEdgeInsets = UIEdgeInsetsMake(-titleSize.height/2.0, -imageSize.width/2.0, titleSize.height/2.0, imageSize.width/2.0);
那到了这里，完成了吗？不，还没完，因为只要稍微注意点，你就会发现各种各样的应用中都有对控件之间距离的追求。在大部分的ui设计中都会为控件之间留下一定空隙。所以我们嗨要在上下两个属性中对空隙进行一定调整。
代码如下（其中space为int型数据，当然浮点型更规范点，不过习惯于用整型，反正精度也不会有什么大影响。sapce的大小为3）：
//图上移自身高度与设定空隙的1/2，右移标题视图宽度的1/2
button.imageEdgeInsets = UIEdgeInsetsMake(imageSize.height/2.0+space/2.0, titleSize.width/2.0, -imageSize.height/2.0-space/2.0, -titleSize.width/2.0);
//标题下移自身高度与设定空隙的1/2，左移图片视图宽度的1/2
button.titleEdgeInsets = UIEdgeInsetsMake(-titleSize.height/2.0-space/2.0, -imageSize.width/2.0, titleSize.height/2.0+space/2.0, imageSize.width/2.0);
然后我们就会得到想要的图上文字下，两者之间空隙为3的效果图了。
这是效果图：
至于其他的几种图文位置的调整也是同样的调整法，尤其是图左文字右空隙为3的。只要调整3的空隙就可以了，怎么调整都可以按你自己喜欢的来。再多就是水了，这里就不多做介绍了。
易错点：
1.在图片与文字方向上下左右的正负调整中，一开始可能会不适应，搞出一些“杀马特”的家族成员来。不过只要多写写，适应了就好了。
结尾语：利用按钮的imageEdgeInsets 和 titleEdgeInsets这两个属性来调整按钮的图文格式，相对来说是最简单直接的调整方法了。除此之外，你还可以试着自定义一个按钮或者做一个view类型的伪按钮，再或者其他等方法来进行图文位置调整，想怎么玩都行。
相关资料网上也不少，这里就不多做讲解了，想深入的朋友可以自己去研究。
