当前位置： 移动技术网 > IT编程>移动开发>IOS > 详解iOS-按钮单选与多选逻辑处理

详解iOS-按钮单选与多选逻辑处理

2019年07月24日  | 移动技术网IT编程  | 我要评论

范少婷,昕还在等候,歼轰-7

我们经常会有多行多列按钮的页面, 这个时候我们通常会选择循环创建按钮, 然后进行按钮单选或者多选的操作!

一. 单选逻辑处理

1. 创建按钮控件数组及标签数组, 并升级当前选中按钮为属性,方便使用

#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

#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. 创建单选视图, 循环创建按钮, 并回显上次选中值

- (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值去判断是否是当前选中按钮

- (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. 创建按钮控件数组和标签字典, 及选中标签数组(数字)和选中标签数组(文字字符串), 为了展示及上传按钮数据使用

#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

#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.循环创建按钮视图, 循环创建按钮

- (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. 按钮多选逻辑处理, 并上传数据请求处理

/**
 * 按钮多选处理
 */
- (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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网