天天看点

iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

一、介绍Storyboard

1、简介:

iOS5之后Apple提供了一种全新的方式来制作UI,那就是StoryBoard。简单理解来说,可以把StoryBoard看做是一组viewController对应的xib,以及它们之间的转换方式的集合。在StoryBoard中不仅可以看到每个ViewController的布局样式,也可以明确地知道各个ViewController之间的转换关系。相对于单个的xib,其代码需求更少,也由于集合了各个xib,使得对于界面的理解和修改的速度也得到了更大提升。减少代码量就是减少bug量,这也是程序开发中的真理之一。

在Xcode5之后,StoryBoard已经成为新建项目的默认配置,这也代表了Apple对开发者的建议和未来的方向。

2、优劣势:

优势:

  • 故事版便于快速开发,如果项目很紧,那么就可以考虑使用故事版了,因为拖拽界面特别方面
  • 使用故事版那么适配相当轻松的,只需要图片资源齐全,适配都不是大问题

劣势:

  • 故事版不方便多人开发,如果多人开发,一个人打开了故事版,会被默认为修改了,如果你其他的同事也修改了,那么,问题来了,必须有一方放弃修改才可以,合并起来也很麻烦
  • 如果使用多个故事版,维护起来比较困难,开始还好说,项目越来越复杂,到时候问题就出现了
总之,不同的人有不同的看法,熟练的应用以便程序的开发才是我们共同的目标。

二、简单使用

1、按住command+n,新建一个故事版

iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

2、链接自己创建的故事版。如果删除系统的故事版,需要把target->general->main interface:->修改成自己创建的故事版名字

iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用
iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

描述:

(1)工具栏->报纸图标->class:这个类是哪个类

(2)storyboardID:查找这个类的标记(一般写本类的类名)

(3)use storyboardID:勾选上故事版的标记才有效果

(4)工具栏->钢笔头->is initial view controller:设置初始页面箭头(只能有一个)如果有使用故事版就不能使用代码去创建窗口(因为一个应用程序有且只有一个主窗口)

iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

(5)title:文件列表名,标题的名字

(6)工具栏最后一个选项“链接”:表示这个类和其他类的关系->(分栏控制器viewcontroller)(导航栏控制器rootviewcontroller)->关联其他控制器->点击拖住按钮到希望链接的控制器上,如果挂代理,点击挂代理的按钮拖动到指定控制器

(7)代码创建的类和故事版中的类进行关联实在菜单栏里面的报纸图标中class:设置成代码的类名

3、故事版中第一个页面的箭头强调内容:指向谁谁就是初始页面(窗口上的rootController)

iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

4、拖控件

iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用
iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

5、关联代码,设置button的触发事件,故事版上面的控件添加触发方法和与代码进行关联:

点解故事版-> 点击双环,把故事版上需要关联的控件右键拖到代码的.h文件,
           
iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

如果是添加方法选择(action),如果是只关联(outlets)

iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用
iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

这个时候可以运行程序测试下

6、设置sizeClass

(1)compact:紧凑

(2)any:任意

(3)regular:宽松

(4)设备区分:(iOS7之前不用区分设备,在iOS8之后出来)

《1》3.5、4、4.5手机横屏:CwCh

《2》手机横屏:Ch

《3》5.5手机横屏:RwCh

《4》手机竖屏:CwRh

《5》手机竖屏ipad的横竖屏:Rh

《6》ipad的横竖屏:RwRh

《7》ipad的横竖屏:Rw

《8》任意:any

iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

7、约束

1、button在视图上的位置

iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

我们在用代码编写的frame与在storyboard中的相对位置的位置的区别:

frame:原点、尺寸决定视图的位置大小

相对位置:控件之间的关系

注意:添加完约束之后,如果有黄色或红色的警告

红色:约束不合理,把红色不合理的地方去掉

黄色:表示实际位置与约束位置不匹配,可以点击黄色按钮修复位置

2、button相对视图的比例约束

选中button,在右下角的快捷操作中勾选箭头所指选项进行设置,点击Add 2 Constraints。

iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

此时,你可能还需要再次选中这个Button,再使用快捷键Command+option+=修复frame,这时Button的frame和layout的约束才会对应起来。如果不修复frame也不会影响实际运行的效果,但是Xcode会提示警告

iOS—Storyboard的简单使用一、介绍Storyboard二、简单使用

注意:相同层级和不同层级的view之间都可以用比例方式确定大小,但是必须有条件先确定其中一个view的大小。这里说的条件,指的是约束,或者UIViewController.view这种由父级容器确定了大小的条件。

一般情况下,宽度和高度需要分别设置比例,看需求而定。

宽度和高度之间也可以设置比例,设置方法和上面基本相同,不同的是,只需要选择一个view,添加约束的时候只勾选Aspect Ratio。

写的有点乱,还请谅解