iOS小技能： 按钮标题自动适配的中英文长度 & 动态控制子视图按钮的显示与隐藏 （Masonry版本）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

前言

• 按钮标题自动适配的中英文长度

比如打印小票，或者提货，是使用同一个按钮，这个时候还要适配中英文。可以采用以下方式Masonry约束视图的宽度的最小值

make.width.mas_greaterThanOrEqualTo(kAdjustRatio(70)); 例子：打印小票按钮

• 动态控制子视图按钮的显示与隐藏

例子：本级的订货清单不显示分配终端按钮子视图 下级代理商的订货清单显示分配终端按钮子视图

I、按钮标题的中英文长度适配适配（Masonry版本）

• 关键API make.width.mas_greaterThanOrEqualTo(kAdjustRatio(70));

        [_receiptBtn.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.offset(kAdjustRatio(3));
            make.right.offset(kAdjustRatio(-3));


        }];

复制代码

• 整体代码

- (QCTStoreOrderButton *)receiptBtn{
    if (!_receiptBtn) {
        _receiptBtn = [[QCTStoreOrderButton alloc]init];

        [_receiptBtn setTitle:QCTLocal(@"store_order_printing_tickets") forState:UIControlStateNormal];
        
        __weak __typeof__(self) weakSelf = self;

        [self addSubview:_receiptBtn];
        
        [_receiptBtn mas_makeConstraints:^(MASConstraintMaker *make) {
            
//            make.size.mas_equalTo(CGSizeMake(kAdjustRatio(74), kAdjustRatio(28)));
            make.height.mas_equalTo(kAdjustRatio(25));
            make.width.mas_greaterThanOrEqualTo(kAdjustRatio(70));

            
            make.right.equalTo(weakSelf).offset(-kAdjustRatio(kSideMargin));
            
            make.centerY.equalTo(weakSelf);

            
        }];
        [_receiptBtn.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.offset(kAdjustRatio(3));
            make.right.offset(kAdjustRatio(-3));


        }];
        
        _receiptBtn.titleLabel.textAlignment = NSTextAlignmentCenter;
        
        
        
//        _receiptBtn rac
        
    }
    return _receiptBtn;
}

复制代码

II、动态控制子视图按钮的显示与隐藏

需求： 动态控制子视图按钮的显示与隐藏

例子：本级的订货清单不显示分配终端按钮子视图 下级代理商的订货清单显示分配终端按钮子视图

• 定义分配终端按钮属性

/**
 分配终端按钮
 */
@property (strong, nonatomic) QCTStoreOrderButton *allocationBtn;

- (QCTStoreOrderButton *)allocationBtn{
    if (!_allocationBtn) {
        
        QCTStoreOrderButton *tmp = [[QCTStoreOrderButton alloc]init];

        _allocationBtn = tmp;
        

        [tmp setTitle:QCTLocal(@"分配终端") forState:UIControlStateNormal];
        
        
        
        __weak __typeof__(self) weakSelf = self;

        [self addSubview:tmp];
        
        [tmp mas_makeConstraints:^(MASConstraintMaker *make) {
            
            
            
            make.height.mas_equalTo(kAdjustRatio(25));
            make.width.mas_greaterThanOrEqualTo(kAdjustRatio(70));

            
            make.right.equalTo(weakSelf).offset(-kAdjustRatio(kSideMargin));
            
            make.top.equalTo(weakSelf.quantityAllottedLab.mas_bottom).offset(kAdjustRatio(6));
            
            
            
                        make.bottom.equalTo(weakSelf).offset(-kAdjustRatio(13));
            

            //            make.size.mas_equalTo(CGSizeMake(kAdjustRatio(74), kAdjustRatio(28)));

            
        }];
        [tmp.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.offset(kAdjustRatio(3));
            make.right.offset(kAdjustRatio(-3));


        }];
        
        tmp.titleLabel.textAlignment = NSTextAlignmentCenter;
        
        
    }
    return _allocationBtn;
}



复制代码

• 根据模型的上下级类型控制视图的高度的约束，进而控制视图地显示与隐藏

    __weak __typeof__(self) weakSelf = self;

    [self.allocationBtn mas_updateConstraints:^(MASConstraintMaker *make) {
        
        
        if(!models.isLowerOrder){//  "isLowerOrder" : "false", 本级
            

            
            
            make.top.equalTo(weakSelf.quantityAllottedLab.mas_bottom).offset(kAdjustRatio(0));
            

            make.height.mas_equalTo(kAdjustRatio(0));
            
            
        }else{// 下级
            make.top.equalTo(weakSelf.quantityAllottedLab.mas_bottom).offset(kAdjustRatio(6));
            

            make.height.mas_equalTo(kAdjustRatio(30));

            
        }

        
        
        
    }];
    

