您现在的位置是:首页 > 文章详情

《iOS 9 开发指南》——第6章,第6.1节Interface Builder基础

日期:2017-05-01点击:392

本节书摘来自异步社区《iOS 9 开发指南》一书中的第6章,第6.1节 Interface Builder基础,作者 管蕾,更多章节内容可以访问云栖社区“异步社区”公众号查看

6.1 Interface Builder基础
iOS 9 开发指南
图片 1 知识点讲解:光盘:视频知识点第6章Interface Builder基础.mp4
通过使用Interface Builder(IB),可以快速地创建一个应用程序界面。这不仅是一个GUI绘画工具,而且还可以在不编写任何代码的情况下添加应用程序。这样不但可以减少bug,而且可以缩短开发周期,并且让整个项目更容易维护。

IB向Objective-C开发者提供了包含一系列用户界面对象的工具箱,这些对象包括文本框、数据表格、滚动条和弹出式菜单等控件。IB的工具箱是可扩展的,也就是说,所有开发者都可以开发新的对象,并将其加入IB的工具箱中。

开发者只需要从工具箱中简单地向窗口或菜单中拖曳控件即可完成界面的设计。然后,用连线将控件可以提供的“动作”(Action)、控件对象分别和应用程序代码中对象“方法”(Method)、对象“接口”(Outlet)连接起来,就完成了整个创建工作。与其他图形用户界面设计器,如Microsoft Visual Studio相比,这样的过程减小了MVC模式中控制器和视图两层的耦合,提高了代码质量。

在代码中,使用IBAction标记可以接受动作的方法,使用IBOutlet标记可以接受对象接口。IB将应用程序界面保存为捆绑状态,其中包含了界面对象及其与应用程序的关系。这些对象被序列化为XML文件,扩展名为.nib。在运行应用程序时,对应的NIB对象调入内存,与其应用程序的二进制代码联系起来。与绝大多数其余GUI设计系统不同,IB不是生成代码以在运行时产生界面(如Glade,Codegear的C++ Builder所做的),而是采用与代码无关的机制,通常称为freeze dried。从IB 3.0开始,加入了一种新的文件格式,其扩展名为.xib。这种格式与原有的格式功能相同,但是为单独文件而非捆绑,以便于版本控制系统的运作,以及类似diff的工具的处理。

当把Interface Builder集成到Xcode中后,和原来的版本相比主要有以下4点不同。

(1)在导航区选择故事板文件后,会在编辑区显示xib文件的详细信息。由此可见,Interface Builder和Xcode整合在一起了,如图6-1所示。


99b2e06d4e7a9db4b9f662451b0c6b92e2defa1d

(2)在工具栏选择View控制按钮,单击图6-2中最右边的按钮可以调出工具区,如图6-3所示。


1741563fda4b5b2202f19cd96810f7488b058b8b

在工具区中的最上面有几个很重要的按钮,如图6-4所示。


bd478f223c9c0a48a3e5ead843c3418edf372731

在图6-4中,有如下4个比较常用的按钮。

图片 1Identity:身份检查器,用于管理界面组件的实现类、恢复ID等标识属性。
图片 2Attributes:属性检查器,用于管理界面组件的拉伸方式、背景颜色等外观属性。
图片 3Size:大小检查器,用于管理界面组件的高、宽、X轴坐标、Y轴坐标等和位置相关的属性。
图片 4Connections:连接检查器,用于管理界面组件与程序代码之间的关联性。
工具区下面是可以往View中拖的控件。

(3)隐藏导航区。

为了专心设计UI,可以“View 控制按钮”中单击第一个,这样可以隐藏导航区,如图6-5所示。


98e189b2944176781912b066c3f3970a4ce97a7c

(4)关联方法和变量。

这是一个所见即所得功能,涉及了View:Assistant View,是编辑区的一部分,如图6-6所示。此时只需将按钮(或者其他控件)拖到代码指定地方即可。在“拖”时需要按住“Ctrl”键。怎么让Assistant View显示我要对应的.h文件?使用这个View上面的选择栏进行选择。


8732c9fe25bb12ffa805226a4c2a77c458771b4b
原文链接:https://yq.aliyun.com/articles/93367
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章