iOS—Storyboard的简单使用_storyboard apple-程序员宅基地

技术标签: 故事版  iOS-故事版  iOS  ios  Storyboard  

一、介绍Storyboard

1、简介:

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

2、优劣势:

优势:

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

劣势:

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

总之,不同的人有不同的看法,熟练的应用以便程序的开发才是我们共同的目标。

二、简单使用

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

新建故事版

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

这里写图片描述

这里写图片描述

描述:

(1)工具栏->报纸图标->class:这个类是哪个类
(2)storyboardID:查找这个类的标记(一般写本类的类名)
(3)use storyboardID:勾选上故事版的标记才有效果
(4)工具栏->钢笔头->is initial view controller:设置初始页面箭头(只能有一个)如果有使用故事版就不能使用代码去创建窗口(因为一个应用程序有且只有一个主窗口)

这里写图片描述

(5)title:文件列表名,标题的名字
(6)工具栏最后一个选项“链接”:表示这个类和其他类的关系->(分栏控制器viewcontroller)(导航栏控制器rootviewcontroller)->关联其他控制器->点击拖住按钮到希望链接的控制器上,如果挂代理,点击挂代理的按钮拖动到指定控制器
(7)代码创建的类和故事版中的类进行关联实在菜单栏里面的报纸图标中class:设置成代码的类名

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

这里写图片描述

4、拖控件

这里写图片描述
拖一个button

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

    点解故事版-> 点击双环,把故事版上需要关联的控件右键拖到代码的.h文件,

这里写图片描述

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

这里写图片描述
这里写图片描述

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

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

这里写图片描述

7、约束

1、button在视图上的位置

这里写图片描述

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

frame:原点、尺寸决定视图的位置大小
相对位置:控件之间的关系

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

红色:约束不合理,把红色不合理的地方去掉
黄色:表示实际位置与约束位置不匹配,可以点击黄色按钮修复位置

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

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

此时,你可能还需要再次选中这个Button,再使用快捷键Command+option+=修复frame,这时Button的frame和layout的约束才会对应起来。如果不修复frame也不会影响实际运行的效果,但是Xcode会提示警告
这里写图片描述
注意:相同层级和不同层级的view之间都可以用比例方式确定大小,但是必须有条件先确定其中一个view的大小。这里说的条件,指的是约束,或者UIViewController.view这种由父级容器确定了大小的条件。
一般情况下,宽度和高度需要分别设置比例,看需求而定。
宽度和高度之间也可以设置比例,设置方法和上面基本相同,不同的是,只需要选择一个view,添加约束的时候只勾选Aspect Ratio。

写的有点乱,还请谅解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wangwei1138568289/article/details/50988024

智能推荐

bzoj2190: [SDOI2008]仪仗队 莫比乌斯反演_sdoi2008 莫比乌斯-程序员宅基地

文章浏览阅读840次。这不是裸的反演吗。。。。直接上nlogn的方法#include #include #include #include #include using namespace std;#define maxn 41000int f[maxn],n;int main(){ scanf("%d",&n);n--; for(int i=n;i;i--) {_sdoi2008 莫比乌斯

Postman接口测试工具的使用_1_ddq测试-程序员宅基地

文章浏览阅读427次。Postman是接口测试中比较常用的工具,可通过Google浏览器插件安装(比较困难),还可以通过window程序安装。http://blog.csdn.net/u011541946/article/details/77823430 这篇文章中博主提供了插件与安装程序的下载。 1、postman页面布局 主要功能模块也包含在这三个布局里面,其中“history”展示最近一段时间我们执行的接口操_ddq测试

如果编程替换成中文就会怎样? 程序员看了表示头疼-程序员宅基地

文章浏览阅读539次。首先大概的看一下中文编码:你以为会写中文就会编程吗?这就像你以为会写汉字就会写出好文章一样。编程是和机器沟通,因此要用机器的语言而不是人类的语言。最早的程序就是0和1的数字,不是中文也不是英文。以前的程序员,每天写程序就是在一条长长的纸带上打孔表示0和1。后来发现0和1的二进制太麻烦了,就把0和1压缩一下,用16进制表示,比如数字10,用二进制表示是1010,用16进..._把复制过来的虚拟语言改成中文会有什么影响吗

数字图像处理第七章——小波_image coding using wavelet transform-程序员宅基地

