设计师应该了解的iOS应用开发基础知识

以同样的方法对另外两个View Controller进行操作，将它们分别与“PortfolioViewController”、“ContactViewController”建立关联、挂上NIB文件，并为它们各自的Tab Bar Item设置相应的Title(Portfolio、Contact)与图标(tab-icon-portfolio.png、tab-icon-contact.png)。

Tab在高亮状态时的颜色也是可以定义的。在文档结构列表中选中“Tab Bar”对象，然后在右侧的属性检查器中找到“Image Tint”，在其中设置我们所需要的配色方案。不过这里所做的设置只有在iOS 5以上的系统中才会有效，对于iOS 4以及更低版本的系统来说，高亮状态仍然时默认的蓝色。

我们已经为Tab与视图建立了关联，要检视它们能否正常工作，我们还需要在每个视图当中添加一些范例内容。

在Xcode左侧的导航栏中选择HomeViewController.xib，然后从右侧的对象库中拖拽一个Label控件到编辑区当中的空白View上面。双击该控件，将文案更改为“Home”。

在PortfolioViewController.xib与ContactViewController.xib当中也执行同样的操作，Label的文案相应的更改为“Portfolio”和“Contact”。

现在点击“Run”按钮，或使用快捷键Command+R来运行一下叭。我们可以在iPhone模拟器中看到，应用的标签栏已经可以正常的切换界面了。不赖！

向视图中添加图片和文字

要通过Interface Builder向视图当中添加图片和文字，我们首先需要创建一些对应着不同类型内容的“容器”，也就是“Image View”与“Text View”。与添加View Controller的方式相同，我们也需要将这两类View从右侧的对象库当中拖拽出来放到界面当中。我们还可以在规格检查器(Size inspector)中对这些容器进行精准的定制，包括布局位置、尺寸等。

而在属性检查器(Attributes inspector)中，我们可以为图片容器指定其中所要显示的图片，也可以控制文字容器的各种属性。

接下来我们要向HomeViewController.xib当中添加图片。首先删除之前的Label控件，从库中拖拽一个Image View到界面当中，在属性检查器当中的“Image”下拉列表里选择“home-bg.png”，然后将“Mode”设置为“Top Left”。

到规格检查器(Size inspector)中，确保其中的4个属性值分别为“0”、“－20”、“320”、“480”，如下图所示：

接下来，拖拽一个Text View到界面中，双击编辑其中的文案，例如更改为“A Catchy Slogan Here”，在属性检查器中设置为居中对齐，将字色设置为白色，并禁用背景色，然后将Font类型更改为“Custom”，将其他属性设置为“Snell Roundhand,Regular,24”。

现在我们的HomeViewController.xib看上去大致是这样的：

因为这三个界面都是被放置在Tab Bar Controller体系当中的，也就是说我们在设计这些单独界面的时候必须考虑到底部标签栏的占位。Xcode可以帮助我们在界面当中模拟这类全局元素的占位情况。确保在Xcode左侧的导航栏里选中HomeViewController.xib文件，在文档结构列表中选择“View”对象，然后在右侧的属性检查器(Attributes inspector)中找到最上面的“Simulate Metrics”一栏，在“Bottom Bar”中选择“Tab Bar”，如下图所示：

这个功能并不会向实际应用里又添加一个标签栏，它只是为我们提供一个可视化的设计指引，帮助我们对界面元素进行更精准的定位。

接下来，我们可以向Portfolio及Contact界面中添加图片和文字内容了。具体的样式可以参考本文开始时的目标演示图片，或参考模板包当中提供的PSD文件。

在Portfolio界面当中创建案例缩略图，以及在Contact界面中创建联系方式按钮时，我们需要使用对象库中的Round Rect Button控件，而不是之前那样使用Image View；因为这些地方都是需要响应用户的操作并由此触发相关行为的，按钮类的控件可以帮我们实现这个目标。将Round Rect Button拖拽到界面内，到右侧的属性检查器当中，将按钮类型(Type)设置为“Custom”，然后就可以通过下面的“Image”属性为其设置具体的背景图片了；如果需要的话，还可以进入规格检查器(Size inspector)当中对按钮的尺寸进行设置，使其符合按钮图片的大小。

3个界面都打造完毕后，点击“Run”按钮或使用快捷键Command+R来运行应用，通过iPhone模拟器来检视当前的工作成果。

其他技巧

在iPhone模拟器中点击Home按键回到首屏，你会发现我们的App图标只是一个干巴巴的白板，在应用被打开的时候也没有任何额外的加载图像。

回到Xcode中，点击导航栏中的Portfolio项目图标，此时内容区会呈现出应用的信息概况。在其中找到“App Icons”和“Launch Images”，这里就是我们为应用添加图标和加载图像的地方了。

设置的方法很简单，在Finder里面找到模板包App Icons路径下的相关图片文件，直接拖拽到那4个空位当中就OK了。

如果要自己制作应用图标，在尺寸方面要符合以下规格(以像素计)：

• 标准：57×57
• Retina：114×114

加载图像的尺寸则与屏幕一致：

• 标准：480×320
• Retina：960×640

