UIButton水平居中、垂直居中按钮 image 和 title

一、组件：

1. header file:

//
//  UIButton+CenterAlignment.h
//  QZone
//
//  Created by Jones Duan on 14-7-30.
//  Copyright (c) 2014年 tencent. All rights reserved.
//

#import 

@interface UIButton (CenterAlignment)

/**
 *  水平居中按钮 image 和 title
 *
 *  @param spacing - image 和 title 的水平间距, 单位point
 */
- (void)horizontalCenterImageAndTitleWithSpacing:(float)spacing;

/**
 *  水平居中按钮 title 和 image
 *
 *  @param spacing - image 和 title 的水平间距, 单位point
 */
- (void)horizontalCenterTitleAndImageWithSpacing:(float)spacing;

/**
 *  垂直居中按钮 image 和 title
 *
 *  @param spacing - image 和 title 的垂直间距, 单位point
 */
- (void)verticalCenterImageAndTitleWithSpacing:(float)spacing;

@end

2. source file:

//
//  UIButton+CenterAlignment.m
//  QZone
//
//  Created by Jones Duan on 14-7-30.
//  Copyright (c) 2014年 tencent. All rights reserved.
//

#import "UIButton+CenterAlignment.h"

@implementation UIButton (CenterAlignment)

/*
 Note:
 
 defaults image left and title right, no spacing.
 
 imageEdgeInsets (top left bottom right) is the offset relative to titleLabel
 
 titleEdgeInsets (top left bottom right) is the offset relative to imageView
 
 忽删!!!
 */

/**
 *  水平居中按钮 image 和 title
 *
 *  @param spacing - image 和 title 的水平间距, 单位point
 */
- (void)horizontalCenterImageAndTitleWithSpacing:(float)spacing
{
    // left the image
    self.imageEdgeInsets = UIEdgeInsetsMake(0.0, -spacing, 0.0, 0.0);
    
    // right the text
    self.titleEdgeInsets = UIEdgeInsetsMake(0.0, 0.0, 0.0, -spacing);
}

/**
 *  水平居中按钮 title 和 image
 *
 *  @param spacing - image 和 title 的水平间距, 单位point
 */
- (void)horizontalCenterTitleAndImageWithSpacing:(float)spacing
{
    CGSize imageSize = self.imageView.frame.size;
    CGSize titleSize = [self.titleLabel.text boundingRectWithSize:self.bounds.size options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : self.titleLabel.font} context:nil].size;
    
    // get the width they will take up as a unit
    CGFloat totalWidth = (imageSize.width + titleSize.width + spacing);
    
    // right the image
    self.imageEdgeInsets = UIEdgeInsetsMake(0.0, 0.0, 0.0, -(totalWidth - imageSize.width) * 2);
    
    // left the text
    self.titleEdgeInsets = UIEdgeInsetsMake(0.0, -(totalWidth - titleSize.width) * 2, 0.0, 0.0);
}

/**
 *  垂直居中按钮 image 和 title
 *
 *  @param spacing - image 和 title 的垂直间距, 单位point
 */
- (void)verticalCenterImageAndTitleWithSpacing:(float)spacing
{
    // get the size of the elements here for readability
    CGSize imageSize = self.imageView.frame.size;
    //    CGSize titleSize = self.titleLabel.frame.size;
    CGSize titleSize = [self.titleLabel.text boundingRectWithSize:self.bounds.size options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : self.titleLabel.font} context:nil].size;
    // get the height they will take up as a unit
    CGFloat totalHeight = (imageSize.height + titleSize.height + spacing);
    
    // raise the image and push it right to center it
    self.imageEdgeInsets = UIEdgeInsetsMake(-(totalHeight - imageSize.height), 0.0, 0.0, -titleSize.width);
    
    // lower the text and push it left to center it
    self.titleEdgeInsets = UIEdgeInsetsMake(0.0, -imageSize.width, -(totalHeight - titleSize.height), 0.0);
}

@end

二、应用

1. verticalCenterImageAndTitleWithSpacing 应用

//
//  QZFeedSubscribeButton.h
//  QZone
//
//  Created by Jones Duan on 14-7-29.
//  Copyright (c) 2014年 tencent. All rights reserved.
//

#import 
#import "UIButton+CenterAlignment.h"

typedef NS_ENUM(NSInteger, QZFeedSubscribeButtonStatus) {
    kFeedSubscribeButtonStatusSubscribe   = 0,
    kFeedSubscribeButtonStatusUnsubscribe = 1,
};

@interface QZFeedSubscribeButton : UIButton

- (void)setSubscribeStatus:(QZFeedSubscribeButtonStatus)status;

@end

//
//  QZFeedSubscribeButton.m
//  QZone
//
//  Created by Jones Duan on 14-7-29.
//  Copyright (c) 2014年 tencent. All rights reserved.
//

#import "QZFeedSubscribeButton.h"
#import "QzoneThemeManager.h"
#import "UIColor+Theme.h"

@interface QZFeedSubscribeButton ()
{
    UIImage     *_plusInCircleImage;
    UIImage     *_plusInCircleImageClicked;
    
