美文网首页iOS进阶之路
图文并存的button

图文并存的button

作者: 郑军红 | 来源:发表于2016-11-19 17:07 被阅读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];

    相关文章

      网友评论

        本文标题:图文并存的button

        本文链接:https://www.haomeiwen.com/subject/qnkepttx.html