前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

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

作者头像
lizelu
发布于 2018-01-11 09:00:35
发布于 2018-01-11 09:00:35
2.6K1
举报
文章被收录于专栏:青玉伏案青玉伏案

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-08-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
1 条评论
热度
最新
很清晰,逻辑性比较强,赞!
很清晰,逻辑性比较强,赞!
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
iOS开发-屏幕适配三种技术(Autoresizing,AutoLayout,SizeClass)
1.系统适配:针对不同版本的操作系统进行适配 2.屏幕适配:针对不同大小的屏幕尺寸进行适配
孙寅
2020/06/02
5.5K0
iOS开发系列——Storyboard
到目前为止我们还没有解释我们的程序是如何显示默认视图界面的。做过WinForm程序的朋友都知道每个Window窗口界面都有一个设计器(对应一个设计文件),其实在IOS中也可以通过设计工具设计界面不用编写代码,这个工具就是Interface Builder。用Interface Builder编辑的文件在iOS5之前是一个“.xib”文件,从IOS5开始进行了改进,使用“.storyboard”文件进行设计。其实在上面我们已经看到这个文件,这里重点说明一下Storyboard文件的使用。
Kris大鲨
2018/05/05
3.5K2
iOS开发系列——Storyboard
IOS入门之StoryBoard
概述 在iOS的发展历程中,IOS开发经历了三种主要流派:使用代码手写UI及布局;使用单个xib文件组织viewController或者view;使用StoryBoard来通过单个或很少的几个文件构建全部UI。而在最近几年的开发中,苹果对 Storyboard 的开发力度也不断增强,添加了更多功能和特性,大大方便了界面的开发、适配以及提升代码性能。 我们来看看三种方式的主要区别: 手写页面和逻辑代码 如果你的目的是写一些可以高度重用的控件提供给其他开发者使用,那毫无疑问最好的选择应该是使用代码来完成UIVi
xiangzhihong
2018/02/06
1.9K0
IOS入门之StoryBoard
iOS 面试策略之系统框架-UIKit
本章节主要从视图、网络、设计模式几个方面考察开发者的开发水准,这是任何一个合格的 iOS 开发者都应该具备的基本素养。
会写bug的程序员
2021/05/13
1.6K0
iOS 面试策略之系统框架-UIKit
IOS开发之TabBarItem&NavigationBarItem
  想必大家都用过微信,微信间的页面切换是如何做成的呢?接下来我们用storyboard结合着代码来模拟一下微信的视图控制模式。   "工欲善其事,必先利其器",下面主要是对storyboard来进行我们项目框架的搭建的,必要时,用代码实现我们的页面效果。在IOS开发中常用的多视图间的切换大致有TabBarController, NavigationBarController, 和模态窗口。第一次接触模态的概念是在Web前端的内容中接触的。下面将会结合一个实际的效果来简单的介绍一下TabBar和Naviga
lizelu
2018/01/11
1.5K0
IOS开发之TabBarItem&NavigationBarItem
[iOS]创建界面方法的讨论
以前在入门的时候,找的入门书籍上编写的 demo 都是基于 Storyboards 拖界面的。后来接触公司项目,发现界面都是用纯代码去写复杂的 autoLayout 的。再然后,领导给我发了个 Masonry 库去看,依然是手写代码布局界面,但效率高了不少。工作一段时间,看了很多博客,也看了一些书,发现用纯代码写界面的很少,于是就在 Google 上搜 Storyboards 有什么好处,最后发现了一篇非常好的文章。在此提炼文章的一些观点,同时表达一下自己的观点。
wOw
2018/09/18
8020
iOS面试题-UI篇
面试题持续整理更新中,如果你正在面试或者想一起进阶,不妨添加一下交流群1012951431一起交流。
会写bug的程序员
2020/06/29
2.2K0
iOS面试题-UI篇
iOS开发之浅谈MVVM的架构设计与团队协作
今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正。本篇博客的内容沿袭以往博客的风格,也是以干货为主。 由于本人项目经验有限,关于架构设计方面的东西理解有限,我个人对MVVM的理解主要是借鉴于之前的用过的MVC的Web框架~在学校的时候用过ThinkPHP框架,和SSH框架,都是MVC的架构模式,今天MVVM与传统的MVC可谓是极为相似,也可以说是兄弟关系,也就是一家人了。 说道架构设计和团队协作,这个对App的开发还是比较重要的。即使作为一个专业的搬砖者
lizelu
2018/01/11
1.3K0
iOS开发之浅谈MVVM的架构设计与团队协作
IOS开发之获取Storyboard创建的ViewController
  前面的两篇博客都是学习有关屏幕适配也就是相对布局的东西,这篇博客中将会学习视图间的切换。视图间的切换我们可以用代码完成或者用storyboard来建立各个视图控制器间的关系。在需要用到代码进行切换时会用代码进行视图间的跳转。下面的东西我们会主要介绍到NavigationController来进行视图间的切换。下面也是和之前一样把代码和storyboard结合起来学习。   下面介绍一下我们要实现的功能和效果: App打开的第一个界面是登陆页面,登陆页面由用户名和密码以及一个登陆按钮构成。当登陆成功时会p
