相信各位在进行开发的时候都遇到过上下结构的按钮，iOS按钮默认结构是左图片右文字。还记得以前才学的时候傻傻的用四个按钮做背景，上面放四个imgV和四个label来适配，那酸爽比大师夏天的脚还酸爽！(嘿嘿，大师估计看不到这篇文章)。闲话不说了，我们先看效果图
效果图
效果图如上，这个图可能看的不太清晰,那我把在xib里适配的图发给你们看看
xib原图
接下来我来列举下写出该效果遇到的各种坑
-
坑1使用UIEdgeInsetsMake来改变偏移量
//文字距离上边框的距离增加imageView的高度，距离左边框减少imageView的宽度，
距离下边框和右边框距离不变
[btn setTitleEdgeInsets:
UIEdgeInsetsMake(btn.imageView.frame.size.height ,- btn.imageView.frame.size.width, 0.0,0.0)];
//图片距离右边框距离减少图片的宽度，其它不边
[btn setImageEdgeInsets:
UIEdgeInsetsMake(0.0, 0.0,0.0, -btn.titleLabel.bounds.size.width)];
这里设置的偏移量不知道大家理解不理解，当设置ImageEdgeInsets的时候就是UIEdgeInsetsMake(图片距离按钮顶部的偏移量,图片距离按钮左边的偏移量,图片距离按钮底部的偏移量,图片距离右边文字的偏移量)，当设置TitleEdgeInsets的时候就是UIEdgeInsetsMake(文字距离按钮顶部的偏移量,文字距离左边图片的偏移量,文字距离按钮底部的偏移量,文字距离按钮右边的偏移量)。是一个倒时针的一个顺序。
因为图片加文字一起本来是居中的，所以这里如果将文字向左偏移图片的宽度，那么文字就相当于居中了。而图片如果向上有个偏移量和向右有个偏移量，那么就可以实现上图片，下文字的效果，当然这里的偏移量需要你自己计算了。
但是
这里有一个问题如果项目中还有其他类似结构的按钮，如果frame不一样的话那就不行了.....并且我没有写死偏移量的，代码如下：
CGFloat oldImgOffX = btn.imageEdgeInsets.left;
CGFloat newImgOffX = btn.frame.size.width/2.0 - btn.imageView.frame.size.width/2.0;
//这里两者相减即得到图片向左的偏移量正好位于中心部位
[btn setImageEdgeInsets:UIEdgeInsetsMake(20,newImgOffX-oldImgOffX,0.0,0.0)];
理想中我可以开着载着我珂的宝马车去啪了，现实却是早上起来发现昨晚发大水了....（这里我也不知道为啥，求解答）
发完大水之后貌似我的脑袋清楚了一点，我记得有个layoutSubviews方法，这里苹果的官方文档解释
在苹果的官方文档中强调: You should override this method only if the autoresizing behaviors of the subviews do not offer the behavior you want.layoutSubviews, 当我们在某个类的内部调整子视图位置时，需要调用。反过来的意思就是说：如果你想要在外部设置subviews的位置，就不要重写。
找到了这个方法，于是我就创建了一个继承于UIButton的子类，然后重写了这个方法，在这里调整image和label的坐标位置
// 更改image的中心坐标
CGPoint imageCenter = self.imageView.center;
imageCenter.x = self.frame.size.width/2;
imageCenter.y = (self.frame.size.height-self.imageView.frame.size.height)/2;
self.imageView.center = imageCenter;
// 更改label的中心坐标
CGRect labelFrame = self.titleLabel.frame;
labelFrame.origin.x = 0;
labelFrame.origin.y = CGRectGetMaxY(self.imageView.frame) + 5;
labelFrame.size.width = self.frame.size.width;
self.titleLabel.frame = labelFrame;
self.titleLabel.textAlignment = NSTextAlignmentCenter;
```
这里大家可以根据需要调整位置。调整按钮的结构终于实现效果了。
###接下来就剩角标了，这个效果也有一个很大的坑！
角标这里由于角标上的值是变化的，所以我还是在上面那个继承于UIButton的子类中**写了一个badgeString的属性，并且实现了它的set方法，在set方法里面创建了一个label，设置好frame和text**。
#但是！！！
这个角标的位置竟然不是按照我所料想的那样在它该在的位置上，本来明明约的是蜗壳去嘿嘿嘿~！结果一到地方，竟然是凤凤！！！？？？
**不能忍！**
经过一顿毒打之后，凤凤终于把蜗壳还给我了，这里是**由于xib控件frame的问题，如果我们xib里面用的是6s的尺寸拉的约束，那么当运行在5s上面的时候，虽然位置更改过来了，但是坐标输出还是相对于6s的坐标**那么问题来了，why？原因在[这里](http://blog.csdn.net/jeffasd/article/details/50738536)，知道原因那就好办了，这里我在创建完角标之后，我在**layoutSubviews之后，在设置完image和label的坐标之后，再设置我角标的坐标**。完美，手工！
**源代码我上传到[GitHub](https://github.com/LucasDang/LCVerticalBadgeBtn.git)上了**,码字不易，还望多多支持。有任何不对的地方，请联系我。
**邮箱：<lco0127@qq.com>**
网友评论