Swift教程_零基础学习Swift完整实例(四)_swift完整实例(搭建程序结构、构建storyboard)-阿里云开发者社区

开发者社区> 数据库> 正文
登录阅读全文

Swift教程_零基础学习Swift完整实例(四)_swift完整实例(搭建程序结构、构建storyboard)

简介:

四、swift重写Sample

本章开始进入正题,笔者将分搭建程序结构、构建storyboard、构建数据层构建展示层构建控制层、添加View的阴影添加View的动画效果七个部分来对官方Sample的Element工程进行重写,其中涉及到的问题会给出分析和说明。不太了解storyboard的请参考官方教程《Start Developing iOS Apps Today》

1.搭建程序结构

对于程序的目录结构,完全是按照我个人的习惯所创建,由于结构对编译运行没有任何影响,是完全面向开发者的,所以尽量使用自己习惯的路数来搞比较高效。总体结构如图。


1.本文按照业务功能(功能页面)来划分目录结构,分为AppDelegateResourcesDataSourcesView

2.AppDelegate(应用代理),作为应用的入口,理论上只会有AppDelegate这一个文件。

3.Resources(资源),负责管理配置文件、storyboard、图片xcassets等资源,以后的coredata、影音等资源也会放入该目录管理。

4.DataSources(数据源),负责管理数据实体以及数据层服务,不同业务类型的数据将会以子目录形式分类管理,每个子目录都会存在数据实体模型、对应的操作服务(例如使用sqlite、coredata等组装、操作数据的类)等类。本文仅包含化学元素实体以及对应的服务类(服务类仅仅实现从plist中获取并排列组装数据)

5.View(页面),负责管理功能页面以及页面中的功能,不同业务类型的页面会以子目录形式分类管理,每个子目录会存在view控制器Controller、自定义view、数据集等子目录,每个子目录下根据需要包含对应的类。本文中包含TabBarView(页签)、TableView(列表)、DetailView(明细页面)三个子类。

2.构建storyboard

storyboard作为官方推荐使用的页面及页面关系设计器,非常方便且直观,可以节省很多代码和控制。在新版本中增加了九宫格视图,可以使开发者很轻松的就能做出兼容各类苹果产品的应用。本文的storyboard设计图如下,与sample没有区别,包含一个TabBarView,一个带有导航Navigation的TableView和一个空白View(DetailView)。



1.TabBarView

首先,TabBarView的controller需要我们自定义,用来加载我们需要的页签。在TabBarViewController目录下创建PKOElementTabBarViewController: UITabBarController,并应用于TabBarView。

其次,通过control键拖动创建relationship segue过渡(官方翻译为过渡,可以理解为跳转的概念),指向navigationController(若tableView还没有添加导航,则指向TableView),使得页签能够展示该导航及导航的主体。


TabBar的结构及配置如图。


2.TableView

首先,TableView的controller需要我们自定义,用来加载我们需要的列表数据以及开打明细时数据的传递等。在TableViewController目录下创建PKOElementTableViewController: UITableViewController,应用于TableView。

其次,由于我们需要列表的每一列要显示图片+文字的效果,所以还需要自定义一个CellView。在TableView目录系创建PKOElementTableViewCell: UITableViewCell,应用于TableViewCell。在Cell下添加一个用来显示文字的Label和用来显示图片的空白View。
再次,由于列表的Cell显示的图片需要我们自己处理,所以还不要自定义一个用来显示图片的View,在TableView目录下创建PKOElementTableViewCellIcon: UIView,应用于用来显示图片的空白View。
然后,将TableView通过Editor->Embed In->Navigation Controller引入导航,并为导航添加一个storyboard id:"navForTableView",用于通过storyboard来查找这个navigation。
最后,通过control键拖动创建show segue过渡,指向detailView,使得点击列表Cell能够跳转至明细页面,并自动添加了返回功能。


TableView及Navigation的结构及配置图如图。





3.DetailView

首先,DetailView的controller需要我们自定义,用来绘制非常好看的明细页面以展示数据以及添加动画效果等。在DetailController目录下创建PKOElementDetailViewController: UIViewController,应用于DetailView。

其次,由于我们需要在明细页面以图片的方式展示数据,所以还需要自定义一个View。在DetailView目录系创建PKOElementDetailImageView: UIView,这个自定义的View不应用于storyboard中任何一个View,完全由PKOElementDetailViewController中通过代码实现。


TableView及Navigation的结构及配置图如图。

原文地址:http://blog.csdn.net/ooppookid/article/details/40356603

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: