四、swift重写Sample
本章开始进入正题,笔者将分搭建程序结构、构建storyboard、构建数据层、构建展示层、构建控制层、添加View的阴影、添加View的动画效果七个部分来对官方Sample的Element工程进行重写,其中涉及到的问题会给出分析和说明。不太了解storyboard的请参考官方教程《Start Developing iOS Apps Today》
1.搭建程序结构
对于程序的目录结构,完全是按照我个人的习惯所创建,由于结构对编译运行没有任何影响,是完全面向开发者的,所以尽量使用自己习惯的路数来搞比较高效。总体结构如图。
1.本文按照业务功能(功能页面)来划分目录结构,分为AppDelegate、Resources、DataSources、View。
2.AppDelegate(应用代理),作为应用的入口,理论上只会有AppDelegate这一个文件。
3.Resources(资源),负责管理配置文件、storyboard、图片xcassets等资源,以后的coredata、影音等资源也会放入该目录管理。
4.DataSources(数据源),负责管理数据实体以及数据层服务,不同业务类型的数据将会以子目录形式分类管理,每个子目录都会存在数据实体模型、对应的操作服务(例如使用sqlite、coredata等组装、操作数据的类)等类。本文仅包含化学元素实体以及对应的服务类(服务类仅仅实现从plist中获取并排列组装数据)
5.View(页面),负责管理功能页面以及页面中的功能,不同业务类型的页面会以子目录形式分类管理,每个子目录会存在view控制器Controller、自定义view、数据集等子目录,每个子目录下根据需要包含对应的类。本文中包含TabBarView(页签)、TableView(列表)、DetailView(明细页面)三个子类。
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