本帖最后由 Kuhoku 于 2015-6-24 13:02 编辑
一行代码一场梦,大家好我是阿达,到目前为止我们已经可以选取一间餐厅显示他的相片,可是我们来想像一下,如果可以显示更多的细节,会不会更好呢?
今天阿达跟大家分享的部分有以下几点: - 改善Food Pin App的细节以及显示更多的资讯。
- 自订导览列的外观
首先,我们就先来看看如何调整细节视图吧!
我们要准备在表格上列出餐厅资讯,包含名称、型态与位置的资讯。餐厅图片会移到上面一点的位置。 到Storyboard裡面,我們從元件褲裡面選取出 TableView,並拖曳到細節控制器(Detail View Controller),放在 View 下面,設定尺寸設定:
width: 320 height:568
完成了之后看到画面应该是如下图:
好的接下来就是选取表格视图,在属性检阅器中设定 prototype cell 为1 如此一来会将 prototype cell 加入表格视图中。
接下来我们把左手边栏位里面的 image view 放在 tableViewCell 上面
完成之后看起来就像这个样子
在属性检阅器选取表格视图cell 并设定识别码 ( Identifier) 为 『Cell』
再把栏位的高度设定为 36 。
接下来我们从元件库里面拖曳两个 label 到cell里面,一个命名为 『Field』,一个命名为『Value』 ,字体使用 『Avenir Next Medium,大小为14点。
座标位址跟大小其实就看个人喜欢,不过在这里阿达还是附上来给大家参考
Field : X : 17 , Y : 8 , width : 70 , height : 20
Value :
X : 95 , Y : 8 , width : 210 , height : 20
好了,接下来我们要建立一个新的类别来控制我们的Cell ,按下快捷键command + N 之后选择 『Cocoa Touch Class 』之后继续,并且将它命名为『DetailTableViewCell』,将它设定为UITableViewCell。
选取刚建立的 DetailTableViewCell.swift,加入两个变数给Field以及 Value。当然,别忘记把cell 跟 DetailTableViewCell 做连接喔。
完成之后画面会像这样子的。
接下来我们要更新 DetailViewController 的内容,首先我们要加入代理器也就是,UITableViewDataSource,UITableViewDelegate 。
这里会发现有个报错,这是因为我们用了代理器,却还没有实作的关系,没有关系让我们继续看下去,之前我们宣告restaurantImage 变数来存放所选取的餐厅相片。因为我们要显示其他像是型态,位置方面的资讯,最好的方式是将它已 Restaurnat 物件来取代。
var restaurant: Restaurant!
接下来,因为图像已经包含在 restaurant 物件中,更新viewDidLoad 方法的程式如下:
self.restaurantImageView.image = UIImage(named:restaurant.image)
最后,就是来实作 UITableViewDataSource 协定的方法来填入餐厅的资讯:
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 4; }
简单的说,跟tableview说,给我四个栏位吧!
有了四个栏位之后就是要往里面放资料啦,很多人在这里会使用 if 但是在这里,阿达想使用switch 因为swift 中 switch 实在太重要了。因为在swift中 switch 叙述经过明显的改良,相较于其他语言显得强大很多。
其中最大的差异就是当 case 实现的时候,他会自动进入下一个 case 。并不需要每一个 case 都加上一个 break 。
接下来就是重头戏啦!我们点选左手边 tableview 按下右键,将 dataSource 跟 delegate 连接给 DetailViewController 。
接下来就是大家最喜欢的 command + R 时间啦!
感觉是不是好棒棒的啊!?今天这个资料传递跟之前画面切换其实应该是一起写的,可惜篇幅实在太长,阿达最近想了很久,往后的帖子着重在制作流程,减少说明的部分,这样子可以更精简一点,因为最初的目的就是希望追完阿达十张帖子的小伙伴们,可以完成一个App。让小伙伴们一起享受做App的乐趣还有成就感,但是之后重点应该会放在制作流程上面,所以如果对于其中观念有问题的小伙伴,可以在下面留言,阿达会一起参与讨论喔!让我们用一行一行的代码,一步一步的实现我们的梦想,我是阿达,我们下回见!
|