XIB、Storyboard操作小技巧

本文收集了其他优秀博主,论坛上的相关技巧,及自己总结出的一些tips,小白级tip,大神们请轻喷,或给出建议分享,谢谢!

SB push Tab时隐藏Tab

相信有很多人和我一样,开始使用 tabBar 时苦恼过在 tabBar 内置的 viewControllers 里添加navigationController的问题

苹果是希望我们使用tabBar时是作为根视图的,当然如果你固执地将其作为 navigationController 的 rootViewController 也是可以运行成功并达到自己的目的的,但是像不定时炸弹一样,会出现莫名其妙地程序运行即崩溃的问题,等出了问题再去改初始的视图框架是件很痛苦地事,别问我怎么知道的,我只想说,请不要忽略苹果给你的提示。。即便可以达到想要的效果。

所以要使用navigationController来push 视图就只能将TabBarviewControllers中想要做push操作的视图控制器设置为navigationController,直接做push操作会带上tabBar.

解决方式

  1. storyboard:在你想要push的viewController的通用设置中将 Hide Bottom Bar On Push 一项勾选上既可
  2. 代码:
    self.hidesBottomBarWhenPushed = YES;

PS:上图中Extend Edges中的Under Top Bars属性,在你的视图从nvpush过来时有一段距离的空白时,将此选项勾选去除一般可以解决

设置圆角

大家都爱圆角,button,弹出视图等, 不加圆角怎么看怎么像Demo有木有,但是每次都要写那几句代码真是够了,当然也可以封装了之后调用,这是其一,但在调试程序时想尽快看到效果时,可用直接在xib和xb的视图中设置。

选中view,选中右边工作栏的class选项,在User Defined Runtime Attributes区域添加自己想为view添加的属性既可,大家可以看到Type选项有很多种,所以,但凡是属性为Type中的某种的都可以通过这种方式来设置,layer边框颜色也可以直接设置,而不用再纠结RGB的数值等,可以直接取色,这里相关的tips我就不一一列举,抛砖引玉

SB中单独的View

很多人以为storyboard将单独的view去除了,以至于在VC中希望添加单独的view时,总是要去建立单独的xib,或是代码书写。

其实在SB的VC中添加View视图,布局完成后,将其拖动到First Responder Exit并列的位置,同样可以创建映射,为控件添加响应事件等,等同于以前xib中各个独立的视图,只是不能直观地看到这些视图的布局,如要查看布局状态,还得拖动到viewController的主窗口中进行查看

可视化坐标距离

IB最烦人的问题就是对齐。用代码的时候我们可以明确地指定x,y坐标,但是换到IB的时候我们更多的时候是靠拖拽UIView来布局。比如需要三个间隔相同的label,除了用强大的肉眼来估测距离是否相等以外,难道只能乖乖分别选中三个label,记下它们的坐标然后打开计算器来做加减法么?

显然不要那么笨,试试看选中一个label,然后按住option键并将鼠标移动到其他label上试试?你可以发现view之间的距离都以很容易理解的方式显示出来了。不仅是同层次的view,被选中view与其他层次的view之间的距离关系也可以同样显示。

选择之后效果与下文添加辅助线示例图类似

将多个view视图合并到一个视图层级

有时候添加了多个控件,而且千辛万苦终于调整好了对齐,间距

发现要将这些控件放在一个父类视图中方便操作,最直观地,拖动一个view到面板上,选中这些控件,拖拽到这个view上,悲剧就发生了,难道只能再次睁大双眼,一个个对齐,调整么

显然不用,选中这些控件,选择菜单栏上 Editor->Embed in->View/Scroll view

最终控件还是按照原来样式排练在一个view上

同样,要将其从父类view上移到另一个视图,选择上图中Editor->Unembed 就可以了

为视图添加辅助线

搞设计的一般都知道辅助线是多么重要,我们在为视图布局时也可以为视图添加辅助线,方便我们布局时更加准确

添加:双击某个View,按下shift+Command+-添加横向辅助线,shift+Command+|添加纵向辅助线,添加的位置都是左右/上下居中的

移动:光标移动到线上时会出现可拖动的按钮,按住左右/上下拖动到想要的位置,拖动时可以看到辅助线线距离视图左右/上下的距离

删除:方式也很简单,与删除断点方式一样,快速拖动到视图看不见的地方即可删除

芳仔说

目前为止只想到这些,有好的tips大家不要藏着,到碗里来~~~
加入我们的QQ交流群一步一脚印iOS群切磋学习,好多萌妹子的哦,快扫一扫,加群请注明开源中国

参考文档:代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧

时间: 2024-10-08 03:10:00

