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 条评论
登录 后参与评论

相关文章

来自专栏木子墨的前端日常

到底该用img还是background-image?

在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片。这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式...

51610
来自专栏大数据钻研

css print

最近做表单打印,遂整理了一些打印相关的内容。 说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数...

32630
来自专栏编程微刊

6款 jQuery Lightbox图片查看触控插件

偶然间在网上看到的几个图片预览的插件,挺好用的,顺手整理下来。 1:Zoomify – jQuery缩放效果lightbox插件 地址:http://www...

54540
来自专栏攻城狮的动态

iOS视图编程指南(View Programming Guide for iOS)(译)

30140
来自专栏web编程技术分享

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)说明

本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一...

22320
来自专栏大数据钻研

HTML 入门笔记 - 初识HTML

基础框架 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/ht...

47650
来自专栏飞扬的花生

一步一步学习Bootstrap系列--表单布局

前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把...

350100
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(六)响应式布局

1、固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。

14720
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(10) 初步了解动画,以及一步一步写个动画效果

ng2.x动画相关的api是并入@angular/core这个核心模块的,在angular4之后开始独立

8320
来自专栏河湾欢儿的专栏

01-工具 面板 视图

网页分为两步: 1.从设计稿中切出网页素材 比如说:按钮 logo 图片 背景等 2.编写代码,按效果图实现静态页面

11810

扫码关注云+社区

领取腾讯云代金券