A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 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的乐趣还有成就感,但是之后重点应该会放在制作流程上面,所以如果对于其中观念有问题的小伙伴,可以在下面留言,阿达会一起参与讨论喔!让我们用一行一行的代码,一步一步的实现我们的梦想,我是阿达,我们下回见!







评分

参与人数 1技术分 +2 收起 理由
黑妞 + 2 很给力!

查看全部评分

12 个回复

倒序浏览
一如往常,附上項目下載:http://pan.baidu.com/s/1mgkUKvI
回复 使用道具 举报
很不错,就是感觉有些术语的叫法不是很一样,不过大同小异了
回复 使用道具 举报
看不懂!
回复 使用道具 举报
沙睿 来自手机 中级黑马 2015-6-24 21:28:11
报纸
mark  支持!!!!!!!
回复 使用道具 举报
加油....
回复 使用道具 举报
tabor 中级黑马 2015-6-24 22:47:00
7#
这是极好的~~
回复 使用道具 举报
Kuhoku 中级黑马 2015-6-25 01:50:32
8#
xiaofei93 发表于 2015-6-24 14:04
很不错,就是感觉有些术语的叫法不是很一样,不过大同小异了

技術語這個問題我一直想辦法要同步,可是有的時候就是會忘記修改,之後考慮後面附上英文名這樣或許大家比較容易看懂
回复 使用道具 举报
Kuhoku 中级黑马 2015-6-25 01:51:52
9#

可以從第一篇開始追喔 因為這是一篇按部就班來的
回复 使用道具 举报

你也加油喔! 棒棒的!
回复 使用道具 举报

感謝小夥伴的支持 有興趣可以跟著做喔!
回复 使用道具 举报
:hug:
回复 使用道具 举报

抱抱~黑妞辛苦了
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马