Storyboard的使用(一)
来源:互联网 发布:贵金属行情交易软件 编辑:程序博客网 时间:2024/04/19 15:47
Storyboard是Objective在XCode中的界面编辑利器,所见即所得。搭配上ARC的使用,在界面创作方面可谓如虎添翼。最近开始接触,所以打算写一个教程,从简单到复杂,慢慢深入Storyboard的使用。后面会配合Xib一起使用。这篇文章先介绍Storyboard的简单视图跳转。本篇文章的结构:1)新建工程2)完成主界面3)push方式跳转4)modal方式跳转5)总结
作者使用的是Xcode5.1.1,OS X 10.9.2。以下,正文。1、新建工程File->New->Project,选择SingleViewApplication,并写上自己工程名称,可以看到如下的工程列表。(图1)
查看右上角,选择合适的选项,以查看正确的视图。(图2)
点击工程中的Main.storyboard就可以开始编辑Storyboard了。
2、完成主界面Xcode中间可以看到这么一个界面,里面显示的就是当前首个Controller对应的界面,直接运行就可以看到一个空的视图。(图3)
双击这个视图,进入该视图的编辑状态。我们现在主界面上添加一个标签UILabel。方式是从右下角选择一个Label,并拖动到对应的界面上。(图4)
可以任意地拖动这个Label的位置,修改它的内容。右边有该Label对应的属性,可以直接修改。即得到下面的画面。(图5)
接下来,按照同样的方式,把两个按钮Button添加到视图中,得到下图。(图6)
我这里把它们分别命名为Push和Modal,因为接下来我要用这两个按钮实现页面的跳转。还记得图2的那些选项吗?选择第二个,可以同时编辑视图和代码。选择Push按钮,按住Ctrl的同时拉拽到代码空余区域,生成按钮的事件。(图7)
填入按钮名称,并确定,即可生成对应的代码。(图8)
对Modal按钮进行同样的操作,得到下图所示代码。(图9)
3、push方式跳转在工程文件中新建控制器类PushViewController。在Storyboard中新建一个ViewController视图(你可以在新建的视图上添加你喜欢的控件~)。在右边的Custom Class中写上PushViewController。这样,这个类和视图就可以联系在一起了。选中初始化的ViewController,按住Ctrl的同时将鼠标拖拽到PushViewController上,在弹出的菜单上选择push。
(图10)
选中产生的那条连接线,在右边属性栏里将其Identifier设置为PushSegue。在ViewController里的pushButton事件里写上跳转的代码。
- (IBAction)pushButton:(id)sender{ [self performSegueWithIdentifier:@"PushSegue" sender:sender];}
运行项目,点击push按钮,发现程序崩溃!其实手打过界面代码的人都知道,push方式的跳转需要原来的ViewController是一个NavigationController。而这里,我们初始化的控制器就是一个简单的ViewController。解决方法:1)选中初始化的控制器。2)在顶部菜单栏里选择:Editor->Embed In->Navigation Controller。也就是把该控制器包裹在NavigationController中。
(图11)
再运行代码,看到push的跳转方式了吗?4、modal方式跳转如果你足够聪明,相信你一定知道怎么用modal跳转了!以同样的方式在项目中创建一个ModalViewController和对应的视图,以拉拽的方式添加一个新的Segue并设置为Modal方式。同样的写上类似的代码,Modal跳转方式就完成啦~这里要说的是Modal的四种方式:
(图12)
你可以分别设置,并尝试不同的表现形式,马上就知道这四种方式的区别了。5、总结跳转方式是Storyboard最常用的技巧,但这只是对跳转方式的简单掌握,还有更多可以深入了解的东西,比如传递数据等。以后会继续奉献上相关的教程。
0 0
- Storyboard的使用(一)
- iOS7 新Storyboard的使用(一)
- Storyboard的使用(二)
- 关于StoryBoard的使用(1)自定义一个StoryBoard
- Storyboard(一)概述
- Storyboard (一)
- IOS 构造和使用TableView(基于storyboard) (一)基本的数据显示
- iOS7 新Storyboard的使用(二)
- (iOS开发)storyBoard的简单使用
- Storyboard的使用
- Storyboard的简单使用
- Storyboard的简单使用
- Storyboard 的简单使用
- Storyboard 的简单使用
- Storyboard的简单使用
- Storyboard的简单使用
- Storyboard的简单使用
- Storyboard的简单使用
- zImage和bzImage
- 简单易学的机器学习算法——线性回归(2)
- hdu2594 简单KMP
- 设计模式 - 观察者模式(Observer Pattern) 详解
- Number Sequence
- Storyboard的使用(一)
- lex yacc
- java重写与重载区别
- 设计模式 - 策略模式(Strategy Pattern) 详解
- 安装交叉工具链
- Thread与Runnable区别
- POJ 2762 单连通图
- 安装ubuntu时,出现“wubi permission denied rev 286.log”错误--解决方法
- 哥伦布编码:Exp-Golomb code