您现在的位置: 万盛学电脑网 >> 程序编程 >> 网络编程 >> 安卓开发 >> 正文

你所不知的iOS应用开发基础知识

作者:佚名    责任编辑:admin    更新时间:    2015-10-21 14:41:05

本文导航

1、首页2、iOS应用开发基础知识-2

本文的目的就是帮助各位设计师在最短的时间内,以实战的方式探索iOS应用开发基础知识。希望文章内容对大家有所帮助。

向视图中添加图片和文字

要通过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”。

iOS应用开发基础知识

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

iOS应用开发基础知识

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

iOS应用开发基础知识

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

iOS应用开发基础知识

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

iOS应用开发基础知识

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

接下来,我们可以向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”,这里就是我们为应用添加图标和加载图像的地方了。