当文本输入框和是否勾选在同一列表时,你懵圈了吗

看着原型图时是不是已经无语! 慧合是仅仅展示成分含量及是否勾选, 而自购时不仅仅是需要回显这些内容, 还需要可输入文本内容和可勾选选项的操作!

对于这类,我们要淡定,先冷静处理,和产品沟通是否能更改为两个界面, 实在不能更改, 就只能来适应这个局势了,现将自购的界面来说,下面使用 MVC 设计模式来思路剖析!

##Step1: Model里添加文本输入框的值valueStr 及勾选项的是否选中 bool 值. PS:当未碰触键盘,文本输入框值就默认为上次参数里的值

#import <Foundation/Foundation.h>

@interface XHHPremixModel : NSObject

@property (nonatomic, copy) NSString *id;

// 指标
@property (nonatomic, copy) NSString *name;

// 成分量
@property (nonatomic, assign) float value;

// 成分量 文本输入值
@property (nonatomic, copy) NSString *valueStr;

// 单位
@property (nonatomic, copy) NSString *unit;

// 是否选中
@property (nonatomic, assign, getter=isSelected) BOOL selected;

+ (NSArray *)loadPremixInfoFromJson:(NSArray *)array;

@end
复制代码

#import "XHHPremixModel.h"
#import "MJExtension.h"

@implementation XHHPremixModel

+ (NSArray *)loadPremixInfoFromJson:(NSArray *)array {
    
    return [self objectArrayWithKeyValuesArray:array].copy;
}

- (NSString *)valueStr {
    
    if ([_valueStr isEqual:[NSNull null]] || _valueStr == nil) {
        _valueStr = [NSString stringWithFormat:@"%.2f", _value];
    }
    
    return _valueStr;
}

@end
复制代码

##Step2: Cell 里通过拿到标识去判断是文本输入框类型还是勾选项类型并创建.

下面摘取核心代码: 2.1 这里和后台商议的是通过单位值 unit 返回的是否是1, 1则为勾选项类型, 其他则为文本输入框类型.设置子控件位置里要注意两者的展现与否.

- (void)layoutSubviews {
    [super layoutSubviews];
    
    // 设置子控件位置
    [self setupFrame];
}

// 设置子控件位置
- (void)setupFrame {

    if ([self.model.unit isEqualToString:@"1"]) {
        
        self.elementTextField.hidden = YES;
        self.selectImg.hidden = NO;
    } else {
        self.elementTextField.hidden = NO;
        self.selectImg.hidden = YES;
    }

}
复制代码

2.2 model 赋值里要记得判断: 当为勾选项时,在选中状态下,赋值文本输入框valueStr为1,且更换选中图片; 在取消选中状态下,赋值文本输入框valueStr为0,且更换未选图片.

// model赋值
- (void)setModel:(XHHPremixModel *)model {
    
    _model = model;
    
    self.norm.text = model.name;
    self.elementTextField.text = [NSString stringWithFormat:@"%.2f%@", model.value, model.unit];
    
    if ([model.unit isEqualToString:@"1"]) { // 勾选项类型
        if (model.selected == YES) { // 选中
            model.valueStr = @"1";
            self.selectImg.image = [UIImage imageNamed:@"xz"];
        } else {
            model.valueStr = @"0";
            self.selectImg.image = [UIImage imageNamed:@"wx"];
        }
    }
}
复制代码

2.3 文本输入框类型的赋值


#pragma mark- UITextFieldDelegate

- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    if (textField == self.elementTextField) {
        [self.elementTextField resignFirstResponder];
    }
    return YES;
}

- (void)textFieldDidEndEditing:(UITextField *)textField {
    
    self.elementTextField.text = textField.text;
    self.model.valueStr = [NSString stringWithFormat:@"%@", textField.text];

    XHHLog(@"输入了成分%@", self.elementTextField.text);
}

// 限制两位小数
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
    
    if ([textField.text containsString:@"."]) {
        if ([string isEqualToString:@"."]) return NO;
        NSRange rangeOfPoint = [textField.text rangeOfString:@"."];
        if (range.location > rangeOfPoint.location + 2) return NO;
    }
    
    return YES;
}
复制代码

PS: 因界面中包含了选择勾选项,不要在 cell 里去收起键盘操作, 会影响勾选操作!也就是说,不要调起这个方法: touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event, 可以在控制器里选中当前行时视图退出编辑状态（收起键盘）.

##Step3:Controller 里点击操作及数据回显

3.1 点击选中及收起键盘操作 这个时候不能使用手势方法去让视图退出编辑状态（收起键盘）,还是因为界面中包含了选择勾选项,会有手势冲突现象.

// 选中当前行
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

    XHHPremixModel *model = self.list[indexPath.row];
    
    // 处理勾选性问题, 选中赋值为1
    if ([model.unit isEqualToString:@"1"]) {
      
        // 编辑状态 点击选中
        model.selected = !model.selected;
        [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
    }

    // 视图退出编辑状态（收起键盘）
    [self.view endEditing:YES];
}
复制代码

3.2 勾选读取数据回显 可以在读取 List 列表数据请求里时, 去遍历显示模型中原本已勾选值,和后台协议为,当 value 值为0时,则为未选状态,其他值则为选中状态.

NSArray *currentPageArray = [XHHPremixModel loadPremixInfoFromJson:json[@"data"][@"list"]];
[weakSelf.list addObjectsFromArray:currentPageArray];

// 遍历显示模型中原本已勾选值
for (XHHPremixModel *model in currentPageArray) {
    if (model.value != 0) {
        model.selected = YES;
    } else {
        model.selected = NO;
    }
}
复制代码

此文仅以介绍思路, 毕竟这样 APP 奇葩的页面很少, iOS 的更少!

相关文章：