我们经常会有多行多列按钮的页面, 这个时候我们通常会选择循环创建按钮, 然后进行按钮单选或者多选的操作!
一. 单选逻辑处理
1. 创建按钮控件数组及标签数组, 并升级当前选中按钮为属性,方便使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
#define zlunselectedcolor [uicolor colorwithred:(241)/255.0 green:(242)/255.0 blue:(243)/255.0 alpha:1.0]#define zlselectedcolor [uicolor colorwithred:(108)/255.0 green:(187)/255.0 blue:(82)/255.0 alpha:1.0]@interface zlradioviewcontroller ()// 标签数组(按钮文字)@property (nonatomic, strong) nsarray *markarray;// 按钮数组@property (nonatomic, strong) nsmutablearray *btnarray;// 选中按钮@property (nonatomic, strong) uibutton *selectedbtn;@end |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#pragma mark - 懒加载- (nsarray *)markarray { if (!_markarray) { nsarray *array = [nsarray array]; array = @[@"14", @"15", @"16", @"17", @"18"]; _markarray = array; } return _markarray;}- (nsmutablearray *)btnarray { if (!_btnarray) { nsmutablearray *array = [nsmutablearray array]; _btnarray = array; } return _btnarray;} |
2. 创建单选视图, 循环创建按钮, 并回显上次选中值
|
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
|
- (void)setupradiobtnview { cgfloat ui_view_width = [uiscreen mainscreen].bounds.size.width; cgfloat marginx = 15; cgfloat top = 100; cgfloat btnh = 30; cgfloat width = (250 - marginx * 4) / 3; // 按钮背景 uiview *btnsbgview = [[uiview alloc] initwithframe:cgrectmake((ui_view_width - 250) * 0.5, 50, 250, 300)]; btnsbgview.backgroundcolor = [uicolor whitecolor]; [self.view addsubview:btnsbgview]; // 循环创建按钮 nsinteger maxcol = 3; for (nsinteger i = 0; i < 5; i++) { uibutton *btn = [uibutton buttonwithtype:uibuttontypecustom]; btn.backgroundcolor = zlunselectedcolor; btn.layer.cornerradius = 3.0; // 按钮的边框弧度 btn.clipstobounds = yes; btn.titlelabel.font = [uifont boldsystemfontofsize:12]; [btn settitlecolor:[uicolor colorwithred:(102)/255.0 green:(102)/255.0 blue:(102)/255.0 alpha:1.0] forstate:uicontrolstatenormal]; [btn settitlecolor:[uicolor whitecolor] forstate:uicontrolstateselected]; [btn addtarget:self action:@selector(choosemark:) forcontrolevents:uicontroleventtouchupinside]; nsinteger col = i % maxcol; //列 btn.x = marginx + col * (width + marginx); nsinteger row = i / maxcol; //行 btn.y = top + row * (btnh + marginx); btn.width = width; btn.height = btnh; [btn settitle:self.markarray[i] forstate:uicontrolstatenormal]; [btnsbgview addsubview:btn]; btn.tag = i; [self.btnarray addobject:btn]; } // 创建完btn后再判断是否能选择(之前是已经选取过的) // 假数据:之前已经上传16时,则回显16 for (uibutton *btn in btnsbgview.subviews) { if ([@"16" isequaltostring:btn.titlelabel.text]) { btn.selected = yes; btn.backgroundcolor = zlselectedcolor; break; } }} |
3. 数字按钮单选处理, 根据tag值去判断是否是当前选中按钮
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
- (void)choosemark:(uibutton *)sender { nslog(@"点击了%@", sender.titlelabel.text); self.selectedbtn = sender; sender.selected = !sender.selected; for (nsinteger j = 0; j < [self.btnarray count]; j++) { uibutton *btn = self.btnarray[j] ; if (sender.tag == j) { btn.selected = sender.selected; } else { btn.selected = no; } btn.backgroundcolor = zlunselectedcolor; } uibutton *btn = self.btnarray[sender.tag]; if (btn.selected) { btn.backgroundcolor = zlselectedcolor; } else { btn.backgroundcolor = zlunselectedcolor; }} |
二. 多选逻辑处理
1. 创建按钮控件数组和标签字典, 及选中标签数组(数字)和选中标签数组(文字字符串), 为了展示及上传按钮数据使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#define zlunselectedcolor [uicolor colorwithred:(241)/255.0 green:(242)/255.0 blue:(243)/255.0 alpha:1.0]#define zlselectedcolor [uicolor colorwithred:(128)/255.0 green:(177)/255.0 blue:(34)/255.0 alpha:1.0]@interface zlmultiselectcontroller ()// 标签数组@property (nonatomic, strong) nsarray *markarray;// 标签字典@property (nonatomic, strong) nsdictionary *markdict;// 选中标签数组(数字)@property (nonatomic, strong) nsmutablearray *selectedmarkarray;// 选中标签数组(文字字符串)@property (nonatomic, strong) nsmutablearray *selectedmarkstrarray;@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
32
33
34
35
36
37
38
39
40
|
#pragma mark - 懒加载- (nsarray *)markarray { if (!_markarray) { nsarray *array = [nsarray array]; array = @[@"导购", @"客服", @"家教", @"礼仪", @"主持"]; _markarray = array; } return _markarray;}// 上传通过文字key取数字value发送数字- (nsdictionary *)markdict { if (!_markdict) { nsdictionary *dict = [nsdictionary dictionary]; dict = @{ @"导购" : @"3" , @"客服" : @"7", @"家教" : @"9", @"礼仪" : @"10", @"主持" : @"11", }; _markdict = dict; } return _markdict;}- (nsmutablearray *)selectedmarkarray { if (!_selectedmarkarray) { _selectedmarkarray = [nsmutablearray array]; } return _selectedmarkarray;}- (nsmutablearray *)selectedmarkstrarray { if (!_selectedmarkstrarray) { _selectedmarkstrarray = [nsmutablearray array]; } return _selectedmarkstrarray;} |
2.循环创建按钮视图, 循环创建按钮
|
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
|
- (void)setupmultiselectview { cgfloat ui_view_width = [uiscreen mainscreen].bounds.size.width; cgfloat marginx = 15; cgfloat top = 19; cgfloat btnh = 35; cgfloat marginh = 40; cgfloat height = 130; cgfloat width = (ui_view_width - marginx * 4) / 3; // 按钮背景 uiview *btnsbgview = [[uiview alloc] initwithframe:cgrectmake(0, 100, ui_view_width, height)]; btnsbgview.backgroundcolor = [uicolor whitecolor]; [self.view addsubview:btnsbgview]; // 循环创建按钮 nsinteger maxcol = 3; for (nsinteger i = 0; i < 5; i++) { uibutton *btn = [uibutton buttonwithtype:uibuttontypecustom]; btn.backgroundcolor = zlunselectedcolor; btn.layer.cornerradius = 3.0; // 按钮的边框弧度 btn.clipstobounds = yes; btn.titlelabel.font = [uifont boldsystemfontofsize:14]; [btn settitlecolor:[uicolor colorwithred:(102)/255.0 green:(102)/255.0 blue:(102)/255.0 alpha:1.0] forstate:uicontrolstatenormal]; [btn settitlecolor:[uicolor whitecolor] forstate:uicontrolstateselected]; [btn addtarget:self action:@selector(choosemark:) forcontrolevents:uicontroleventtouchupinside]; nsinteger col = i % maxcol; //列 btn.x = marginx + col * (width + marginx); nsinteger row = i / maxcol; //行 btn.y = top + row * (btnh + marginx); btn.width = width; btn.height = btnh; [btn settitle:self.markarray[i] forstate:uicontrolstatenormal]; [btnsbgview addsubview:btn]; } // 确定按钮 uibutton *surebtn = [uibutton buttonwithtype:uibuttontypecustom]; [surebtn settitle:@"确定" forstate:uicontrolstatenormal]; surebtn.frame = cgrectmake(marginx * 2, cgrectgetmaxy(btnsbgview.frame) + marginh, ui_view_width - marginx * 4, 40); surebtn.titlelabel.font = [uifont boldsystemfontofsize:16]; [surebtn addtarget:self action:@selector(surebtnclick) forcontrolevents:uicontroleventtouchupinside]; surebtn.backgroundcolor = [uicolor orangecolor]; surebtn.layer.cornerradius = 3.0; surebtn.clipstobounds = yes; [self.view addsubview:surebtn];} |
3. 按钮多选逻辑处理, 并上传数据请求处理
|
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
|
/** * 按钮多选处理 */- (void)choosemark:(uibutton *)btn { btn.selected = !btn.selected; if (btn.isselected) { btn.backgroundcolor = zlselectedcolor; [self.selectedmarkarray addobject:self.markdict[btn.titlelabel.text]]; [self.selectedmarkstrarray addobject:btn.titlelabel.text]; } else { btn.backgroundcolor = zlunselectedcolor; [self.selectedmarkarray removeobject:self.markdict[btn.titlelabel.text]]; [self.selectedmarkstrarray removeobject:btn.titlelabel.text]; }}/** * 确认接口请求处理 */- (void)surebtnclick { // 用户选择标签后就把值上传, 也要传给服务器下次直接请求回来 // 按钮数字标识字符串 nsstring *numstr = [self.selectedmarkarray componentsjoinedbystring:@","]; // 按钮文字字符串 nsstring *str = [self.selectedmarkstrarray componentsjoinedbystring:@","]; // 测试:拼接请求参数 nslog(@"按钮数字标识字符串:%@", numstr); nslog(@"按钮文字字符串:%@", str);} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://www.jianshu.com/p/ba9b53af81c8
