前言
排序按鈕是實際開發中比較常見的一種控件，最近我也遇到了，今天簡單分享下。
雖然功能簡單，但是保證你看了不虧，尤其是對UI這塊比較薄弱的同學來說。
OK，先看圖：
簡單描述一下：
按鈕一共有三種狀態：非選中、選中升序、選中降序。
按鈕的三種狀態
點擊按鈕時有兩種情況：
不同狀態對應不同的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使用：
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. NSArray *titleArray = @[@"同比", @"銷售額", @"
注：相關教程知識閱讀請移步到IOS開發頻道。
新聞熱點
疑難解答
