iOS 使用Interface Builder开发界面入门与技巧

引言:

    通过Interface Builder(简称IB)来制作界面一直是iOS开发界饱受争议的方式.主要争议的话题是不太适合团队协作开发,再就是对IB的使用比较生疏,觉得IB只能完成一些很简单的功能.然而Interface Builder的出现并不是偶然,更是苹果一直推崇使用GUI实现技术.只是面对不同的问题,我们需要有相应的解决办法.而不是刻意抵触.
    如今,Xcode的第五个版本发布,新版IDEIB的核心文件Xib进行了一次全面的优化和升级.解决了大家一直争议的团队协作问题. 并且Autolayout(自动布局)的出现,和Xib配合使用简直是天作之合.那么本文的目的就来一点一点揭开IB的神秘面纱,并熟练运用到实际的项目中.

参考资料:

1:Xcode 5中的Interface Builder更有利于团队协作开发

http://beyondvincent.com/blog/2013/09/04/111-xcode-5-finally-makes-interface-builder-a-viable-option-for-teams/

2:Autosizing缩放规律详解(iPhone5支持以及屏幕旋转支持)

http://www.devdiv.com/autosizing_iphone_-blog-1-51978.html

3:提高Interface Builder高效工作的8个技巧

http://beyondvincent.com/blog/2014/03/19/18-tips-for-working-effectively-with-interface-builder/

4:使用 Swift 和 Xcode 6 制作超棒的 UI 组件

https://github.com/nixzhu/dev-blog/blob/master/2014-06-10-make-awesome-ui-components-ios-8-using-swift-xcode-6.md

5:Size Classes With Xcode 6: One Storyboard For All Sizes

http://www.learnswift.io/blog/2014/6/12/size-classes-with-xcode-6-and-swift

使用:

首先来看看通过Xcode我们可以创建哪些Xib文件,如下图:

从图中罗列的可选项中可以判断出,哪些是最常用的,以及苹果推荐我们使用哪种来创建界面.

1:Storyboard
Storyboard中文翻译过来的意思是故事版.是苹果在Interface Builder推出的一项新的布局方式,不过Storyboard的本质依旧是Xib,它出现的主要目的是更好的展示Xib与Xib之间的流程和联系.当然,如果要介绍Storyboard估计需要彻底新开一篇博文来专门其如何使用.

2:View
View便是我们在使用IB实现界面时最常用的方式. 创建后,Xib里面已经默认初始化了一个View

3:Empty,Window,Application

以上三个的使用场景还是比较少的.如果你好奇,不妨也新建一个试试.

时间: 2024-12-02 17:11:13

iOS 使用Interface Builder开发界面入门与技巧的相关文章

《iOS 9 开发指南》——第6章,第6.2节和Interface Builder密切相关的库面板

6.2 和Interface Builder密切相关的库面板iOS 9 开发指南当使用Interface Builder进行界面布局和设计时,需要借助于Xcode 7中的库面板实现UI设计和代码的关联操作.Xcode 7中的库面板界面如图6-7所示. 在库面板界面上方,各个按钮从左至右的具体说明如下所示. 图片 6文件库模板:管理文件模板,可以快速创建指定类型文件,可以直接拖入项目中.如图6-8所示. 图片 7代码片段库:管理各种代码片段, 可以直接拖入源代码中.如图6-9所示. 图片 8对象库

《iOS9开发快速入门》——第1章,第1.3节编写第一个iOS 9应用

1.3 编写第一个iOS 9应用 iOS9开发快速入门 在Xcode 7.0安装好后,就可以在Xcode 7.0中编写iOS 9应用程序了.本节将主要讲解Xcode 7.0的项目创建.编辑.连接.运行.iOS模拟器介绍.编辑界面等相关方面的内容. 1.3.1 创建项目 一个iOS应用的所有文件都在Xcode项目下,项目可以帮助用户管理代码文件和资源文件.以下将主要讲解何如在Xcode 7.0中创建一个名为Hello的项目. (1)单击打开Xcode 7.0,弹出一个Welcome to Xcod