文章浏览阅读4.2k次,点赞3次,收藏13次。数字图像处理第七章Digital Image Processing---Wavelets1. introduction2. Related Work2.1 Background(二) The Fast Wavelet Transform2.1 FWTs Using the Wavelet Toolbox2.2 FWTs without the Wavelet Toolbox3. Approach..._image coding using wavelet transform

打印html页面,并在每个页面添加页眉和页脚_html print()页眉-程序员宅基地

文章浏览阅读1.2w次。【方法一】:1.网页点击打印时,打印渲染的页面每一页的头部都要有公司logo;2.而且分页时不能让某一行的表格断开(必须在达到固定高度时让页面自动分页);@media screen { div.divHeader{ display:none; } div.divFooter { display: none; } } @media print ..._html print()页眉

数字图像处理第四章——图像复原(上)_基于频谱信息来恢复图像-程序员宅基地

文章浏览阅读4k次,点赞5次,收藏37次。数字图像处理第四章数字图像处理---图像复原(一)图像退化/复原处理的模型(二)噪声模型2.1 用imnoise函数为图像添加噪声4.2 用给定分布产生空间随机噪声用均匀随机数来产生指定分布的随机数2.3 周期噪声2.4 估计噪声参数数字图像处理—图像复原复原的目的是在预定意义上改善给定的图像。尽管图像增强和图像复原之间存在重叠的部分,但前者主要是主观的处理,而图像复原大部分是客观的处理。复原..._基于频谱信息来恢复图像

随便推点

dfs;-程序员宅基地

文章浏览阅读219次。import java.util.Arrays;import java.util.Scanner;public class Lianjie { public static int aNum[]=new int[10]; public static int ingewei[]=new int[6]; public static int i=

使用jpa利用queryDSL实现无sql聚合查询_jpa聚合查询-程序员宅基地

文章浏览阅读561次。【代码】使用jpa利用queryDSL实现无sql聚合查询。_jpa聚合查询

[状压DP] TopCoderSRM549 DIV1 600. MagicalHats_topcoder magicalhats-程序员宅基地

文章浏览阅读470次。对帽子状压,0表示没选过,1表示选过但是没有硬币,2表示选过且存在硬币。 可以先dp出每一种情况是否合法,然后dp显然只要DP出最多能得到几个硬币就好了(magician肯定会从小到大给你硬币) 对于状态S,枚举选择哪个帽子,magician会在“在这个帽子里放硬币”和“在这个帽子里不放硬币”选择较小的。记忆化搜索一下// BEGIN CUT HERE // END CUT HERE #l_topcoder magicalhats

骨传导耳机怎么戴?科普一下骨传导耳机-程序员宅基地

文章浏览阅读9k次。骨传导耳机的主流佩戴方式有两种,一是挂耳式,这是最为常见骨传导耳机的形态,适用于运动爱好者,比如跑步。而且它还能起到防水作用,所以游泳者也大可以放心佩戴。除此之外,开车驾驶员在接听电话时也可以用挂耳式骨传导耳机。还有一种是头戴式,这种形式的耳机也可以用于运动、日常娱乐等,但有些人这种耳机体积庞大,所以这种头戴式骨传导耳机就比较少见,但是值得一提的是由于这种耳机的紧贴皮肤面积较大,声音传递的效率也更高,所获得的音质体验比起其它的佩戴方法的骨传导耳机要稍微好一点。避免了入耳,就可以摆脱了很多传统_骨传导耳机怎么戴

oracle删除重复数据(部分重复,完全重复)_oracle批量删除重复数据-程序员宅基地

文章浏览阅读1.1k次。1.部分重复(表中有主键)学生表(student)字段:id,xh(学号),xm(姓名),nj(年级)表中含有部分字段重复(xm姓名,nj年级),可以通过主键来删除重复数据--姓名重复--获取重复姓名的学生信息(其中一条数据)Select a.idFrom (Select v.*, Row_Number() Over(Partition By v.xm Order By v.xm) Nm From student v) aWhere a.Nm > 1;--删除.._oracle批量删除重复数据

数据库MySQL-程序员宅基地

文章浏览阅读54次。MySQL显示命令1、显示数据库列表。show databases;2、显示库中的数据表:use mysql;show tables;3、显示数据表的结构:describe 表名;4、建库:create database 库名;5、建表:use 库名;create table 表名 (字段设定列表);6、删库和删表:drop database 库名;drop table 表名;7、将表中记录清空:delete from 表名;8、显示表中...

推荐文章

热门文章

相关标签