iOS进阶之路

图文并存的button

2016-11-19  本文已影响5人  郑军红

.h文件的实现

typedef NS_ENUM(NSUInteger, JXLayoutButtonStyle) {

JXLayoutButtonStyleLeftImageRightTitle,

JXLayoutButtonStyleLeftTitleRightImage,

JXLayoutButtonStyleUpImageDownTitle,

JXLayoutButtonStyleUpTitleDownImage

};

/// 重写layoutSubviews的方式实现布局,忽略imageEdgeInsets、titleEdgeInsets和contentEdgeInsets

@interface JXLayoutButton : UIButton

/// 布局方式

@property (nonatomic, assign) JXLayoutButtonStyle layoutStyle;

/// 图片和文字的间距,默认值8

@property (nonatomic, assign) CGFloat midSpacing;

/// 指定图片size

@property (nonatomic, assign) CGSize imageSize;

@end

.m的实现

@implementation JXLayoutButton

- (instancetype)initWithFrame:(CGRect)frame {

if (self = [super initWithFrame:frame]) {

self.midSpacing = 0;

self.imageSize = CGSizeZero;

}

return self;

}

- (void)layoutSubviews {

[super layoutSubviews];

if (CGSizeEqualToSize(CGSizeZero, self.imageSize)) {

[self.imageView sizeToFit];

}

else {

self.imageView.frame = CGRectMake(self.imageView.frame.origin.x,

self.imageView.frame.origin.y,

self.imageSize.width,

self.imageSize.height);

}

[self.titleLabel sizeToFit];

switch (self.layoutStyle) {

case JXLayoutButtonStyleLeftImageRightTitle:

[self layoutHorizontalWithLeftView:self.imageView rightView:self.titleLabel];

break;

case JXLayoutButtonStyleLeftTitleRightImage:

[self layoutHorizontalWithLeftView:self.titleLabel rightView:self.imageView];

break;

case JXLayoutButtonStyleUpImageDownTitle:

[self layoutVerticalWithUpView:self.imageView downView:self.titleLabel];

break;

case JXLayoutButtonStyleUpTitleDownImage:

[self layoutVerticalWithUpView:self.titleLabel downView:self.imageView];

break;

default:

break;

}

}

- (void)layoutHorizontalWithLeftView:(UIView *)leftView rightView:(UIView *)rightView {

CGRect leftViewFrame = leftView.frame;

CGRect rightViewFrame = rightView.frame;

CGFloat totalWidth = CGRectGetWidth(leftViewFrame) + self.midSpacing + CGRectGetWidth(rightViewFrame);

leftViewFrame.origin.x = (CGRectGetWidth(self.frame) - totalWidth) / 2.0;

leftViewFrame.origin.y = (CGRectGetHeight(self.frame) - CGRectGetHeight(leftViewFrame)) / 2.0;

leftView.frame = leftViewFrame;

rightViewFrame.origin.x = CGRectGetMaxX(leftViewFrame) + self.midSpacing;

rightViewFrame.origin.y = (CGRectGetHeight(self.frame) - CGRectGetHeight(rightViewFrame)) / 2.0;

rightView.frame = rightViewFrame;

}

- (void)layoutVerticalWithUpView:(UIView *)upView downView:(UIView *)downView {

CGRect upViewFrame = upView.frame;

CGRect downViewFrame = downView.frame;

CGFloat totalHeight = CGRectGetHeight(upViewFrame) + self.midSpacing + CGRectGetHeight(downViewFrame);

upViewFrame.origin.y = (CGRectGetHeight(self.frame) - totalHeight) / 2.0;

upViewFrame.origin.x = (CGRectGetWidth(self.frame) - CGRectGetWidth(upViewFrame)) / 2.0;

upView.frame = upViewFrame;

downViewFrame.origin.y = CGRectGetMaxY(upViewFrame) + self.midSpacing;

downViewFrame.origin.x = (CGRectGetWidth(self.frame) - CGRectGetWidth(downViewFrame)) / 2.0;

downView.frame = downViewFrame;

}

- (void)setImage:(UIImage *)image forState:(UIControlState)state {

[super setImage:image forState:state];

[self setNeedsLayout];

}

- (void)setTitle:(NSString *)title forState:(UIControlState)state {

[super setTitle:title forState:state];

[self setNeedsLayout];

}

- (void)setMidSpacing:(CGFloat)midSpacing {

_midSpacing = midSpacing;

[self setNeedsLayout];

}

- (void)setImageSize:(CGSize)imageSize {

_imageSize = imageSize;

[self setNeedsLayout];

}

自定义按钮的在对应的文件里实现方法如下:

JXLayoutButton *returnButton = [JXLayoutButton buttonWithType:UIButtonTypeCustom];

_returnButton.layoutStyle = JXLayoutButtonStyleLeftImageRightTitle;

_returnButton.midSpacing = 0;

[_returnButton setFrame:CGRectMake(0, 20, LCDW/6, 44)];

[_returnButton setImage:[UIImage imageNamed:@"returnButton"] forState:UIControlStateNormal];

[_returnButton setTitle:@"返回" forState:UIControlStateNormal];

_returnButton.titleLabel.font = [UIFont systemFontOfSize:14];

[_returnButton addTarget:self action:@selector(returnBefore:) forControlEvents:UIControlEventTouchUpInside];

[self.view addSubview:_returnButton];

上一篇下一篇

猜你喜欢

热点阅读