Storyboard介绍及使用1 Storyboards Part1 译文
参考文章
Storyboards Tutorial in iOS 7: Part 1
Storyboards Tutorial in iOS 7: Part 2
背景知识
Storyboard 在iOS5时引入,它能节约你创建UI的时间,先看一张storyboard的图:
![storyboard样图](http://cdn5.raywenderlich.com/wp-content/uploads/2013/09/Beginning-storyboard-700x325.png)
看到它,你就像看到了一张设计图,一切已胸有成竹!
storyboard与常规nib(nib文件后来改名叫xib文件,小伙伴不用纠结它是啥)文件相比,有很多优势:
与散落的nib相比,storyboard能给你一种全局感。
storyboard可以描述各种场景之间的过渡,这种过渡被称作"segue",你通过简单的ctrl-dragging就能搞定,减少代码量。
storyboard支持table view的prototype cell,这意味着你可以在storyboard中编辑cell,减少代码量。
当然,世界上没有完美的东西,由于Interface Builder还不够强大,所以,有些nib能做到的,storyboard还不能。而且,你需要一个更大的显示器~
storyboard 把 view controller叫做:“scene”.
启动storyboard的系统预设
在工程plist中
![plist](http://cdn5.raywenderlich.com/wp-content/uploads/2013/09/09_sb_infoplist.png)
storyboard操作
(iOS有所谓的三大container view controller,分别是Tab Bar Controller,Navigation Controller,Split View Controller )
注意:在缩放的时候无法拖拽控件到画板。
1.更改初始化视图控制器
- 选择初始化view controller,选中相应view controller ->
Attributes inspector
,勾选Is Initial View Controller
,如图initial view controller
- 直接拖拽初始化箭头到相应视图控制器
如果更改了初始化的view controller,会发现初始化箭头发生移动,如图:初始化箭头移动
2.添加Navigation Controller
- 选中要添加Navigation Controller的视图控制器,在Xcode menubar选择
Editor\Embed In\Navigation Controller
- 从Object Library拖拽
在storyboard的画板上,会虚拟出一个Navigation Controller的scene,它当然不是一个真的UINavigationBar对象,而是虚拟一个,方便我们操作和理解。
当我们点击与Navigation Controller连接的视图控制器,点击Attributes inspector
,会发现Simulated Metrics
,如图:
![Simulated Metrics](http://cdn4.raywenderlich.com/wp-content/uploads/2013/09/17_sb_simmetrics.png)
Inferred
是storyboard的缺省设置,这意味着该视图控制器在Navigation Controller中时,会展示一个navigation bar (当然,在其他container view controller中,会展示相对的bar,比如,在一个tab bar controller中会展示一个tab bar).Simulated Metrics
并不能用于runtime.
3.创建relationship segue
如图所示:
![tab bar controller](http://cdn5.raywenderlich.com/wp-content/uploads/2013/09/18_sb_dragtonavcontroller.png)
Ctrl-drag
,从tab bar controller 连到navigation controller,松手,弹出 popup menu,如图:
![popup menu](http://cdn4.raywenderlich.com/wp-content/uploads/2013/09/19_sb_createrel.png)
选择Relationship Segue – view controllers
,结果如图:
![Relationship Segue – view controllers](http://cdn4.raywenderlich.com/wp-content/uploads/2013/09/19_sb_createrel_2.png)
4.命名tabbar controller和navigation controller中的bar item
并非在tabbar controller 里,而是在与其相连、对应的controller里,如图:
![修改tabbar controller展示出来的tab item](http://cdn2.raywenderlich.com/wp-content/uploads/2013/09/22_sb_renametab.png)
同理,修改navigation bar,也是在对应的controller里,而不是虚拟的navigation controller,如图:
![修改navigation bar](http://cdn5.raywenderlich.com/wp-content/uploads/2013/09/23_sb_edittitle.png)
5.自定义UI类
就像你不用storyboard一样,创建一个类,当然,就不要勾选xib选项了,从storyboard的object library中拖拽出它的父类UI,在此UI的Indentity inspector中,将这个类与UI绑定,如图:
![自定义UI类](http://cdn5.raywenderlich.com/wp-content/uploads/2013/09/Custom-class.png)
6.在storyboard中找到相应的视图控制器
举例,找到tab bar controller第一个tab————一个带有导航栏的视图控制器,
UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;UINavigationController *navigationController = [tabBarController viewControllers][0];PlayersViewController *playersViewController = [navigationController viewControllers][0];
7.Prototype cells
我们用static cells,一般是这样的:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{static NSString *CellIdentifier = @"Cell";UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];if (cell == nil) {cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:CellIdentifier];}// Configure the cell...return cell;
}
用Prototype cells是这样的:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"PlayerCell"];// Configure the cell...return cell;
}
我们选中控制器的tableview空间,第一个就是cell的选择,如图:
![table view cell](http://upload-images.jianshu.io/upload_images/100552-7b821cbca1f0459a.png?imageView2/2/w/1240/q/100)
默认是prototype cell.
有没有想过把prototype cell 用在不同的table view 中?我这样想过,了解了一下,发现目前storyboard还不支持,如果想曲线救国,实现起来挺复杂的,参见Reusable UITableView's prototype cell。
8.Static Cell
如果用static cell,我们就不用为tableview创建data source,因为它就是个静态的cell,不需重用,所以,你可以把该cell上的UI控件拖拽到对应的controller(Prototype cell是不行的),如图:
![static cell](http://cdn4.raywenderlich.com/wp-content/uploads/2013/09/10_sb2_staticcells.png)
![拖拽static cell上的控件到对应的controller](http://cdn3.raywenderlich.com/wp-content/uploads/2013/09/12_sb2_dragoutlet.png)
9.添加bar button item 到导航栏
拖拽一个bar button item 到拥有导航栏的控制器上,而不是那个虚拟的navigation controller.
10.segue
我们在前面说过container view controller 有一种relationship segue,它表示一个container view controller上所拥有的view controller,另外,就是用于view controller之间过渡的segue,它可以由button,cell,gesture等等来触发。
它的优势在于,节省很多代码量,很直观,你不用再写什么方法,或者像xib那样连接诸如IBAcation之类的东西。
- 操作segue
例如:
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{if ([segue.identifier isEqualToString:@"AddPlayer"]) {UINavigationController *navigationController = segue.destinationViewController;PlayerDetailsViewController *playerDetailsViewController = [navigationController viewControllers][0];playerDetailsViewController.delegate = self;}
}
注意:记得给segue添加Identifier
转载自:http://www.jianshu.com/p/2ec2c19f183e
Storyboard介绍及使用1 Storyboards Part1 译文相关推荐
- autosar中com模块_详细介绍AUTOSAR各个模块作用PART1(OS,SYS)
这片文章中我们详细讲解下每个模块的功能,上图是vector的autosar方案,每个模块的详细介绍后续会有单独文章进行讲解,请关注.以下是各个模块的简介 1.VHSM hardware Securit ...
- Request介绍及演示样例 PART1
Request在ServletAPI的规范连接地址http://blog.csdn.net/zghwaicsdn/article/details/51035146 HTTP简介 URL是浏览器寻找信息 ...
- 刚刚确诊了!谷歌出现新冠肺炎病例了,限制员工出行;Google 云开始突然裁员!...
点击"开发者技术前线",选择"星标????" 在看|星标|留言, 真爱 内容综合自:量子位和华尔街日报 开发者技术前线报道 编辑:编辑 新冠肺炎(COVID- ...
- 一篇较为详细的 Storyboard使用方法 总结
Storyboard是苹果官方主推的一个代替xib的策略.有必要详细学习下它的使用方法. 先来看一下思维导图 storyboard_28 storyboard基础 storyboard优势 story ...
- 【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)
一. iOS 项目简介 1. iOS 文件简介 创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图; -- HelloWorldTests 目录 : 单元测试相关的类 ...
- Timsort 介绍(listsort.txt 翻译)
Timsort 介绍(listsort.txt 翻译) 译文 简介(Intro) 与 Python 样本混合排序的比较(Comparison with Python's Samplesort Hybr ...
- 分布式系统(Distributed System)资料
分布式系统(Distributed System)资料 <Reconfigurable Distributed Storage for Dynamic Networks> 介绍:这是一篇介 ...
- iOS知识点收藏梳理
C 语言 iOS零碎知识--C语言内存分配函数区别 C语言的指针大归纳[三大关系(Five) C语言探索之旅 | 第一部分第五课:运算那点事 Swift 语言 Swift编程风格 Swift语法练习大 ...
- ios Develop mark
App Distribution Guide https://developer.apple.com/library/ios/documaentation/IDEs/Conceptual/AppDis ...
最新文章
- 剑指offer:表示数值的字符串
- linux GD库安装
- mybatisplus where语句里面的条件用括号括起来
- UVA12325Zombie's Treasure Chest 宝箱
- dubbo之.xml配置文件报错
- 【Java】区分BigDecimal的toString()和toPlainString()
- 斐波那契数列的数学分析
- Android8.1 Camera2+HAL3之HIDL open()流程(二十)
- CF1151div2(Round 553)
- 搭建微信小程序(前后端)
- 深度测试oppo软件,OPPO深度测试
- Matlab中break语句
- java实现 图片转ico
- Camtasia如何给视频或者图片调色
- php数字月份转英文,php如何实现月份转英文
- Python实现简繁体转换,现在的人玩得老花了
- IOS 跳转导航地图
- 深入理解互斥锁的实现
- android8.1新建分区并挂载,Android8.1 MTK Vendor分区大小调整无效分析
- input表单标签和label标签以及常使用标签的介绍