看着原型图时是不是已经无语!
慧合是仅仅展示成分含量及是否勾选, 而自购时不仅仅是需要回显这些内容, 还需要可输入文本内容 和 可勾选选项的操作!
对于这类,我们要淡定,先冷静处理,和产品沟通是否能更改为两个界面, 实在不能更改, 就只能来适应这个局势了,现将自购的界面来说,下面使用 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 的 更少!
