我们经常会有多行多列按钮的页面, 这个时候我们通常会选择循环创建按钮, 然后进行按钮单选或者多选的操作!
一. 单选逻辑处理
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
如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。