第六章 创建一个基于Table的简单App(三)

专题目录:

IOS 8 开发入门--序言(一)

IOS 8 开发入门--序言(二)

第一章:创建你的第一个App(一)

第一章:创建你的第一个App(二)

第二章:使用Storyboard设计用户界面(一)

第二章:使用Storyboard设计用户界面(二)

第三章 Hello World App 浅述(二)

第四章 自动布局(一)

第五章 写代码之前先进行原型设计

第六章 创建一个基于Table的简单App(一)

第六章 创建一个基于Table的简单App(二)

与数据源和代理建立联系

虽然ViewController类已经实现了UITableViewDelegate和UITableViewDataSource协议,但是在storyboard中的UITableView并不知道。我们需要告知UITableView对象ViewController是数据源的代理。

回到storyboard中。选择table view。按住control键,点击table view并且拖拽它到Document Outline中的View Controller中。


释放按键,在弹出的菜单中选择“dataSource”。重复上面的步骤为“delegate”建立关联。

为了确保正确的建立了关联,你可以再次选择Table View。点击工具区域的关联查看器来显示已经存在的关联。或者你可以右击表格来显示关联。


测试你的App

好了,你已经准备好测试你的App了。点击“Run”按钮然后等待仿真器加载你的App。你的App现在应该可以显示一串餐馆名了。

在Table View中添加缩略图

现在这个表格没有什么特色,对不对?给它添加点图片怎么样?UITableView做这个非常简单。添加缩略图到每一行,你只需要增加一行代码就可以了。

首先下载示例图片 http://pan.baidu.com/s/1jHArCxg 。压缩包里包含三个图片文件。全部图片都是一样的只是分辨率不同。当开发iOS

APP时,推荐准备三个版本的图片。使用@3x前缀的适合iPhone 6 Plus。使用@2x前缀的适合iPhone 4/4s/5/5s/6,不带@前缀的时候非Retina显示屏的旧设备。

Xcode工程中包含一个图片资源目录(例如:images.xcassets)用来管理你工程中大多数类型的图片。要使用刚才解压的图片,你要选择images.xcassets打开资源目录。从Finder中拖出那三张图片,并把它们拽到集合视图(set list/viewer)中。


set view自动识别Retina和非Retina图片。一旦图片被放到图片集(image set)中,你在代码中可以通过非Retina文件名引用这些图片。


现在打开ViewController.swift并且在tableView(_:cellForRowAtIndexPath:)方法里面添加下面的代码。就在“return cell”前面添加。

cell.imageView.image = UIImage(named:“restaurant”)

UIKit框架提供UIImage类能够从文件创建照片。支持多种文件格式,比如PNG,GIF和JPEG。只需要将图片名字传递给UIImage类,它就能够加载图片。

回想一下我们使用的表单元格风格是Basic(基础),它包含一个默认的区域来显示图片或者缩略图。这行代码通知UITableView加载图片并且在单元格默认的图片区域显示。现在,点击“Run”按钮,你的SimpleTable App每一行都会显示这张图片。


隐藏状态条

从iOS7开始,view controller是满屏显示。现在表格的内容被状态条遮住。这样不好看。

一个简单的补救方法是隐藏状态条。你可以控制每一个view controller的显示状态。如果你想在某个特别的view controller里不显示状态条,只需简单增加下面的代码。


在ViewController.swift中插入这行代码,然后再次测试App。现在你可以看到屏幕的表格前没有状态条。

为UITableView添加自动布局约束

到现在为止你已经学了不少了。你的第二个App在iPhone 5/5s上运行的很好。你是否尝试过在iPhone 4s(3.5英寸)上运行或者将设备旋转为横屏。如果没有试过,你可以尝试一下。


在3.5英寸屏上表格没法全部显示。在横屏模式下同样如此。你现在肯定会想到,我们要使用自动布局(Auto Layout),这样表格就能适应不同的屏幕尺寸了。



转到storyboard并且选择table view。在自动布局菜单,点击Pin按钮打开Pin工具菜单。选择每一条红色的虚线。一旦被选中红色的虚线会变成实线。点击“Add 4 Constraints”按钮添加约束。这里我们为UITableview四周添加4条约束。特别的,我们想确保UITableView的底边不会超出布局推荐的底边。如果你在Document Outline中展开约束信息,可以看到两条水平空间约束和两条垂直空间约束。两条水平空间约束确保表格的左边和右边伸展到view controller边缘。垂直约束用来解决3.5英寸屏幕的问题。UITableView现在对齐自动布局推荐的底边。换句话说,你的表格将会自动调整大小来适应小的屏幕。

很酷吧。你现在可以再次测试App了。现在你的APP无论在什么屏幕尺寸还是方向上都完美适应。

你的练习

迄今为止展示的APP为所有的单元格显示一个固定的图片。你可以尝试修改App让它每个单元格显示不同的图片。

小结

Table view是iOS编程中使用最普遍的元素之一。如果你彻底理解了细节并且自己编写了App,你应该很好的掌握了如何创建你自己的table view。我试着把demo App中的所有事情都尽力简化。在真实的App中,表格的数据一般不是“硬编码”。通常数据从文件,数据库或者其他地方加载。随着不断深入我们会慢慢介绍。同时,必须确保你已经完全理解了table view是如何工作的。否则你需要回到章节开头并且重新学习。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,376评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,126评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,966评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,432评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,519评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,792评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,933评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,701评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,143评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,292评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,896评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2 348

推荐阅读更多精彩内容