[iOS] 样式交替问题处理

引言

在开发中，遇到了一个问题“需要创建或删除一个按钮，进行重新排序”，针对该需求的解决办法就是使用 masonry 进行更新或重新设置约束。此时需要把“数组中元素” 与“添加或删除的按钮”相对应，添加或删除按钮后，数组也添加或删除指定元素。在这个地方卡了很久这里就讲述一下该问题的解决思路。

存在问题

• 样式交替过程中：进行添加或删除按钮，无法让 button 与数组中元素对应。

  如：数组中有元素[ @ “第一条消息”, @ “第二条消息” , @ “第三条消息” , @ “第四条消息”];
  此时，删除，点击按钮三进行删除，按钮无法与数组中 @ “第三条消息”元素关联。

解决思路

思路1.点击删除按钮后，使用“ button.title ” 与 “数组中元素”相关联，但是发现：如果数组中有同名相，会删除所有该名称的按钮，所以该思路不可取。

//如：数组中元素为[ @ "第一条消息", @ "第二条消息", @ "第二条消息", @ "第三条消息"];
- (void)removeButtonClick:(UIButton *)button {
  //此时 button.title 为 @"第二条消息"
  [self.adressArray removeObject:button.title];
  [button removeFromSuperview];
  //此时 数组元素与按钮不能对应，多删除了一个元素
  //数组元素为[@"第一条消息", @"第三条消息"];
}

思路2.给每个 button 添加一个 tag，每次进行：添加或删除 button 后，对所有 button 重新设置 tag，保证每次 tag 都能与数组元素相对应。

最后采取思路2进行设置。

解决办法

第一步：设置创建按钮。

• 创建按钮，设置标题，添加点击事件，添加按钮。
• 刷新 buttonsView。

  //数组中添加元素
  [self.buttonsArray addObject:"第五条消息"];
  //创建一个Butoton，通过 tag 与数组元素关联
  UIButton *addButton = [[UIButton alloc] init];
  [addButton setTitle:"第五条消息" forState:UIControlStateNormal];
  [addButton addTarget:self action:@selector(removeButtonClick:) forControlEvents:UIControlEventTouchUpInside];
  [self.buttonsView addSubview:addButton];
  //刷新 buttonsView
  [self reloadButtonsView];

第二步：设置点击删除按钮。

• 删除按钮时：数组移除 移除指定项：self.buttonsArray removeObjectAtIndex:button.tag - 101。
• button removeFromSuperview 将此按钮从父控件中移除。
• 刷新 buttonsView。

//设置删除点击事件
- (void)removeButtonClick:(UIButton *)button {
  //根据 button 的 tag 值，找到数组中指定元素所在位置，移除该元素
  [self.buttonsArray removeObjectAtIndex:button.tag - 101];
  //将此按钮从父控件中移除
  [button removeFromSuperview];
  //刷新 buttonsView
  [self reloadButtonViews];
}

第三步：设置刷新 buttonsView 的方法

• for 循环遍历 buttonsView 的所有 button。
• 对里面的所有 button 重新设置 button 的 tag 值，给按钮添加一个 tag，tag 值为 self.buttonsArray.count + 100 (+100是防止 butonsView 中子控件的 tag 重名)。
• 对里面的所有button使用 mas_remakeConstraints 重新设置约束。

//设置刷新 buttonsView 方法
- (void)reloadButtonViews {
  //设置 button 相对 buttonsView 的顶部距离 ，起始值为0
  CGFloat addButtonTopMargin = 0;
  //遍历 buttonsView 中所有 button
  for (int i = 0; i < self.buttonsView.subviews.count; i++) {
  //计算第 i 个 button 的高度，
    addButtonTopMargin = i * (buttonHeight + buttonMargin);
    ///取出 buttonsView 中第 i 个 button
    UIButton * button = self.buttonsView.subviews[i];
    //将 button 与数组中元素相关联，以便根据每个 button 找到数组中指定元素 (+100是防止 butonsView 中子控件的 tag 重名)。
    button.tag = self.buttonsArray.count + 100;
    //把 buttonsView 中所有 button 使用 mas_remakeConstraints 重新设置高度
    [button mas_remakeConstraints:^(MASConstraintMaker *make) {
      make.top.mas_equalTo(self.buttonsView).offset(deleteButtonTopMargin);
      make.left.mas_equalTo(self.buttonsView);
      make.height.mas_equalTo(CC_GETHEIGH(13));
    }];
  };
  //最后使用 mas_updateConstraints 更新 buttonsView 的高度
  [self.buttonsView mas_updateConstraints:^(MASConstraintMaker *make) {
      make.height.mas_equalTo(addButtonTopMargin + CC_GETOFFSET(13 +20));
    }
  }];
}

总结归纳

1.让 buttonsView 与 button 位置动态变化的方式就是使用 masonry 更新或重写约束。

2.让 “button” 与“数组元素” 相关联的方式就是使用 button.tag，并且在每次添加或删除后，重新设置所有
button.tag，让任何时候 button.tag 都与数组中元素参数对应关系。