前言
排序按钮是实际开发中比较常见的一种控件,最近我也遇到了,今天简单分享下。
虽然功能简单,但是保证你看了不亏,尤其是对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 = @[@ "同比" , @ "销售额" , @ "
延伸 · 阅读
精彩推荐
|