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)

用户喜欢...

解决5G的错综复杂问题

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


一个经过验证的工业物联网成功计划

今天的数据很像太阳能。它的数量非常庞大-每天创造超过250万太字节- 每个人都希望找到一种方法来利用其动力来进行操作。但这是一个复杂的过程,你现在的状况仍然可行,让其他人想出来...


STMicroelectronics 智能、灵活的 NFC 跟踪器评估板包括一个全面的软件库

STMicroelectronics 智能、灵活的 NFC 跟踪器评估板包括一个全面的软件库 STMicroelectronics智能、灵活的 NFC 跟踪器评估板带传感器,包括全面的软件库和示例应用程序,可监视和记录通过 NFC 传输的来...


一个小小的物联网知识可以走很长的路

物联网(IoT)正在改变一切,它不仅仅是人与机器之间的互动。 与任何新兴或新兴技术一样,它所创造的变化常常以多种方式在社会中涟漪。它可能会改变企业的运营方式,甚至改变他们提供...


无人机设计中的下一个进化步骤

有人认为,无人机(UAV)或无人驾驶飞机的商业重要性可能与互联网一样重要。诸如空中摄影和录像等高性能应用在很大程度上被无人机民主化,具有很大的吸引力和相应的高音量。更深奥的用...


了解物联网中的“事物”

我有一个难以置信的乐趣,就是逃避东北部的冬季低潮,然后前往佛罗里达阳光灿烂的椰林(Coconut Grove)参加国际维护大会(IMC)。这个年会是资产管理者,工厂经理和可靠性工程师必须看到...


如何建立一个可扩展的DIY iBeacon

在阅读Eddystone发布后,我对物理网络的概念感到非常兴奋。从200多个通知走出商场的想法在一定程度上蕴藏着我的热情,但是使用iBeacons做广告和销售以外的事情是一个非常有趣的机会。 我有一...


用Raspberry Pi 3构建一个低成本的工业控制器

很少有小型工厂操作要求严格的操作环境,高I / O容量和可编程逻辑控制器(PLC)最初预期的复杂功能要求的组合。在缩小版本的PLC的同时,设计人员现在也可以选择一系列低成本的开源硬件和...


降低机器人风险:如何设计一个安全的工业环境

工业自动化(IA)的增加,尤其是工业机器人的使用,正在增加人类操作员与其他移动设备或移动机器之间的意外交互的机会。设计人员有责任采取适当且经常重叠的安全措施,以避免从生产中...


在恶劣的环境中实现复杂的传感和控制系统

在许多工业应用中,感知,记录和交流关于环境条件的数据是至关重要的。许多工业过程涉及高温,高压,振动和腐蚀性气体或液体,但是传感对于控制和监测这些过程是非常重要的,通常在非...