close
当前位置: 物联网在线 > 技术文库 > ios >

写一个iOS复杂表单的正确姿势

这几天项目的新需求中有个复杂的表单界面,在做的过程中发现要比想象中复杂很多,有好多问题需要处理。有很多东西值得写下来好好梳理下。

需求分析:

写一个iOS复杂表单的正确姿势

6创建网店1.png

上图便是UI根据需求给的高保真, 我们先根据这张图片来描述一下具体需求,明确一下我们都需要干些什么。

创建网店这个界面是一个复杂的表单,有“网店名称”、“网店主标签”、“网店简介”、“网店地址”、“网店座机”、“email”、“网店LOGO”、“网店封面图”这些项。大部分都是输入框,但也有几项有所不同。“网店地址”项,当被点击后会弹出一个pickView来选择“市&区”;“网店LOGO”和“网店封面图”是一样的,是选取图片的控件,要求既可以通过相册选取图片,也可以现场拍照选择。当被点击后,弹出一个ActionSheet来是以“拍照”或以“相册”来选取图片。当选取成功后拍照的背景图片变为被选取的图片,并在右上角出现一个删除按钮,可以删除还原再次选取。

表单中除了“email”外所有的项目都是必填的,且“网店名称”、“网店主标签”、“网店简介”和“网店座机”分别有30、20、500、15字的长度限制。“email”虽然为选填,但若填写了则会进行邮箱格式校验。对字数长度的限制要在输入过程中进行监听,若输入时超过限制,则输入框出现红色边框并出现提示文字。等最后点击了“提交”按钮后要进行数据校验,所有该填但未填,所有格式不正确的项都会出现红框和提示文字,当所有数据都合法后才可以提交给服务器。

需求大体就是如此。

这个界面我们还是以tableView来实现,由cell视图来表示图中所需填写的项目。那我们得先分析下这个界面需要写哪几种样式的cell。

该界面总共有4种样式的cell。4种样式的cell样式也有共同点,每个cell左边部分均为表示该行所要填写的项目名称,右边部分则为填写或者选取的内容值,这些值的显示形式有所不同。 CreateShopTFCell和CreateShopTVCell其实非常类似,右边首先是一个灰色的背景视图,只不过在灰色背景之上的前者是textField,而后者是textView;CreateShopPickCell右边则是两个灰色背景视图,点击之后便弹出一个pickView供你选取“市&区”;CreateShopUploadPicCell右边则是一个UIImageView,无图片被选取时默认是一个相机的图片,当被点击后弹出ActionSheet供你选择拍照还是从相册选取照片,选好照片后UIImageView的图片被替换,并在右上角出现红色的删除按钮。

如下图所示:

写一个iOS复杂表单的正确姿势

6创建网店.png

正确地将视图和数据绑定:

我们假设已经写好了上面4种样式cell的代码,现在我们在控制器里为其填充数据。

我们首先定义一个表示cell数据的CreateShopModel。该model是为了给cell填充数据,可以看到它里面的属性就是cell上对应应该显示的数据项。

同时,我们在开头也定义了一个枚举CreateShopCellType来代表4种不同样式的cell,用于在tableView返回cell的代理方法里根据枚举值来返回相应样式的cell。

#import         typedef enum : NSUInteger {        CreateShopCellType_TF = 0, // textfield        CreateShopCellType_TV, // textView        CreateShopCellType_PICK, // picker        CreateShopCellType_PIC, // upload picture    } CreateShopCellType;         @interface CreateShopModel : NSObject         @property (nonatomic, copy)NSString                    *title;  // 所要填写的项目名称    @property (nonatomic, copy)NSString                    *placeholder;    @property (nonatomic, copy)NSString                    *key; // 表单对应的字段    @property (nonatomic, copy)NSString                    *errText; // 校验出错时的提示信息    @property (nonatomic, strong)UIImage                    *image;     // 所选取的图片    @property (nonatomic, assign)CreateShopCellType         cellType; // cell的类型    @property (nonatomic, assign)NSInteger                 maxInputLength; // 最大输入长度限制         @end  
(责任编辑:ioter)

用户喜欢...

将eFPGA添加到SoC中比仅添加加速器更复杂

选择将可编程逻辑添加到带有 eFPGA 的SoC中只是一个开始。其他选择包括涉及多少查找表(LUT),多少路由和什么拓扑,数据如何传入和传出结构,数据是否需要与系统存储器一致,如何编程和...


压电传感器信号调节方案

一个12位,1 MSPS数据采集系统,仅使用两个有源器件。该系统使用3.3 V单电源处理来自压电传感器的电荷输入信号,在10C温度范围内校准后,总误差小于0.25%FSR,非常适合各种实验室和工业测量...


介绍一个集成的家庭健康监测系统,该系统包括基于视觉的活动监测系统和生命体征监测系统

医疗保健行业面临三大挑战:人口越来越老,慢性病病例急剧增加,医疗成本也在不断攀升。 预计未来20年老年人口将呈指数级增长。 到2030年,欧洲人将超过65岁,其中40%将需要援助。 如果...


电子书:物联时代网 如何领导一个连接的世界

电子书:物联时代网 如何领导一个连接的世界...


一个用于多个DC/DC拓扑的IC:双输出降压IC也可用于SEPIC和升压应用

工业系统设计人员和汽车制造商是电力电子产品的重要消费者,需要各种可用的DC / DC转换器拓扑结构,包括各种组合的降压,升压和SEPIC。在理想的世界中,每个新项目都将通过自己的专用控...


5G向前移动,一次一个拓扑

5G继续向前发展,但是随着5G成为现实,2018年将成为我们记忆中 的 一年吗?让我们来看看发生了什么以及我们可以期待什么。 当前状态 随着2017年12月发布的初始5G规范第15版的初稿,3GPP及其贡...


为下一个物联网硬件提供一个良好的开端

如果只有硬件创新能够以灵感的速度发展。 唉,设计周期,零件采购,生产和认证要求往往会导致在将产品推向市场之前花费数年时间。 这个漫长而昂贵的过程意味着开发人员缺乏必要的时间...


设计一个新的基于AI的聊天机器人

聊天机器人是一名数字化员工,可以自主回答客户的问题。开发一个聊天机器人帮助爱立信服务工程师全天候回复他们的查询是Sudipta Bose的最后一个学期项目,他是来自印度丹佛的IIT(ISM)印度...


自供电电流回路:仍然是一个可行的传感器接口选项

物联网连接是一个热门话题,但除了互联网方面,它并不是一个新想法。几十年来,工业和一些商业应用已将各种传感器和传感器连接到基于计算机的数据采集和控制系统,物联网正在扩大这些...


解决5G的错综复杂问题

毫无疑问,5G无线通信继续占据头条新闻,因为许多公司都在某种程度上参与了该标准。去年12月,3GPP发布了非独立(NSA)5G新无线电(NR)规范。很快,5G独立(SA)版本将完成。 3GPP标准在定...