除了在iPhone当中显示以外，应用图标的使用环境还有很多，例如两种规格的iPad、系统设置(Settings)、Spotlight搜索结果、iTunes等等。这篇文章很详细的给出了这些上下文环境中所需的图标规格，另外也可以参考iOS Human Interface Guidelines对于图标规格及使用方法的说明。

值得一提的是，iOS会自动为你的图标添加圆角和高光，所以在制作的时候你并不需要自己处理这些效果。如果不希望系统为图标添加高光效果，可以在之前设置图标的地方勾选“Prerendered”。下图演示的是勾选“Prerendered”前后的效果对比：

要改变图标下面显示的应用名称，点击应用概况中的“info”选项卡，这里所呈现的就是应用的.plist文件当中的内容。.plist是一个XML文件，里面包含了应用的主要设置信息：

其中的一些信息，例如“Main nib file base name”，所指向的是应用在第一次打开时需要加载的资源文件。其他信息，例如“Bundle Identifier”，则与通过iTunes Connect向App Store提交应用时的相关环节有关。

在这些信息中找到“Bundle display name”一项，将右侧的“${PRODUCT_NAME}”修改为你想要的名称即可。

辅助编辑器(Assistand Editor)

到目前为止，我们的自定义按钮是可以对点击动作作出响应的，不过也仅此而已，它们还不会做任何其他事情。为了使它们能够工作起来，我们需要借助辅助编辑器的帮助来写一些代码。

在Xcode左侧的导航栏当中选择ContactViewController.xib，然后到Xcode界面的右上角找到辅助编辑器按钮，选中它：

在这种模式下，编辑界面会被分割为两部分，其中左侧是ContactViewController.xib的可视化编辑界面，右侧是与其对应的头文件，即ContactViewController.h。我们可以在下图中看到，文档结构列表和右侧边栏已经被收起了，以便为两个编辑视图提供更多的空间。你可以到Xcode菜单中的“View”一项中找到相关的切换操作。另外你大概也发现了，图中代码编辑区的样式风格与你的有所不同，这是因为我(英文原文作者)使用了“Dusk”主题；你可以在Xcode→Preferences的“Fonts and Colors”更改代码编辑区的主题。

声明属性(Property)与方法(Method)

一个“类”通常包含特定的“属性”和“方法”。我们可以将“属性”理解为“类”所拥有的特性特征，而“方法”则是指“类”能做些什么。

当我们向ContactViewController中添加按钮时，我们需要将这个按钮声明为ContactViewController类的属性，并通过“方法”告诉按钮在被点击时应该做怎样的反应。

在ContactViewController.h文件中，我们可以看到如下代码：

其中，第一行代码的作用是让我们的类可以访问UIKit框架当中的各种预置的UI类。

接下来一行(@interface)的作用是将ContactViewController声明为UIViewController的一个子类。UIViewController是在UIKit库中预先定义的，它的子类可以继承它的所有特性(包括属性和方法)。

我们可以在@interface与@end之间声明各种自定义的属性和方法。按住control键，从ContactViewController.xib里的“WWW”按钮上拖出一条导线，一直拉到.h文件的代码中@interface与@end之间的部分，释放。这时会出现一个对话窗：

确保“Connection”当中所选的是“Outlet”，并在“Name”里输入“websiteButton”，点击“Connect”，Xcode会自动生成一段代码。

接下来再执行一次相同的拖放操作，这次，在对话窗中为“Connection”选择“Action”，并在“Name”中输入“openWebsite”，点击“Connect”，Xcode同样会自动生成一段代码。

到目前为止ContactViewController.h中的代码看上去应该是这样的：

还不赖，不过这些代码都是什么意思？

@property用来声明一个新的属性，括号中是两个参数，其中“retain”涉及内存管理，我们将在后文中讲到；而“nonatomic”则与多线程管理相关，多数的属性都要声明为nonatomic，禁用多线程。接下来是关于返回类型的声明，其中“IBOutlet”代表这个属性是绑定于用户界面中某个特定的控件的；“UIButton *websiteButton”的作用是将当前属性命名为“websiteButton”，并使其继承UIKit中定义的UIButton类。

接下来一行代码用来声明新的方法。其中的“- (IBAction)”同样用来将方法与.xib文件中的界面控件绑定起来。“openWebsite”是这个方法的名称，冒号后面的“(id)sender”是参数，用来传递产生动作的对象信息，不过我们现在用不到它。

也许你已经注意到了，我们在创建View Controller类的时候，名称都是以大写字母开头的，但属性和方法的名称却不是这样。这是面向对象编程语言的一种公约，即“类的命名以大写字母开头，属性(变量)和方法(函数)的命名以小写字母开头”。

我们之前演示的“拖动＋自动生成代码”的方法是很方便的。我们当然也可以自己手动编码，只是使用辅助编辑器会更加快捷一些。

属性合成(Synthesis)与内存管理

现在，我们将编辑器切换回标准模式(Standard Editor)，弹击选中ContactViewController.m，在大约12行的地方，你可以看到系统帮我们自动生成的代码：

这会告诉编译器在构建应用的时候为属性生成设置器(setter)与访问器(getter)，我们不需要手动编写代码就可以使程序具有访问和设置属性值的能力。