前言
排序按钮是实际开发中比较常见的一种控件，最近我也遇到了，今天简单分享下。
虽然功能简单，但是保证你看了不亏，尤其是对ui这块比较薄弱的同学来说。
ok，先看图：
简单描述一下：
按钮一共有三种状态：非选中、选中升序、选中降序。
按钮的三种状态
点击按钮时有两种情况：
- 按钮原本处于非选中状态，点击，切换到选中状态，其状态变为升序。
- 按钮原本就处于选中状态，再点击一下，则切换其排序状态（升变降、降变升）。
不同状态对应不同的icon，如果没有ui，可以去iconfont 找图标，输入关键词如“上下箭头”就可以找到你需要的icon。
基本思路
继承uibutton，直接在button上放view，设置约束，根据按钮的状态设置对应的图片。
ps：自定义按钮最灵活的做法就是直接在button上放view（在不需要纠结内存和view层级的情况下），简单粗暴、随心所欲。
完整代码
.h文件：
|
1
2
3
4
5
6
7
8
9
10
|
#import <uikit/uikit.h>@interface cqsortbutton : uibutton/** 按钮文本 */@property (nonatomic, copy) nsstring *title;/** 是否是升序 */@property (nonatomic, assign, readonly, getter=isascending) bool ascending;@end |
.m文件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
#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 |
使用：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
- (void)viewdidload { [super viewdidload]; // do any additional setup after loading the view. nsarray *titlearray = @[@"同比", @"销售额", @"相关文章
热门资讯 |
