iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

在公司做项目一直使用Storyboard，虽然有时会遇到团队合作的Storyboard冲突问题，但是对于Storyboard开发效率之高还是比较划算的。在之前的博客中也提到过，团队合作使用Storyboard时，避免冲突有效的解决方法是负责UI开发的同事最好每人维护一个Storyboard, 公用的组件使用轻量级的xib或者纯代码来实现。这样不但提高了开发效率，而且可以有效的避免Storyboard的冲突。如果每个人维护一个Storyboard, 遇到冲突了就以你自己的为准就OK了。

　　言归正传，接下来就介绍一下如何使用Storyboard来预览UI在不同那个分辨率屏幕上的运行效果，这就很好的避免了每次调整约束都要Run一下才能看到不同平面上运行的效果，今天的博客就来详述一下如何使用Storyboard来进行Preview运行效果。接下来就一步一步的来看一下如何进行效果的预览。

　　一、创建工程添加测试使用的UIImageView

　　　　创建一个测试工程，在ViewController上添加4个不同尺寸的UIImageView, 并且添加上不同的约束，最后添加上不同的文艺小清新的图片，最终Storyboard上的控件和约束如下所示。

　　二、打开预览界面

　　　　1.点击Storyboard上左上角的按钮 -> 点击Preview -> 按着potion + shift键 点击相应的Storyboard, 具体操作如下图所示：

　　　　2.经过上面的操作后， 你会看到如下操作界面，在这个界面中你可以点击右边的加号按钮来添加预览窗口，如下图所示：

　　三、添加预览设备

　　　　1.双击上面加号的按钮回出现预览窗口，在预览窗口左下方有一个加号按钮，通过加号按钮你可以添加不同尺寸的屏幕进行预览，从3.5到iPad应有尽有，添加是的截图如下所示。

　　　　2.把上述所有设备添加上以后的预览效果如下图所示，这种预览效果仅限于使用Storyboard实现的控件，然而用纯代码写的UI就没有这么幸运了。预览效果如下：

　　Storyboard的还是蛮强大的，类似这种小的技巧，Storyboard还有许多，在这就不做一一赘述了，以后有机会回慢慢的介绍的，在博客的最后呢给大家分享一下我萌萌的桌面吧~然而这个桌面对于你的技术的提高并没有什么卵用~，愿大家天天快乐，工作开心呢！

以上介绍就是本文的全部内容，希望对大家有所帮助。

赞 (0)

