每日更新关注:http://weibo.com/hanjunqiang 新浪微博！
前言：最近常常用到按钮和相应标题的组合，当按钮设置图片加标题时，触发范围较小，不易触发，最重要的是还要调试偏移量，相信研究过的开发者都很头疼这一点，那我我就想解决，于是在网上研究了一番，个人总结封装了一个，觉得很棒，推荐给大家！
下面看教程：
整体是对UIButton的自定义封装：
//UIButton+UIButtonSetEdgeInsets.h #import <UIKit/UIKit.h> @interface UIButton (CenterImageAndTitle) //上下居中，图片在上，文字在下 - (void)verticalCenterImageAndTitle:(CGFloat)spacing; - (void)verticalCenterImageAndTitle; //默认6.0 //左右居中，文字在左，图片在右 - (void)horizontalCenterTitleAndImage:(CGFloat)spacing; - (void)horizontalCenterTitleAndImage; //默认6.0 //左右居中，图片在左，文字在右 - (void)horizontalCenterImageAndTitle:(CGFloat)spacing; - (void)horizontalCenterImageAndTitle; //默认6.0 //文字居中，图片在左边 - (void)horizontalCenterTitleAndImageLeft:(CGFloat)spacing; - (void)horizontalCenterTitleAndImageLeft; //默认6.0 //文字居中，图片在右边 - (void)horizontalCenterTitleAndImageRight:(CGFloat)spacing; - (void)horizontalCenterTitleAndImageRight; //默认6.0 @end
每日更新关注:http://weibo.com/hanjunqiang 新浪微博！
//#import "UIButton+CenterImageAndTitle.m"
#import "UIButton+CenterImageAndTitle.h"
@implementation UIButton (CenterImageAndTitle)
- (void)verticalCenterImageAndTitle:(CGFloat)spacing
{
// get the size of the elements here for readability
CGSize imageSize = self.imageView.frame.size;
CGSize titleSize = self.titleLabel.frame.size;
// lower the text and push it left to center it
self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, - (imageSize.height + spacing/2), 0.0);
// the text width might have changed (in case it was shortened before due to
// lack of space and isn't anymore now), so we get the frame size again
titleSize = self.titleLabel.frame.size;
// raise the image and push it right to center it
self.imageEdgeInsets = UIEdgeInsetsMake(- (titleSize.height + spacing/2), 0.0, 0.0, - titleSize.width);
}
- (void)verticalCenterImageAndTitle
{
const int DEFAULT_SPACING = 6.0f;
[self verticalCenterImageAndTitle:DEFAULT_SPACING];
}
- (void)horizontalCenterTitleAndImage:(CGFloat)spacing
{
// get the size of the elements here for readability
CGSize imageSize = self.imageView.frame.size;
CGSize titleSize = self.titleLabel.frame.size;
// lower the text and push it left to center it
self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, imageSize.width + spacing/2);
// the text width might have changed (in case it was shortened before due to
// lack of space and isn't anymore now), so we get the frame size again
titleSize = self.titleLabel.frame.size;
// raise the image and push it right to center it
self.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + spacing/2, 0.0, - titleSize.width);
}
- (void)horizontalCenterTitleAndImage
{
const int DEFAULT_SPACING = 6.0f;
[self horizontalCenterTitleAndImage:DEFAULT_SPACING];
}
- (void)horizontalCenterImageAndTitle:(CGFloat)spacing;
{
// get the size of the elements here for readability
// CGSize imageSize = self.imageView.frame.size;
// CGSize titleSize = self.titleLabel.frame.size;
self.titleEdgeInsets = UIEdgeInsetsMake(0.0, 0.0, 0.0, - spacing/2);
self.imageEdgeInsets = UIEdgeInsetsMake(0.0, - spacing/2, 0.0, 0.0);
}
- (void)horizontalCenterImageAndTitle;
{
const int DEFAULT_SPACING = 6.0f;
[self horizontalCenterImageAndTitle:DEFAULT_SPACING];
}
- (void)horizontalCenterTitleAndImageLeft:(CGFloat)spacing
{
// get the size of the elements here for readability
// CGSize imageSize = self.imageView.frame.size;
// CGSize titleSize = self.titleLabel.frame.size;
self.imageEdgeInsets = UIEdgeInsetsMake(0.0, - spacing, 0.0, 0.0);
}
- (void)horizontalCenterTitleAndImageLeft
{
const int DEFAULT_SPACING = 6.0f;
[self horizontalCenterTitleAndImageLeft:DEFAULT_SPACING];
}
- (void)horizontalCenterTitleAndImageRight:(CGFloat)spacing
{
// get the size of the elements here for readability
CGSize imageSize = self.imageView.frame.size;
CGSize titleSize = self.titleLabel.frame.size;
// lower the text and push it left to center it
self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, 0.0);
// the text width might have changed (in case it was shortened before due to
// lack of space and isn't anymore now), so we get the frame size again
titleSize = self.titleLabel.frame.size;
// raise the image and push it right to center it
self.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + imageSize.width + spacing, 0.0, - titleSize.width);
}
- (void)horizontalCenterTitleAndImageRight
{
const int DEFAULT_SPACING = 6.0f;
[self horizontalCenterTitleAndImageRight:DEFAULT_SPACING];
}
@end
每日更新关注:http://weibo.com/hanjunqiang 新浪微博！
使用方法非常简单：
//在使用的地方引入 #import "UIButton+CenterImageAndTitle.h" #define kScreenHeight [[UIScreen mainScreen] bounds].size.height //屏幕高度 #define kScreenWidth [[UIScreen mainScreen] bounds].size.width //屏幕宽度
为了展现所有效果，简单展示一下：
for (int i = 0; i< 6; i++)
{
UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];
button1.frame = CGRectMake(60, 80+i*60, kScreenWidth-60*2, 45);
button1.tag = i;
button1.backgroundColor = [UIColor greenColor];
button1.titleLabel.font = [UIFont systemFontOfSize:15];
[button1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button1 setImage:[UIImage imageNamed:@"good"] forState:UIControlStateNormal];
[button1 setTitle:@"小韩哥的博客更新了" forState:UIControlStateNormal];
[button1 addTarget:self action:@selector(testAction:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button1];
switch (i)
{
case 0:
{
//系统默认图片在左，文字在右，间隔为0
}
break;
case 1:
{
//上下居中，图片在上，文字在下
[button1 verticalCenterImageAndTitle:10.0f];
}
break;
case 2:
{
//左右居中，文字在左，图片在右
[button1 horizontalCenterTitleAndImage:50.0f];
}
break;
case 3:
{
//左右居中，图片在左，文字在右
[button1 horizontalCenterImageAndTitle:50.0f];
}
break;
case 4:
{
//文字居中，图片在左边
[button1 horizontalCenterTitleAndImageLeft:50.0f];
}
break;
case 5:
{
//文字居中，图片在右边
[button1 horizontalCenterTitleAndImageRight:50.0f];
}
break;
default:
break;
}
}
每日更新关注:http://weibo.com/hanjunqiang 新浪微博！
最后是点击事件了：
- (void)testAction:(UIButton *)sender
{
NSLog(@"testAction:%ld", (long)sender.tag);
}最终效果：
如有问题可通过微博互动联系我哦！
每日更新关注:http://weibo.com/hanjunqiang 新浪微博！
Demo下载地址：https://github.com/XiaoHanGe/UIButtonCenterTitleAndImage
QQ群：446310206
