XCode中的sizeclass(Vary for Traits)匹配手机的横竖屏

几乎所有的iOS开发者都会遇到屏幕适配的问题,苹果提供了很多方法来做适配,包括XibNSLayoutConstraint等。同时,为了更方便的做适配,我们还可以使用一些第三方的框架,如OC中的Masonry(Swift中有对应的SnapKit)。

这里将介绍一种比较特殊的情况 -- 如何应对 差异性布局

差异性布局

我们日常开发中,经常会遇到下面这种布局方式:

竖屏.png

横屏.png

尽管横竖屏的布局不尽相同,但是从两种的总体布局来看,两者的布局方式是相似的。区别仅仅在于子控件收到父视图的尺寸影响,自身做出了相应的改变。

而这里所说的差异性布局指的是,在横竖屏的情况下,呈现不同的布局方式。

下面两张图片可以解释:

竖屏

横屏

虽然控件是一样的,但是排布的方式却完全不一样了,在竖屏的时候,label在星星的下方,而横屏时,因为屏幕的高度不够,想要做到相同的布局方式无法达到。于是将label放在了星星的右边,这就是差异性布局

如何实现差异性布局

有两种方法可以做到差异性布局。

第一种很接地气:给屏幕的方向转动添加一个观察者,当屏幕转动的时候,将布局做相应的改动。

第二种使用Xib中的sizeClass,Xcode8之后更名为Vary for Traits。也是本文主要要介绍的。

先说第一种:添加观察者模式

我们可以在需要做变动的界面中,像下面这样添加一个观察者:

[[NSNotificationCenter defaultCenter] addObserver:self 
selector:@selector(statusBarOrientationChange:) 
name:UIApplicationDidChangeStatusBarOrientationNotification object:nil];

然后调整回调函数statusBarOrientationChange中的实现,在这里改变布局,达到目的。
这种方式的缺点是代码量太多了,面对复杂的界面布局,做起来的会相当的蛋疼的(当然,这中需求的界面一般不会太复杂)。 优点是可以针对任何的设备,包括IPad/IPhone,设置可以细化针对不同的机型,比如说,4S的屏幕跟其他的屏幕比例不一样,单纯是放大缩小界面是达不到效果的,那使用这种方式不失为一个好办法。

第二种,操作SB中的来Vary for Traits实现。其实一听到种方式就联想到简便了。具体操作如下:

1.介绍
进入到我们要操作的界面的Xib中,找到底部的Vary for Traits:


Vary for Traits板块
  • 这里左边是各种各样的机型:


    机型

    有手机,也有pad,鼠标左点击之后,上面会显示: view as :XXXXX,图中显示的iPhoneSE。我们下面称这个区域为机型区域。

  • 中间部分:


    横竖屏

    这个不用说了吧。下面称这个区域为屏幕方向区域。

  • 设置参数:


    参数

    点击之后,会出现一个对话框,有两个选项值:Width和 Height


    参数值选项

    下面称这个区域为参数区域。

以上的三个部分结合筛选出我们想要的屏幕样式。 其实和sizeClass一样,只不过现在变成了可视化。

2.操作
我们先对竖屏的手机进行布局,任意选中一个手机,比如iPhone SE,然后选中屏幕方向区域中的竖屏,最后点Vary for Traits按钮(设置区域)。下图:

示例

现在通过选中两个参数来筛选我们要的屏幕。因为组合有很多中,我们一个一个试。
先选中Width,下图:

选择Width

发现整个区域变蓝色了,说明选中了很多的设备,具体有哪些设备,通过点击图中的蓝色圈圈起来的箭头,看到当前支持的设备:
机型

只看手机 手机部分,发现不管是横屏还是竖屏都支持,这样肯定不行。
Width取消,选中Height之后,同样的步骤,看到支持的设备:

机型

这正是我们想要的竖屏。

选完之后,会看到原本的Vary for Traits按钮变成了 Done Varying,这表示当前正处编辑状态。Done Varying表示点击之后就完成,相当于保存的效果。我们下一步是给屏幕做适配,做好了之后再点,就给选中的机型做好了适配。比如给竖屏做好了适配:


适配1

然后点击Done Varying。这样竖屏的适配就做完了。

接下来横屏的适配,同样的方式。


设置
横屏适配

完了之后,运行一下,就发现分别针对横竖屏幕的适配做好了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容