XIB、Storyboard操作小技巧的相关文章

VS 2010 C#入门操作小技巧

*推荐C#入门教学视频(http://www.51xue8.com/e/DownSys/play/?classid=27&id=6719&pathid=3&jishu=17) VS 2010 C#入门操作小技巧 1.认识VS2010:阅读技术文档或者教学视频对入门帮助很大! (1)添加类库 点击解决方案名称(如12.demo)右键->添加->类->更改类名 (2)利用控件设计界面 常用控件:button/label/textbox/combobox: 具体控件用途

关于NodePlus++的一点操作小技巧

1.给NodePlus++添加插件:插件-插件管理--展示插件管理:2.文件目录插件:explorer:3.启用插件模式后,编辑器对中文的兼容性并不好,有可能会出现"讨厌的红线":4.如何启动无插件模式:将安装文件下的plugins文件夹改名,保存,重启编辑器即可:5.文件的中文乱码问题一般都是编码格式问题,中文支持的格式是UTF_8,针对于NodePlus++,可以在"格式-以UTF-8格式"或是"转为UTF-8格式"进行设置. 关于NodeP

在线绘制流程图操作小技巧

流程图的绘制不只是说框架搭建好了之后,内容填充完毕之后就可以使用了,想要制作一份精美的流程图有很多注意事项,下面来一起看一下绘制流程图有哪些操作小技巧,希望可以对有疑问的朋友有所帮助. 技巧一:怎样搭建流程图框架 在绘制流程图时首先就是从框架搭建开始,我们可以在绘制网站的面板中,选择流程图图形,之后选择喜欢的图形,用鼠标长按拖拽至右面空白面板处,之后松掉鼠标就可以,如此反复进行操作,等到图形数量够了之后,就要用连接线将图形与图形进行连接使用,添加方法一致,但是要注意图形的连接方法与上下级应一致.

Windows 操作小技巧 之一(持续更新)

1.图片批量旋转 通常携带单反去景点排了大量照片回来处理图片时都会遇到很多横竖杂乱排序的图片难以处理的情形.现提供如下技巧进行处理. 1).在文件夹中添加“方向”的排列或分组选项: 2).选择需要进行旋转的全部图片进行批量顺时针旋转或逆时针旋转(取决于图片方向)

mac下快捷的创建txt文件及一些操作小技巧

1.直接找一个本地存在的文件(plist,.m,.h的都可以),复制一份直接把后缀名改成txt就行了,然后进行编辑内容就ok了.是不是很机智!相信大部分人早就知道了. 2.在Finder下按+Shift+G ,可以开启“前往文件夹”对话框,之后你可以输入路径来快速访问Finder目录位置,进行定位文件操作,这毫无疑问是最快的方法.另外你不必输入全部的路径,可以直接输入当前文件夹往下的路径就可以. 3.在Finder的任何位置,选中这里所有的图片,然后按++Y,就可以直接开启图片全屏幻灯片模式 4

C/C++ 宏操作小技巧

Abstract 之前写了一个非常mini的log库(也不算库把,自己瞎jb写的),里面几乎都是宏的实现.这里打算趁热打铁,把自己知道的几下子都贴出来,后续如果有新的收获会更新这个博文. 文笔拙劣,主要是给自己做个提醒. 1. 运行时检测大小端 一目了然,不做解释. #define __ENDIAN() ({ short _a = 0x1234; *((char*)&_a) == 0x12 ? 1 : 0; }) #define big_endian() (__ENDIAN() == 1) #d

linux操作小技巧锦集

一.用户及用户组相关: cat /etc/group #查看用户组,第3列就是组的一个ID的概念 cat /etc/shadow #查看用户, cat /etc/passwd #查看用户,第4列,就是用户所属的组的ID 二.VI: VI太强大了,用熟练了会觉得很好用. i #从光标处开始编辑 s #从光标之后开始编辑,而且会删掉一个字符 a #从光标之后开始编辑,但是不会删掉字符u #回退 / #斜杠进入搜索模式,输入要搜索的字符串回车即可 n #向后查看搜索结果 N #向前查看搜索结果 set

vim操作小技巧

多行注释: ctrl+v 进入列编辑模式,向下或向上移动光标,把需要注释的行的开头标记起来,然后按大写的I,再插入注释符,比如"#",再按Esc,就会全部注释了. 多行删除: 先按v,进入visual模式,横向选中列的个数(如"#"注释符号,需要选中两列),再按Esc,再按ctrl+v 进入列编辑模式,向下或向上移动光标,选中注释部分,然后按d, 就会删除注释符号(#).

SAP B1 9.1 操作小技巧