在这章练习叫做Passport,Passport是一个非常简单的应用,展示个人的名字、生日、国籍和照片(图5-1)。Passport还提供各种国家供你选择,显示曾经去过哪些国家。这个练习将会在下一章中继续使用。
Exercise: Passport | Page 143
打开Xcode吧,点击顶部菜单栏的File -> New -> Project(见图5-2)。
从模板中选择Single View Application,点击Next(见图5-3)。
Page 144 | Chapter 5 : Building Multiscreen Apps
在Product Name一栏输入Passport,Language选择Swift,Devices选择iPhone(见图5-4),点击Next。
把工程保存到某个文件夹中(见图5-5)。
Exercise: Passport | Page 145
出现了工程的详细信息界面(见图5-6)。不勾选Landscape Left和Landscape Right这个两个方向,然后打开Main.storyboard(见图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
选中这个界面,然后点击顶部菜单栏的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)。
Exercise: Passport | Page 149
View Controller Scene的顶部有个灰色的方块,这就是navigation bar。双击,然后输入Passport,敲击回车。
在Inspector中间打开Object Library,在搜索框中输入Image View(见图5-12)。
把Image View拖到View Controller界面的中间,然后打开Size Inspector(见图5-13)。
Page 150 | Chapter 5 : Building Multiscreen Apps
X一栏输入48,Y一栏输入70,Width一栏输入225,Height一栏输入225。然后不勾选Autoresizing中的两个相交的剪头(见图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)。
Page 152 | Chapter 5 : Building Multiscreen Apps
然后再添加3个Label,放在右侧,对齐方式改为右对齐。在Attribute Inspector中,有个Alignment属性,可在这里找到右对齐的图标,点击图标即可修改为右对齐。宽度调整到1100pts以上,然后双击修改文字(见图5-16)。
找到一张你自己的照片,然后点击顶部菜单File -> Add Files to Passport(见图5-17)。找到你的照片,然后勾选Copy Items if needed,选择图片文件,点击Add。回到Storyboard中来,点击Image View,然后点击Attribute Inspector中的Image下拉菜单,选中刚刚添加的照片(见图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会展示一个国家清单。
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),然后松开鼠标。
Exercise: Passport | Page 155
这时会弹出一个窗口(见图5-21),选择push,然后在两个Scene之间出现了一条线。
而且Table View Controller Scene中有了navigation bar,双击这个navigation bar然后输入Countries Visited。
然后点击Prototype Cells下方的空白方格,接着打开Attribute Inspector,在Identifier后面输入reuseIndentifier(见图5-22)。
这个App的storyboard部分已经完成了。现在需要创建table view controller文件。选择顶部菜单的File -> New -> File(见图5-23)。确保Source是在iOS下,选择Cocoa Touch Class,点击Next。
Page 156 | Chapter 5 : Building Multiscreen Apps
Subclass of一栏选择UITableViewController,Class一栏输入CountriesTableViewController,不勾选Also create .xib,语言是Swift(见图5-24)。点击Next。
Exercise: Passport | Page 157
然后选择文件保存地点,已经自动选择了当前工程所在的文件夹,确保Passport文件夹在最上方(见图5-25),然后点击Create。
刚刚创建的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)
这个操作会把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
每一个cell都显示一个不同的国家(见图5-28)。左上角的back(返回按钮)是自动生成的,文字显示的是之前界面的title,如果之前的界面没有title,就会显示Back。点击Back这个按钮。
Exercise: Passport | Page 161
如果App没有按照你想要的结果运行,或者程序有了错误或警告,不要太担心,学习的最佳方式就是试错,熟能生巧,到我们的网站上下载示例代码,对比一下代码,多试几次,直到搞定这个程序为止。
Page 162 | Chapter 5 : Building Multiscreen Apps