相关推荐

  • 详解iOS应用使用Storyboard布局时的IBOutlet与IBAction

    在图形界面编程时,解决的第一问题就是如何将静态界面与代码关联起来,或者说是代码如何与界面上的对象 通信, 代码如何操作界面上的对象.在iPhone平台上,引入了IBOutlet与IBAction.通过在变量前增加IBOutlet 来说明该变量将与界面上的某个UI对象对应,在方法前增加IBAction来说明该方法将与界面上的事件对应. 下面通过一个连接网络服务器(NetworkConnection)的例子来说明IBOutlet与IBAction. 界面上有host 与 port 的Text Fie

  • iOS应用开发中StoryBoard搭建UI界面的基本使用讲解

    iOS应用开发中StoryBoard搭建UI界面的基本使用讲解

    StoryBoard 的本质 StoryBoard 是苹果在 iOS 5 中引入的新技术方案,目的是给纷繁复杂的 nib.xib 们一个温暖的家,让他们之间的关系更直观地展示出来,并提供了一种新的页面间跳转方式 segue. StoryBoard 的本质是一个 XML 文件,描述了若干窗体.组件.Auto Layout 约束等关键信息.示例文件:https://github.com/johnlui/AutoLayout/blob/master/AutoLayout/Base.lproj/Main

  • 详解iOS开发中使用storyboard创建导航控制器的方法

    详解iOS开发中使用storyboard创建导航控制器的方法

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

  • 详解IOS 利用storyboard修改UITextField的placeholder文字颜色

    详解IOS 利用storyboard修改UITextField的placeholder文字颜色

    详解IOS 利用storyboard修改UITextField的placeholder文字颜色 最近有个需求需要修改UITextField的placeholder文字颜色,在网上找发现有用代码修改的,但是考虑到更加优雅的实现,所以尝试着在storyboard中直接实现,结果竟然真的成功了, 实现的位置如下: 具体步骤: 1.在User Defined Runtime Attributes中添加一个Key. 2.输入Key Path(这里我们输入_placeholderLabel.textColo

  • iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

    iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

    在公司做项目一直使用Storyboard,虽然有时会遇到团队合作的Storyboard冲突问题,但是对于Storyboard开发效率之高还是比较划算的.在之前的博客中也提到过,团队合作使用Storyboard时,避免冲突有效的解决方法是负责UI开发的同事最好每人维护一个Storyboard, 公用的组件使用轻量级的xib或者纯代码来实现.这样不但提高了开发效率,而且可以有效的避免Storyboard的冲突.如果每个人维护一个Storyboard, 遇到冲突了就以你自己的为准就OK了. 言归正传,

  • 浏览器图片选择预览、旋转、批量上传的JS代码实现

    浏览器图片选择预览、旋转、批量上传的JS代码实现

    工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用IE的filter css progid:DXImageTransform.Microsoft.AlphaImageLoader chrome/firefox则用File api的file reader 2. 图片旋转,IE用progid:DXImageTransform.Microsoft.Matr

  • Android UI实时预览和编写的各种技巧

    Android UI实时预览和编写的各种技巧

    一.啰嗦 之前有读者反馈说,你搞这个所谓的最佳实践,每篇文章最后就给了一个库,感觉不是很高大上.其实,我在写这个系列之初就有想过这个问题.我的目的是:给出最实用的库来帮助我们开发,并且尽可能地说明这个库是如何编写的,希望让初创公司的程序员少写点给后人留坑的代码(想必大家对此深有体会). 我之前给出的库都是很简单基础的,基本是一看就懂(但足够精妙),如果以后的文章涉及到了复杂的库,我会专门附加一篇库的讲解文. 如果一个库的原理你知道,此外这个库很容易扩展和维护,而且它还用到了很多最佳实践的经验,你

  • 使用react-native-doc-viewer实现文档预览

    使用react-native-doc-viewer实现文档预览

    目录 react-native-doc-viewer文档预览 具体步骤如下 react-native初体验的总结 一.前提知识点 二.开发前后相关的一些配置 三.开发项目中用到的知识 四.ui库 五.项目搭建 六.根据需要安装对应依赖 七.开发和调试 react-native-doc-viewer文档预览 react-native项目要求实现word,excel,pdf,mp4,png等格式附件图片的在线预览,最终选用react-native-doc-viewer实现, 具体步骤如下 1.安装r

  • 模拟QQ心情图片上传预览示例

    模拟QQ心情图片上传预览示例

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以下插件,在别的图片上传功能说不定各位能用的上. 1.jQuery File Upload Demo地址:http://blueimp.github.io/jQuery-File-Upload/ 优点是使用jquery进行图片的异步上传,可控性好,可根据自己的需求任意定制: 缺点是在IE9等一些浏览器

  • vue项目上传Github预览的实现示例

    最近在用Vue仿写cnode社区,想要上传到github,并通过Github pages预览,在这个过程中遇到了一些问题,因此写个笔记,以便查阅. 完成Vue项目以后,在上传到github之前,需要修改一些配置才能通过github pages预览项目. 一.修改配置 1.解决文件路径问题: 打开项目根目录config文件夹下的index.js文件,进行如下修改: 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将'/'改为'./'

  • vue中使用vue-pdf组件实现文件预览及相应报错解决

    vue中使用vue-pdf组件实现文件预览及相应报错解决

    目录 前言 一.安装npm 依赖 二.引入组件 1.html中使用组件 单页 2.数据处理 单页 三.项目使用--代码部分 四.报错解决 总结 前言 使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮vue3不支持vue-pdf,vue3项目用pdfjs-dist 一.安装npm 依赖 1.在根目录下输入一下命令 npm i pdfjs-dist@2.5.207 --save npm i vue-pdf@4.2.0 --save 2.修改pacakge.json文件 "depende

  • IOS 开发之数据存储writeToFile的应用实例

    IOS 开发之数据存储writeToFile的应用实例 最近项目上要弄数据的导入与导出,所以就研究了一下数据的保存,其实很简单  第一步:获得文件即将保存的路径: NSArray *documentPaths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,  NSUserDomainMask,YES);//使用C函数NSSearchPathForDirectoriesInDomains来获得沙盒中目录的全路径.该函数有三个参数

  • JS+HTML5 FileReader实现文件上传前本地预览功能

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } e

随机推荐