持续创作，加速成长！这是我参与「掘金日新计划 · 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文字左右参差不齐的问题
- 使用富文本排版
setAttributedTitle替换方法setTitle: - 使用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
