UIButton水平居中、垂直居中按鈕 image 和 title
阿新 • • 發佈:2019-01-06
一、元件:
1. header file:
// // UIButton+CenterAlignment.h // QZone // // Created by Jones Duan on 14-7-30. // Copyright (c) 2014年 tencent. All rights reserved. // #import <UIKit/UIKit.h> @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 <UIKit/UIKit.h> #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 <UIKit/UIKit.h>
#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