    UIImage     *_minusInCircleImage;
    UIImage     *_minusInCircleImageClicked;
}

@end

@implementation QZFeedSubscribeButton

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [self setTitleColor:[UIColor grayColor] forState:UIControlStateHighlighted];
        self.titleLabel.font = [UIFont systemFontOfSize:11.0];
        self.backgroundColor = [UIColor clearColor];
        
        // suscribe button internal view - plus image
        _plusInCircleImage = ImageInTheme(@"community/list_sub_btn.png");
        _plusInCircleImageClicked = ImageInTheme(@"community/list_sub_btn_click.png");
        
        // ussuscribe button internal view - minus image
        _minusInCircleImage = ImageInTheme(@"community/list_cancel_btn.png");
        _minusInCircleImageClicked = ImageInTheme(@"community/list_cancel_btn_click.png");
        
        // UIImage *btnBgImg = ResizeableImageInTheme(@"feed/feed_btn_middle.png");
        UIImage *btnBgClickImg = ResizeableImageInTheme(@"feed/feed_btn_middle_click.png");
        
        [self setBackgroundImage:nil forState:UIControlStateNormal];
        [self setBackgroundImage:nil forState:UIControlStateSelected];
        [self setBackgroundImage:btnBgClickImg forState:UIControlStateHighlighted];

    }
    return self;
}

- (void)setSubscribeStatus:(QZFeedSubscribeButtonStatus)status
{    
    switch (status) {
        case kFeedSubscribeButtonStatusSubscribe:
            [self setImage:_plusInCircleImage forState:UIControlStateNormal];
            [self setImage:_plusInCircleImageClicked forState:UIControlStateHighlighted];
            
            [self setTitle:@"立即订阅" forState:UIControlStateNormal];
            [self setTitleColor:DefaultLinkTextColorInTheme forState:UIControlStateNormal];
            [self setTitleColor:DefaultLinkTextHighlightedColorInTheme forState:UIControlStateHighlighted];
            
            break;
            
        case kFeedSubscribeButtonStatusUnsubscribe:
            [self setImage:_minusInCircleImage forState:UIControlStateNormal];
            [self setImage:_minusInCircleImageClicked forState:UIControlStateHighlighted];
            
            [self setTitle:@"取消订阅" forState:UIControlStateNormal];
            [self setTitleColor:DefaultDescriptionText2ColorInTheme forState:UIControlStateNormal];
            [self setTitleColor:DefaultButtonSelectedColorInTheme forState:UIControlStateHighlighted];
            
            break;
            
        default:
            break;
    }
    [self verticalCenterImageAndTitleWithSpacing:7.f];
}

@end

2. horizontalCenterTitleAndImageWithSpacing 应用

//
//  QZExpandAndFoldPasterButton.h
//  QZone
//
//  Created by Jones Duan on 14-7-28.
//  Copyright (c) 2014年 tencent. All rights reserved.
//

#import 
#import "UIButton+CenterAlignment.h"

typedef NS_ENUM(NSInteger, QZExpandAndFoldPasterButtonStatus) {
    kExpandAndFoldPasterButtonStatusExpand  = 0,
    kExpandAndFoldPasterButtonStatusFold    = 1,
};

@interface QZExpandAndFoldPasterButton : UIButton

- (void)setExpandAndFoldStatus:(QZExpandAndFoldPasterButtonStatus)status;

@end

//
//  QZExpandAndFoldPasterButton.m
//  QZone
//
//  Created by Jones Duan on 14-7-28.
//  Copyright (c) 2014年 tencent. All rights reserved.
//

#import "QZExpandAndFoldPasterButton.h"
#import "UIImage+Theme.h"
#import "QzoneThemeManager.h"

@interface QZExpandAndFoldPasterButton ()
{
    UIImage     *_expandImage;
    UIImage     *_foldImage;
}

@end

@implementation QZExpandAndFoldPasterButton

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [self setTitleColor:[UIColor grayColor] forState:UIControlStateHighlighted];
        self.titleLabel.font = [UIFont systemFontOfSize:14.5];
        self.backgroundColor = [UIColor clearColor];

        _expandImage = ImageInTheme(@"photoEdit/photo_edit_icon_pull_up.png");
        _foldImage = ImageInTheme(@"photoEdit/photo_edit_icon_pull_down.png");
    }
    return self;
}

- (void)setExpandAndFoldStatus:(QZExpandAndFoldPasterButtonStatus)status
{
    switch (status) {
        case kExpandAndFoldPasterButtonStatusExpand:
            [self setImage:_foldImage forState:UIControlStateNormal];
            [self setTitle:@"贴纸" forState:UIControlStateNormal];
            [self horizontalCenterTitleAndImageWithSpacing:2.f];
            break;
            
        case kExpandAndFoldPasterButtonStatusFold:
            [self setImage:_expandImage forState:UIControlStateNormal];
            [self setTitle:@"贴纸" forState:UIControlStateNormal];
            [self horizontalCenterTitleAndImageWithSpacing:2.f];
            break;
            
        default:
            break;
    }
}

@end