每日更新关注: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