复制代码

III 按钮标题换行处理

3.1 按钮标题换行

案例：角色权限选择

        UIButton* tmp = [[UIButton alloc]init];
                tmp.titleLabel.numberOfLines = 2;
        __weak __typeof__(self) weakSelf = self;
        
        [tmp mas_makeConstraints:^(MASConstraintMaker *make) {
            
           
            
                make.top.equalTo(weakSelf).offset(kAdjustRatio(16));
            
            
            
            make.left.offset(0);
            
            make.right.lessThanOrEqualTo(weakSelf).offset(-10);

            make.bottom.offset(kAdjustRatio(-0));
            
            
        }];
        [tmp.imageView mas_makeConstraints:^(MASConstraintMaker *make) {

            
            make.left.offset(kAdjustRatio(0));
            make.centerY.offset(0);
        }];
        

复制代码

控制按钮是否可响应事件，推荐使用userInteractionEnabled属性。因为enabled属性会影响按钮的selected状态失效。

    self.rememberBtn.userInteractionEnabled = model.enabled;

复制代码

更改按钮选中状态:

            [[tmp rac_signalForControlEvents:UIControlEventTouchUpInside]subscribeNext:^( UIButton *x) {


                x.selected = !x.selected;


                weakSelf.model.isSelected = x.selected;





            }];


复制代码

3.2 解决Label文字左右参差不齐的问题

1. 使用富文本排版setAttributedTitle替换方法setTitle:
2. 使用NSTextAlignmentJustified 对齐方式

3.3 设置按钮的文字和图片间距

mage是默认居左的，右边是相对于title的。

                tmp.imageEdgeInsets = UIEdgeInsetsMake(0,   0,0,space);

复制代码

设置图片和标题位置互换:https://blog.csdn.net/z929118967/article/details/104315227

        
        CGFloat labelWidth = _titleBtn.titleLabel.intrinsicContentSize.width; //注意不能直接使用titleLabel.frame.size.width,原因为有时候获取到0值
        CGFloat imageWidth = _titleBtn.imageView.frame.size.width;
        CGFloat space = 3.f; //定义两个元素交换后的间距
        
        _titleBtn.titleEdgeInsets = UIEdgeInsetsMake(0, - imageWidth - space,0,imageWidth + space);
        _titleBtn.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth + space, 0,  -labelWidth - space);
        
        

复制代码

IV 附：以上两个例子的自定义按钮

• 自定义按钮

#import "QCTStoreOrderButton.h"

@implementation QCTStoreOrderButton

- (void)layoutSubviews{
    
    
    [super layoutSubviews];
    [self layoutIfNeeded];
    self.layer.cornerRadius = self.height*0.5;
    
//    [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
//       
//        make.top.offset(kAdjustRatio(4));
//        make.left.offset(kAdjustRatio(4));
//        make.right.offset(kAdjustRatio(-6));
//        make.bottom.offset(kAdjustRatio(-6));
//
//        
//    }];

    
}

- (void)setHighlighted:(BOOL)highlighted{
    
    [super setHighlighted:highlighted];
    return ;
    
    UIButton *_receiptBtn = self;

    
    if (highlighted) {
        
        
        _receiptBtn.layer.borderColor = ktabSelectedTextColor.CGColor;
        _receiptBtn.layer.borderWidth = 1;

        
        
    }else{
        
        _receiptBtn.layer.borderColor = rgb(231,231,231).CGColor;
        
        _receiptBtn.layer.borderWidth = 1;

        
    }
    
}

- (instancetype)init
{
    self = [super init];
    if (self) {
        
        UIButton *_cancelBtn = self;
//        rgb(231,231,231)
        _cancelBtn.layer.borderColor = BASE_RED_COLOR.CGColor;
        
        
        _cancelBtn.layer.borderWidth = 0.5;
        

        _cancelBtn.clipsToBounds = YES;
        
        _cancelBtn.titleLabel.font = kPingFangFont(11);
        
        

//        rgb(51,51,51)
        [_cancelBtn setTitleColor:BASE_RED_COLOR forState:UIControlStateNormal];

        [_cancelBtn setTitleColor:ktabSelectedTextColor forState:UIControlStateHighlighted];
        
    }
    return self;
}

@end

复制代码