iOS 控件封装(又名拧螺丝)之排序按钮的开发

2020-01-21 07:53:01王冬梅
  • 按钮原本就处于选中状态,再点击一下,则切换其排序状态(升变降、降变升)。

    不同状态对应不同的icon,如果没有UI,可以去iconfont 找图标,输入关键词如“上下箭头”就可以找到你需要的icon。

    基本思路

    继承UIButton,直接在button上放view,设置约束,根据按钮的状态设置对应的图片。

    PS:自定义按钮最灵活的做法就是直接在button上放view(在不需要纠结内存和view层级的情况下),简单粗暴、随心所欲。

    完整代码

    .h文件:

    
    #import <UIKit/UIKit.h>
    
    @interface CQSortButton : UIButton
    
    /** 按钮文本 */
    @property (nonatomic, copy) NSString *title;
    /** 是否是升序 */
    @property (nonatomic, assign, readonly, getter=isAscending) BOOL ascending;
    
    @end

    .m文件:

    
    #import "CQSortButton.h"
    
    @interface CQSortButton ()
    
    /** 文本label */
    @property (nonatomic, strong) UILabel *cq_titleLabel;
    /** 箭头imageView */
    @property (nonatomic, strong) UIImageView *cq_arrowImageView;
    
    @end
    
    @implementation CQSortButton
    
    #pragma mark - 构造方法
    
    - (instancetype)initWithFrame:(CGRect)frame {
     if (self = [super initWithFrame:frame]) {
      [self setupUI];
     }
     return self;
    }
    
    #pragma mark - UI搭建
    
    - (void)setupUI {
     self.layer.borderColor = [UIColor blackColor].CGColor;
     self.layer.borderWidth = 1;
    
     // 文本和图片的父view
     UIView *contentView = [[UIView alloc] init];
     [self addSubview:contentView];
     contentView.userInteractionEnabled = NO;
     [contentView mas_makeConstraints:^(MASConstraintMaker *make) {
      make.top.bottom.centerX.mas_equalTo(self);
      make.left.mas_greaterThanOrEqualTo(self).mas_offset(3);
      make.right.mas_lessThanOrEqualTo(self).mas_offset(-3);
     }];
    
     // 文本
     self.cq_titleLabel = [[UILabel alloc] init];
     [contentView addSubview:self.cq_titleLabel];
     self.cq_titleLabel.font = [UIFont boldSystemFontOfSize:13];
     self.cq_titleLabel.adjustsFontSizeToFitWidth = YES;
     [self.cq_titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
      make.top.bottom.left.mas_offset(0);
     }];
    
     // 图片
     self.cq_arrowImageView = [[UIImageView alloc] init];
     [contentView addSubview:self.cq_arrowImageView];
     self.cq_arrowImageView.image = [UIImage imageNamed:@"up_down"];
     [self.cq_arrowImageView mas_makeConstraints:^(MASConstraintMaker *make) {
      make.size.mas_equalTo(CGSizeMake(20, 20));
      make.centerY.mas_equalTo(contentView);
      make.left.mas_equalTo(self.cq_titleLabel.mas_right);
      make.right.mas_equalTo(contentView);
     }];
    }
    
    #pragma mark - 赋值选中状态
    
    - (void)setSelected:(BOOL)selected {
     //// 注意:
     //// selected 表示你要赋值的状态
     //// super.selected 表示当前处于的状态
    
     if (selected) { // 即将设置成选中状态
      if (super.selected) { // 如果原本就处于选中状态
       // 那么就切换筛选状态
       _ascending = !_ascending;
       if (_ascending) {
        // 升序
        self.cq_arrowImageView.image = [UIImage imageNamed:@"red_arrow_up"];
       } else {
        // 降序
        self.cq_arrowImageView.image = [UIImage imageNamed:@"red_arrow_down"];
       }
      } else { // 如果之前不是选中状态
       // 那么设置成选中的默认排序状态:升序
       _ascending = YES;
       self.cq_arrowImageView.image = [UIImage imageNamed:@"red_arrow_up"];
      }
     } else { // 即将设置成非选中状态
      // 设置成非选中状态的图片
      self.cq_arrowImageView.image = [UIImage imageNamed:@"up_down"];
     }
    
     // 最后再赋值
     [super setSelected:selected];
    }
    
    #pragma mark - 赋值文本
    
    - (void)setTitle:(NSString *)title {
     _title = title;
     self.cq_titleLabel.text = title;
    }
    
    @end