《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开发者提供了包含一系列用户界面对象的工具箱,这些对象包括文本框.数据表

《iOS 6核心开发手册(第4版)》——2.3节Interface Builder中的按钮

2.3 Interface Builder中的按钮iOS 6核心开发手册(第4版)按钮默认是作为Rounded Rect Button(圆角矩形按钮)对象出现在Interface Builder库中的(参见图2-1中顶部一排的左起第二个按钮),要使用它们,可把它们拖到界面中.然后可以通过属性检查器(选择View | Utility | Show Attributes Inspector命令,快捷键是Command+Option+4),把它们更改为另一种按钮类型.按钮类型弹出式菜单出现在检查器顶部

《iOS 9 开发指南》——第6章,第6.3节Interface Builder采用的方法

6.3 Interface Builder采用的方法iOS 9 开发指南通过使用Xcode和Cocoa工具集,可手工编写生成iOS界面的代码,实现实例化界面对象.指定它们出现在屏幕的什么位置.设置对象的属性以及使其可见.例如通过下面的代码,可以在iOS设备屏幕的一角中显示文本"Hello Xcode": - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary

《iOS 9 开发指南》——第6章,第6.4节 Interface Builder中的故事板——Storyboarding

6.4 Interface Builder中的故事板--StoryboardingiOS 9 开发指南图片 23 知识点讲解:光盘:视频知识点第6章Interface Builder中的故事板--Storyboarding.mp4Storyboarding(故事板)是从iOS 5开始新加入的Interface Builder(IB)的功能.其主要功能是在一个窗口中显示整个APP(应用程序)用到的所有或者部分的页面,并且可以定义各页面之间的跳转关系,大大增加了IB便利性. 6.4.1 推出的背景I

《iOS9开发快速入门》——第1章,第1.1节iOS 9新特性

1.1 iOS 9新特性 iOS9开发快速入门 2015年6月,苹果公司发布了最新的iOS 9操作系统,该系统在上一版的基础上做了很多的改进.本节将讲解iOS 9带来的新特性以及改进. 1.1.1 Siri语音助手智能化 Siri语音助手的智能性能主要表现在强大的内容检索和管理方面,支持快速自动整理历史文档:根据使用场景的不同,为用户提供内容和服务:来电联系人匹配,相关内容推荐甚至是第三方应用的内容检索.具体到使用场景方面,Siri可以自动整理历史照片.联系人历史邮件往来.健身应用下接入电源开启

《iPad开发从入门到精通》——6.2节系统主界面

6.2 系统主界面 iPad开发从入门到精通 本章实例的的源码保存在":\daima\6\Bus",默认的系统主界面是线路查询视图,在线路查询视图CBus_LineView.xib顶部设置了一个查询表单,在下方列表显示系统内的公交线路.线路查询视图的UI界面如图6-1所示. 6.2.1 线路查询视图 实现文件CBus_LineViewController.h的代码如下所示. #import <UIKit/UIKit.h> @interface CBus_LineViewCo

《iOS9开发快速入门》——第2章,第2.2节解剖Xcode 7.0界面

2.2 解剖Xcode 7.0界面 iOS9开发快速入门 一个Xcode 7.0项目由很多的文件组成,如代码文件.资源文件.框架等.Xcode 7.0会帮助开发者管理这些文件.所以,Xcode的界面也相对比较复杂,如图2.2所示. 在图中可以看到,Xcode 7.0的界面大致可以分为4大部分.其中,编号为1的部分是导航窗口:编号为2的部分的编辑区域:编号为3的部分是工具窗口:编号为4的部分是程序调试信息窗口.本节将分别讲解这些区域的作用以及使用方式. 2.2.1 导航窗口 导航窗口的作用是显示整