iOS - 一个简单的带标题的图标的实现

Posted 2021-03-08 sims

代码不复杂，直接上代码：

ImageViewButton.h

//
//  ImageViewButton.h//
//  带有图片、底部标题或者顶部的按钮
//
//

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface ImageViewButton : UIView

/**
 * 带有图标标题的按钮
 *
 * @param frame 大小
 * @param image 图标
 * @param title 标题
 * @param topTitle 标题是否在顶部
 *
 */
- (instancetype)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title topTitle:(BOOL)topTitle;

// 按钮点击回调
@property (copy, nonatomic) void (^iconClickCallback) (void);

@end

NS_ASSUME_NONNULL_END

ImageViewButton.m

//
//  ImageViewButton.m
//

#import "ImageViewButton.h"

@interface ImageViewButton ()

// 图标
@property (strong, nonatomic) UIButton *iconButton;
// 标题
@property (strong, nonatomic) UILabel *titleLabel;
// 标题是否在顶部
@property (assign, nonatomic) BOOL topTitle;

@end

@implementation ImageViewButton

- (instancetype)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title topTitle:(BOOL)topTitle {
    if (self = [super initWithFrame:frame]) {
        self.topTitle = topTitle;
        self.translatesAutoresizingMaskIntoConstraints = NO;
        
        // 图标
        self.iconButton = [[UIButton alloc] initWithFrame:CGRectZero];
        
        self.iconButton.translatesAutoresizingMaskIntoConstraints = NO;
        [self.iconButton setImage:[UIImage imageNamed:image] forState:UIControlStateNormal];
        [self.iconButton addTarget:self action:@selector(iconButtonClick:) forControlEvents:UIControlEventTouchUpInside];
        
        [self addSubview:self.iconButton];
        
        // 标题
        self.titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
        
        self.titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
        self.titleLabel.textAlignment = NSTextAlignmentCenter;
        self.titleLabel.textColor = [UIColor whiteColor];
        self.titleLabel.text = title;
        
        [self addSubview:self.titleLabel];
        
         [self setConstraints];
    }
    
    return self;
}

- (void)iconButtonClick:(UIButton *)sender {
    if (self.iconClickCallback) {
        self.iconClickCallback();
    }
}

- (void)setConstraints {
    // 标题
    NSLayoutConstraint *titleLabelTopBottomLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.titleLabel attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0];
    NSLayoutConstraint *titleLabelLeadingLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.titleLabel attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0.0];
    NSLayoutConstraint *titleLabelTrailingLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.titleLabel attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0];
    NSLayoutConstraint *titleLabelHeightLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.titleLabel attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:16.0];
    
    // 图标
    NSLayoutConstraint *iconImageViewWidthHeightLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.iconButton attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.iconButton attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
    NSLayoutConstraint *iconImageViewCenterXLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.iconButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
    NSLayoutConstraint *iconImageViewTopLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.iconButton attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.titleLabel attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];
    NSLayoutConstraint *iconImageViewBottomLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.iconButton attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];
    
    if (self.topTitle == NO) {
        // 标题在底部
        titleLabelTopBottomLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.titleLabel attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];
        iconImageViewTopLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.iconButton attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0];
        iconImageViewBottomLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.iconButton attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.titleLabel attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0];
    }
    
    [self addConstraints:@[titleLabelTopBottomLayoutConstraint, titleLabelLeadingLayoutConstraint, titleLabelTrailingLayoutConstraint, titleLabelHeightLayoutConstraint, iconImageViewWidthHeightLayoutConstraint, iconImageViewCenterXLayoutConstraint, iconImageViewTopLayoutConstraint, iconImageViewBottomLayoutConstraint]];
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

@end