Swift教程_通过改造官方Sample学习Swift（四）_swift重写Sample（搭建程序结构、构建storyboard）

Swift教程_通过改造官方Sample学习Swift（一）_Element示例简介

Swift教程_通过改造官方Sample学习Swift（二）_Swift基础（简单值、控制流、方法和闭包）

Swift教程_通过改造官方Sample学习Swift（三）_Swift基础（对象和类、枚举和结构、协议和扩展、泛型）

Swift教程_通过改造官方Sample学习Swift（四）_swift重写Sample（搭建程序结构、构建storyboard）

Swift教程_通过改造官方Sample学习Swift（五）_swift重写Sample（构建数据层）

Swift教程_通过改造官方Sample学习Swift（六）_swift重写Sample（构建控制层）

Swift教程_通过改造官方Sample学习Swift（七）_swift重写Sample（构建展示层）

Swift教程_通过改造官方Sample学习Swift（八）_swift重写Sample（添加View的动画效果、添加View的阴影）

Swift教程_通过改造官方Sample学习Swift（九）_总结

四、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（明细页面）三个子类。

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的结构及配置图如图。





点击进入ooppookid的博客