有些时候我们需要创建一些不一样的button,像很多APP的按钮会根据自己的需要安排按钮上面图片和文字的位置.这篇文章就是对UIButton进行了进一步的加工,封装出满足需要的按钮.
JHButton.h文件
#import
typedef void(^tapHandler)(UIButton *sender);
@interface JHButton : UIButton
@property (nonatomic,strong)tapHandler handler;
+ (instancetype)buttonWithType:(UIButtonType)buttonType frame:(CGRect)frame title:(NSString *)title titleColor:(UIColor *)titleColor titleFont:(CGFloat)font textAlignment:(NSTextAlignment)textAlignment image:(UIImage *)image imageViewContentMode:(UIViewContentMode)imageViewContentMode handler:(tapHandler)handler;
@end
在.h文件中声明一个+方法,和一个block(用作button的点击事件);
JHButton.m文件
#import "JHButton.h"
//title所占的conentView的比例
#define kTitleRatio 0.4
@implementation JHButton
+ (instancetype)buttonWithType:(UIButtonType)buttonType frame: (CGRect)frame title:(NSString *)title titleColor:(UIColor *)titleColor titleFont:(CGFloat)font textAlignment:(NSTextAlignment)textAlignment image:(UIImage *)image imageViewContentMode:(UIViewContentMode)imageViewContentMode handler:(tapHandler)handler{
//button的类型
JHButton *button = [super buttonWithType:buttonType];
//button的frame
button.frame = frame;
//文字居中
button.titleLabel.textAlignment = textAlignment;
//文字大小
button.titleLabel.font = [UIFont systemFontOfSize:font];
//文字颜色
[button setTitleColor:titleColor forState:UIControlStateNormal];
//图片填充的内容模式
button.imageView.contentMode = imageViewContentMode;
//button的title
[button setTitle:title forState:UIControlStateNormal];
//button的image
[button setImage:image forState:UIControlStateNormal];
//button的点击事件
button.handler = handler;
[button addTarget:button action:@selector(handleButton:) forControlEvents:UIControlEventTouchUpInside];
return button;
}
#pragma mark - handleButton
- (void)handleButton:(UIButton *)sender{
if (self.handler) {
self.handler(sender);
}
}
此方法设置title在左,图片在右(举例)
#pragma mark - 调整内部ImageView的frame
- (CGRect)imageRectForContentRect:(CGRect)contentRect{
CGFloat imageX = contentRect.size.width * kTitleRatio;
CGFloat imageY = 0;
CGFloat imageWidth = contentRect.size.width * (1 - kTitleRatio);
CGFloat imageHeight = contentRect.size.height;
return CGRectMake(imageX, imageY, imageWidth, imageHeight);
}
#pragma mark - 调整内部UIlable的frame
- (CGRect)titleRectForContentRect:(CGRect)contentRect{
CGFloat titleX = 0;
CGFloat titleY = 0;
CGFloat titleWidth = contentRect.size.width * kTitleRatio - 20;
CGFloat titleHeight = contentRect.size.height;
return CGRectMake(titleX, titleY, titleWidth, titleHeight);
}
示例一
如下设置图片在上,title在下(举例)
#pragma mark - 调整内部ImageView的frame --
- (CGRect)imageRectForContentRect:(CGRect)contentRect{
CGFloat imageX = 0;
CGFloat imageY = 0;
CGFloat imageWidth = contentRect.size.width;
CGFloat imageHeight = contentRect.size.height * (1 - kTitleRatio);
return CGRectMake(imageX, imageY, imageWidth, imageHeight);
}
#pragma mark - 调整内部UIlable的frame
- (CGRect)titleRectForContentRect:(CGRect)contentRect{
CGFloat titleX = 0;
CGFloat titleHeight = contentRect.size.height * kTitleRatio;
CGFloat titleY = contentRect.size.height - titleHeight + 10;
CGFloat titleWidth = contentRect.size.width;
return CGRectMake(titleX, titleY, titleWidth, titleHeight);
}
示例二
在ViewController里调用
- (void)createSubView{
JHButton *button = [JHButton buttonWithType:UIButtonTypeCustom frame:CGRectMake(0, 0, 200, 200) title:@"登录" titleColor:[UIColor yellowColor] titleFont:25 textAlignment:NSTextAlignmentCenter image:[UIImage imageNamed:@"1234"] imageViewContentMode:UIViewContentModeLeft handler:^(UIButton *sender) {
}];
[self.view addSubview:button];
}
原始的UIButton文字与图片位置(紫色背景的图片为backgroundImage,绿色背景为Image,红色背景为Label),只又在添加这些图片或文字后,才会显示出来,否则不会显示(如不setTitle,则红色的view将不会显示出来).
原始的Button图文位置