iOS中 按钮和标题完美各种排列／完美教程 韩俊强的博客

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