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还有许多,在这就不做一一赘述了,以后有机会回慢慢的介绍的,在博客的最后呢给大家分享一下我萌萌的桌面吧~然而这个桌面对于你的技术的提高并没有什么卵用~,愿大家天天快乐,工作开心呢!

    

时间: 2024-10-25 07:19:38

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

李洪强iOS开发之苹果使用预览截图

李洪强iOS开发之苹果使用预览截图 01 在预览的图片中选中你要截得区域  02 - command + C   03 - Command + N 04 - Command + S (保存)

iOS开发笔记7:Text、UI交互细节、两个动画效果等

Text主要总结UILabel.UITextField.UITextView.UIMenuController以及UIWebView/WKWebView相关的一些问题. UI细节主要总结界面交互开发中遇到的一些细节问题,包括Masonry部分的问题. 动画介绍最近用到的两个,算是常用级别的,动画这部分之后会专门研究总结下. 最后介绍两个工具及三个Xcode使用设置的问题. 1.Text (1)UILabel显示多行文字并且文字置顶显示 不限制UILabel的高度(宽度需要设置,确定文字何时换行)

AppleWatch开发入门六——Glance(预览)扩展的应用

AppleWatch开发入门六--Glance(预览)扩展的应用 一.简介 Glance是watchOS中类似iOS的today插件一样的预览扩展.提供了Glance功能的WatchApp可以在手表主页上唤起Glance,展示app相关信息,然而这个扩展只能作为展示作用,并不能进行太多的交互,界面的布局也有很大的限制,因此,Glance的应用主要在于展示备忘信息等.特点如下: 1.扩展的样式布局我们并不能完全个性化,只能通过系统模板来布局. 2.扩展中不能添加交互功能,只能展示信息,点击界面间唤

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

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

Android开发:实时处理摄像头预览帧视频------浅析PreviewCallback,onPreviewFrame,AsyncTask的综合应用(转)

原文地址:http://blog.csdn.net/yanzi1225627/article/details/8605061# 很多时候,android摄像头模块不仅预览,拍照这么简单,而是需要在预览视频的时候,能够做出一些检测,比如最常见的人脸检测.在未按下拍照按钮前,就检测出人脸然后矩形框标示出来,再按拍照.那么如何获得预览帧视频么? 只需要在Activity里继承PreviewCallback这个接口就行了.示例如下: public class RectPhoto extends Acti

WeX5 快速开发平台V3.6预览版发布(2016-9-1)

WeX5 V3.6 预览版核心特性: 一.打包特性增强:    1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换(手机app开发ty300.com),使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸:    2- App资源更新新增Hash模式,除实现APP资源增量.快速更新外,部署时文件路径不会每次动态生成了,也就解决了页面分享及微信端运行更新版本后要修改绑定地址的问题:二.开发与调试能力重要更新:    1- 提供了手机端调试用的APP工具Applo

iOS开发教程:Storyboard全解析-第一部分

本文转载至http://blog.csdn.net/chang6520/article/details/7945845 感谢原文作者分享 故事版(Storyboard)是一个能够节省你很多设计手机App界面时间的新特性,下面,为了简明的说明Storyboard的效果,我贴上本教程所完成的Storyboard的截图:   现在,你就可以清楚的看到这个应用究竟是干些什么的,也可以清楚的看到其中的各种关系,这就是Storyboard的强大之处了.如果你要制作一个页面很多很复杂的App,Storyboa

4412开发板 DVFS camera预览性能测试

内核:3.8.13 ARM: IBOX 4412 camera分辨率 640x480 160000(1.6G)时4核全开, echo Peformance > scaling_governor Mem: 58220K used, 969844K free, 0K shrd, 268K buff, 2524K cached CPU: 49.7% usr 1.4% sys 0.0% nic 48.7% idle 0.0% io 0.0% irq 0.0% sirq Load average: 1.0

[js开源组件开发]-手机端照片预览组件

手机端照片预览组件 可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上的开源项目.它的github地址是:https://github.com/tianxiangbing/mobile-photo-preview 下面是预览图,它的完整demo请点击这里手机端照片预览组件demo 使用方法案例: var photoPreview = new MobilePhotoPr