看著原型圖時是不是已經(jīng)無語!
慧合是僅僅展示成分含量及是否勾選, 而自購時不僅僅是需要回顯這些內(nèi)容, 還需要可輸入文本內(nèi)容 和 可勾選選項的操作!
對于這類,我們要淡定,先冷靜處理,和產(chǎn)品溝通是否能更改為兩個界面, 實在不能更改, 就只能來適應(yīng)這個局勢了,現(xiàn)將自購的界面來說,下面使用 MVC 設(shè)計模式來思路剖析!
Step1: Model里添加文本輸入框的值valueStr 及 勾選項的是否選中 bool 值.
PS:當未碰觸鍵盤,文本輸入框值就默認為上次參數(shù)里的值
#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 里通過拿到標識去判斷是文本輸入框類型 還是 勾選項類型并創(chuàng)建.
下面摘取核心代碼:
2.1 這里和后臺商議的是通過單位值 unit 返回的是否是1, 1則為勾選項類型, 其他則為文本輸入框類型.設(shè)置子控件位置里要注意兩者的展現(xiàn)與否.
- (void)layoutSubviews {
[super layoutSubviews];
// 設(shè)置子控件位置
[self setupFrame];
}
// 設(shè)置子控件位置
- (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 賦值里要記得判斷: 當為勾選項時,在選中狀態(tài)下,賦值文本輸入框valueStr為1,且更換選中圖片; 在取消選中狀態(tài)下,賦值文本輸入框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);
}
// 限制兩位小數(shù)
- (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 里去收起鍵盤操作, 會影響勾選操作!也就是說,不要調(diào)起這個方法: touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event, 可以在控制器里選中當前行時視圖退出編輯狀態(tài)（收起鍵盤）.
Step3:Controller 里 點擊操作 及 數(shù)據(jù)回顯
3.1 點擊選中及收起鍵盤操作
這個時候不能使用手勢方法去讓視圖退出編輯狀態(tài)（收起鍵盤）,還是因為界面中包含了選擇勾選項,會有手勢沖突現(xiàn)象.
// 選中當前行
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
XHHPremixModel *model = self.list[indexPath.row];
// 處理勾選性問題, 選中賦值為1
if ([model.unit isEqualToString:@"1"]) {
// 編輯狀態(tài) 點擊選中
model.selected = !model.selected;
[self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
}
// 視圖退出編輯狀態(tài)（收起鍵盤）
[self.view endEditing:YES];
}
3.2 勾選讀取數(shù)據(jù)回顯
可以在讀取 List 列表數(shù)據(jù)請求里時, 去遍歷顯示模型中原本已勾選值,和后臺協(xié)議為,當 value 值為0時,則為未選狀態(tài),其他值則為選中狀態(tài).
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 的 更少!
