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)

用户喜欢...

走近深度学习——来解决一个年龄检测的问题

介绍 通过阅读或观看视频/MOOC来学习数据是一回事,将之应用到具体问题之中又是另一回事了。你需要同时做好才能...


除了端到端,英特尔在自动驾驶领域还有一个杀手锏

针对自动驾驶,英特尔自动驾驶解决方案资深首席工程师兼首席系统架构师Jack Weast这样发问,“我们的自动驾驶汽车...


用Python画一个中国地图

为什么是Python 先来聊聊为什么做数据分析一定要用Python或R语言。编程语言这么多种,Java, PHP都很成熟,但是为什么...


Thunderboard Sense评测——贵族之选,一个真正懂你的超低功耗物联网传感器开发套件

在2017贸泽电子智造创新大赛即将开赛之际,爱板网收到了不少赞助商为此次大赛的参赛者提供的开发板,到底多少种...


训练一个神经网络 能让她认得我

作者:哪里来的木木 这段时间正在学习tensorflow的卷积神经网络部分,为了对卷积神经网络能够有一个更深的了解,自...


实战 | 让机器人替你聊天,还不被人看出破绽?来,手把手教你训练一个克隆版的你

作者:史天 聊天机器人到底是什么呢?说白了,就是计算机程序通过听觉或文本方法进行对话。 当今最流行的四个对...


如何满足复杂系统的高性能时序需求

时钟设备设计使用 I2C 可编程小数锁相环 (PLL),可满足高性能时序需求,这样可以产生零 PPM(百万分之一)合成误差...


一个优雅地探索相关性的新可视化方法

一个古老的诅咒一直萦绕着数据分析:我们用来改进模型的变量越多,那么我们需要的数据就会出现指数级的增长。...


美市调公司预测 下一个营销战场:无人车广告

这种利用科技、无需人类司机的“无人车”,除了带来交通变革,又将引发怎样的营销战场?...


教程 设计一个低成本手势感应系统为汽车和工业应用

人机界面(HMI)是在几乎所有的工业和汽车应用中的关键组成部分。 作为相互作用变得更加复杂,传统的开关设计不适合于许多环境中:它们是违反直觉的,并从其它任务,例如控制机器或驾...