编写一个护照App吧~第五章练习Passport

在这章练习叫做Passport,Passport是一个非常简单的应用,展示个人的名字、生日、国籍和照片(图5-1)。Passport还提供各种国家供你选择,显示曾经去过哪些国家。这个练习将会在下一章中继续使用。

图5-1

Exercise: Passport | Page 143

打开Xcode吧,点击顶部菜单栏的File -> New -> Project(见图5-2)。

图5-2

从模板中选择Single View Application,点击Next(见图5-3)。

图4-3

Page 144 | Chapter 5 : Building Multiscreen Apps

在Product Name一栏输入Passport,Language选择Swift,Devices选择iPhone(见图5-4),点击Next。

图5-4

把工程保存到某个文件夹中(见图5-5)。

图5-5

Exercise: Passport | Page 145

出现了工程的详细信息界面(见图5-6)。不勾选Landscape Left和Landscape Right这个两个方向,然后打开Main.storyboard(见图5-7)。

图5-6
图5-7

Page 146 | Chapter 5 : Building Multiscreen Apps

点击Inspector上工具栏中第一个图标File Inspector,看起来像是一张纸折了一个角。

鼠标移动到到中间部分,不勾选Use Auto Layout选项。这时会出现一个对话框,选择iPhone。然后不勾选Disable Size Classes。这时,Storyboard中的界面形状会改变(见图5-8和图5-9)。

Exercise: Passport | Page 147

图5-8
图5-9

选中这个界面,然后点击顶部菜单栏的Editor -> Embed In -> Navigation Controller。

Page 148 | Chapter 5 : Building Multiscreen Apps

一个新的scene会增加到Storyboard中,Navigation Controller Scene(见图5-10)。一个scene表示App一屏或者一个界面。Navigation Controller Scene和之前的View Controller Scene是连接在一起的,这连接说明View Controller Scene是Navigation Controller Scene里第一个出现视图,点击Storyboard Editor左下角的盒子按钮打开Document Outline,Document Outline显示了storyboard文件中所有的控件以及控件所处的层次等级。接着把Project Navigator隐藏起来(见图5-11)。

图5-10
图5-11

Exercise: Passport | Page 149

View Controller Scene的顶部有个灰色的方块,这就是navigation bar。双击,然后输入Passport,敲击回车。

在Inspector中间打开Object Library,在搜索框中输入Image View(见图5-12)。

图5-12

把Image View拖到View Controller界面的中间,然后打开Size Inspector(见图5-13)。

图5-13

Page 150 | Chapter 5 : Building Multiscreen Apps

X一栏输入48,Y一栏输入70,Width一栏输入225,Height一栏输入225。然后不勾选Autoresizing中的两个相交的剪头(见图5-14)。

图5-14

然后拖一个Label控件,放在Image View的左下方,然后再放两个Label控件。选中这三个Label控件,打开Attribute Inspector,在font一栏中有个带有字母T的方格,点击这个方格,弹出菜单,选择System Bold(见图5-15),点击Done。

Exercise: Passport | Page 151

把每个Label的宽调整到100pts以上,然后把3个Label控件的文字改为:Name,Birthday,Nationality(见图5-15)。

图5-15

Page 152 | Chapter 5 : Building Multiscreen Apps

然后再添加3个Label,放在右侧,对齐方式改为右对齐。在Attribute Inspector中,有个Alignment属性,可在这里找到右对齐的图标,点击图标即可修改为右对齐。宽度调整到1100pts以上,然后双击修改文字(见图5-16)。

图5-16

找到一张你自己的照片,然后点击顶部菜单File -> Add Files to Passport(见图5-17)。找到你的照片,然后勾选Copy Items if needed,选择图片文件,点击Add。回到Storyboard中来,点击Image View,然后点击Attribute Inspector中的Image下拉菜单,选中刚刚添加的照片(见图5-18)。

图5-17
图5-18

Exercise: Passport | Page 153

图片可能看起会有拉伸变形,点击Attribute Inspector中的Mode下拉菜单可以修复这个问题。选择Aspect Fill,这样会保证图片的宽高比不会变化,现在Image View中的图片看起来好多了。

从Object Library中拖拽一个Button控件,放在个人信息的下方(就是3+3个Label控件的下方)。双击Button控件,命名为Show Countries(见图5-19)。当点击这个Button时,App会展示一个国家清单。

图5-19

Page 154 | Chapter 5 : Building Multiscreen Apps

这个国家清单是由table view来处理,苹果提供了UITableViewController这个控制器来专门与table view视图协调工作。从Object Library中拖拽一个Table View Controller,放到Passport Scene旁边。

接着选中Show Countries这个Button控件,同时按住Control键,鼠标拖拽到table view controller上(见图5-20),然后松开鼠标。

图5-20

Exercise: Passport | Page 155

这时会弹出一个窗口(见图5-21),选择push,然后在两个Scene之间出现了一条线。

图5-21

而且Table View Controller Scene中有了navigation bar,双击这个navigation bar然后输入Countries Visited。