lizelu
2018/01/11
1.9K0
IOS开发之获取Storyboard创建的ViewController
iOS 布局进阶:你真的会用 autolayout 么?
iOS系统已经迎来了10.3.2版本,iOS软件开发发展至今已经相当成熟了。布局的方式从frame、size、center到如今强大的autolayout,将UI布局尽量的“自动化”和“智能化”,在很大程度上减少了程序员的工作量。
波儿菜
2018/05/07
1.6K0
iOS 布局进阶:你真的会用 autolayout 么?
【IOS开发基础系列】Storyboard专题
        如果你的 app 有大量的窗口,故事板能帮你减少许多用于从一个窗口转到另一个窗口的导航代码。与每个viewcontroller一个单独的 nib 文件不同,你的 app 只需用一个故事板文件(其中可以包含所有的viewcontroller 以及它们之间的关系)即可。
江中散人_Jun
2023/10/16
1.8K0
【IOS开发基础系列】Storyboard专题
iOS开发--UIWindow与程序启动原理与两种创建控制器的方法
UIWindow是一种特殊的View 1.iOS启动完毕后,创建的第一个视图控件就是UIWindow。 2.接着创建控制器的View, 3.然后将控制器的view添加到UIWindow上 4.于是控制器的View就显示在屏幕上了。 5.也就是说没有UIWindow,就没有UI界面
孙寅
2020/06/02
1.2K0
iOS开发--UIWindow与程序启动原理与两种创建控制器的方法
【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)
创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图;
韩曙亮
2023/03/27
5.3K0
【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)
编码篇-从一个第三方的StoryBoard项目中剥离部分功能到纯代码项目中
最近项目中需要实现视频监控功能,于是就用了某企业旗下的一款视频监控产品,在集成官方Dome中的监控画面播放的功能时,发现整个项目都是通过StoryBoard搭建的,然而我的项目是没有使用StoryBoard,纯代码开发,如果我用纯代码重写里面的功能逻辑当然也是行的,只是花费的时间和精力可想而知,这酸爽,谁试谁知道。
進无尽
2018/09/12
7430
编码篇-从一个第三方的StoryBoard项目中剥离部分功能到纯代码项目中
IOS开发之绝对布局和相对布局(屏幕适配)
之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便。在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对定位和相对定位有所不同但又有相似之处。下面会结合两个小demo来学习一下我们IOS开发中UI的绝对定位和相对定位。在前面的博客中所用到的UI事例用的全是绝对定位,用我们Storyboard拖拽出来的控件全是绝对定位的,就是我们可以同改变组件的frame来改变组件的位置和大小。而相对定位则不同,相对定位是参考组件周围的元素来确定组件的大小或位置,相对定
lizelu
2018/01/11
2.4K0
IOS开发之绝对布局和相对布局(屏幕适配)
iOS 关于Interface Building 的一些小技巧
## 1. UIStackView StackView 是iOS9以后才有的,主要解决了组件排列布局复杂的问题,高效快速。
星宇大前端
2020/02/13
2K0
iOS面试题梳理(三)
在某个方法中 self.name = _name,name = _name 它 们有区别吗,为什么? 1.前者是存在内存管理的setter方法赋值,它会对_name对象进行保留或者拷贝操作,后者是普
Jacklin
2018/05/15
1.4K0
SwiftUI-开发iOS项目
Xcode 11 + macOS 10.15 可以实时预览 SwiftUI 实现的界面,这个预览可以帮助我们快速查看代码对应的效果而不需要运行。
YungFan
2019/10/25
4.9K0
SwiftUI-开发iOS项目
IOS开发之自动布局显示网络请求内容
  在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏幕,用自动布局来完成我们想要实现的功能和效果显得尤为重要。本人更喜欢使用相对布局。在下面要学习的例子中暂且先用我们的StoryBoard来设置我们组件的约束,以后会在代码中给我们的元素新建约束。iPhone4,5和将要发布的iPhone6的屏幕的大小都不一样,所以屏幕的适配是我们搞App开发必须要考虑的问题。   我们要完成一个什么例子呢,先上两张程序运行最终的结果图,之后看着图提出
lizelu
2018/01/11
8420
IOS开发之自动布局显示网络请求内容
iOS 9 Storyboard 教程(一下)
你可以直接从storyboard编辑器中,使用原型cell你可以很容易的为你的tableViewCell设计一套自定义的布局.
hrscy
2018/08/30
3.3K0
iOS 9 Storyboard 教程(一下)
推荐阅读
相关推荐
iOS开发-屏幕适配三种技术(Autoresizing,AutoLayout,SizeClass)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档