然后点击Prototype Cells下方的空白方格,接着打开Attribute Inspector,在Identifier后面输入reuseIndentifier(见图5-22)。

图5-22

这个App的storyboard部分已经完成了。现在需要创建table view controller文件。选择顶部菜单的File -> New -> File(见图5-23)。确保Source是在iOS下,选择Cocoa Touch Class,点击Next。

图5-23

Page 156 | Chapter 5 : Building Multiscreen Apps

Subclass of一栏选择UITableViewController,Class一栏输入CountriesTableViewController,不勾选Also create .xib,语言是Swift(见图5-24)。点击Next。

图5-24

Exercise: Passport | Page 157

然后选择文件保存地点,已经自动选择了当前工程所在的文件夹,确保Passport文件夹在最上方(见图5-25),然后点击Create。

图5-25

刚刚创建的CountriesTableViewController.swift文件已经自动在Xcode中打开了。

然后选中所有绿色的代码,删掉它们。注意不要一不小心删掉最底部的那个右大括号。viewDidLoad和didReceiveMemoryWarning中的绿色代码也删掉。然后隐藏Inspector,打开Project Navigator。

把鼠标光标放到class CountriesTableViewController: UITableViewController这行代码的下方,我们在这里创建变量属性,去过的国家应该是存储在数组当中,任何方法都可以访问数组,请输入下列代码:

var countries = ["Italy","Norway","England"]

numberOfSectionsInTableView方法确定table view中显示多少个section,把数字改为1,删掉这行//#warningPotentially incomplete method implementation,见下方:

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    //Return the number of sections.
    return 1
}

Page 158 | Chapter 5 : Building Multiscreen Apps

在 numberOfSectionsInTableView方法下面,还有一个numberOfRowsInSection方法,numberOfRowsInSection这个方法确定table view中显示多少行,把数字改成3,删掉这行//#warningPotentially incomplete method implementation,见下方:

override func tableView(tableView: UITableView, numberOfRowsInSection section:Int) -> Int {
     //Return the number of sections.
    return 3
}

把鼠标光标放到这两个方法下面,然后输入tableView,会自动出现一些代码,这是自动补全功能,帮助你更快的输入代码,找到下面这行代码:

tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell

然后敲击回车,删掉代码占位符。

tableview中的每一行都会调用cellForRowAtIndexPath方法,在这个方法中我们创建UITableViewCell,然后每一行都会显示我们想显示的内容。在方法中添加下列代码:

let cell = tableView.dequeueReusableCellWithIdentifier("reuseIdentifier",  forIndexPath: indexPath) as! UITableViewCell

这行代码创建了一个名为cell的常量,等号后面是tableView中可回收的cell,这个方法用来检查使用已经有了一个可回收的cell,且其identifier为reuseIdentifier。如果有这个cell,那么让cell可回收;反之,创建一个新的cell。接着添加下列代码:

var country = countries[indexPath.row]

这行代码把国家名字赋值给了country这个变量。table view中的每一行都会调用cellForRowAtIndexPath这个方法,每次被调用,indexPath变量会更新,然后提供最新的section和row number。例如,cellForRowAtIndexPath第一次被调用的时候,是第一section第一行,接着是第一section第二行,然后是第一section第三行,继续直到遍历完所有的section所有的行。indexPath.row用来提取数组中的第一个第二个和第三个国家。

接着添加下列代码:

cell.textLabel.text = country

这行代码把coutry变量的值赋值给了UITableViewCell的text属性,这样,国家名字将会展示在每行中。

Exercise: Passport | Page 159

添加最后一行代码:

return cell

应用几乎快要完成了,然而还需要修改Storyboard中的一些设置。打开Main.storybaord,然后打开Inspector。

接着点击Table View Controller Scene,接着选中Table View Controller Scene上方的黄色圆圈,选中后一个蓝色框会包裹住黄色圆圈,打开Identity Inspector,从左数第三个图标,看起来像是张报纸,在Class一栏中选择CountriesTableViewController(见图5-26)

图5-26

这个操作会把CountriesTableViewController.swift和Table View Controller Scene连起来。现在应用已经编写完成了,保存你的操作,然后点击左上角的Paly按钮(或者快捷键Command+R)。

App启动后会展示姓名生日国籍和照片(见图5-27)。点击Show Countries按钮,navigation controller会自动push一个新的view controller到最前面。

Page 160 | Chapter 5 : Building Multiscreen Apps

图5-27

每一个cell都显示一个不同的国家(见图5-28)。左上角的back(返回按钮)是自动生成的,文字显示的是之前界面的title,如果之前的界面没有title,就会显示Back。点击Back这个按钮。

Exercise: Passport | Page 161

图5-28
**个人挑战:** 如果你想让这个App能够展示5个国家,你需要做哪些改动呢?展示10个呢?或者1000个国家?

如果App没有按照你想要的结果运行,或者程序有了错误或警告,不要太担心,学习的最佳方式就是试错,熟能生巧,到我们的网站上下载示例代码,对比一下代码,多试几次,直到搞定这个程序为止。

Page 162 | Chapter 5 : Building Multiscreen Apps

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

推荐阅读更多精彩内容