iOS使用Autolayout解决横竖屏控件差别较大

iOS使用Autolayout-SizeClass解决横竖屏控件位置差别较大情况


需求:

1. 通常横竖屏转换后如果使用约束会按照正常的横竖屏下同一个约束进行布局,但是如果某些APP中横竖屏控件位置差别较大时则显得不适用。

比如控件hello这个Label在横屏下为距离父控件顶部为0,横向垂直于父控件中心如图1,而在竖屏下如果按照自动适配则如图2,但是如果我们想要它在竖屏为图3的效果(即距离父控件左边距离为0,距离父控件上部距离为100)则需要重新设计不同屏幕状态下的约束。本例则为解决此类需求

Demo

2. 本例主要使用Autolayout-SizeClass实现同一控件不同状态下的布局,好处是像iPhone横竖屏风格相差较大以及iPhone与iPad同一界面布局相差较大时我们不需要创建两个View,因为这两个View只是布局不同而功能是完全相同的,所以利用Autolayout可以帮助我们实现不同状态下控件的布局。


适用情况

  • 在iPad Pro上比iPhone SE上的文字字体更大
  • 同一个View在横竖屏布局差别较大
  • iPad比iPhone多或者少一些控件及属性等
  • 当应用滑动或者处于分屏模式布局内容有所不同

注意:如上说明,本例为解决横竖屏,iPhone及iPad布局相差较大的情况,所以同一控件的功能并没有改变,仅仅改变布局位置,本文默认你认为已会添加普通约束。


GitHub地址(附代码) : 控件布局Demo

简书地址 : 控件布局

博客地址 : 控件布局

掘金地址 : 控件布局


总体流程:

  • 使用xib创建View并开启Autolayout功能
  • xib中设置每个控件横竖屏下不同的约束

Autolayout - Size Class 简介

在这里苹果官方文档,Size Class有详细的介绍有关Autolayout-SizeClass的用法。

在这里不对Autolayout的普通布局做详细介绍了,如果不会使用约束请先学会后再阅读。

Size Class 基本功能

  • (Install or uninstall)使用或者不使用一个View或control.

  • (Install or uninstall)使用或者不使用一条约束

  • 设置选中属性的值(例如文字大小,布局等)

  • installed功能 : 当系统加载一个scene时,会先实例化所有的views, contorls 和 constraints(约束),然后仅仅当这些元素被installed(安装)才会显示在对应的视图结构中

注意:系统会保持对uninstalled元素的引用,因此该元素并没有被释放。

Regular and Compact

背景

  • 我们通常使用的布局为 wAny hAny 表示各种不同尺寸的机型均支持

  • 在过去适配iPhone和iPad我们需要创建2个View当它们布局中控件差别较大,这样相当于有两个文件,但是比如控件的点击事件做的是同一个操作,这时我们相当于每改动一处代码都需要在iPhone和iPad上做出对应改变,但是随着机型大小的多变已经iOS 8引入的拆分视图控制器,以及iOS 9 引入分屏控制多任务模式使得操作十分繁琐。

目的

  • 为了简化这些操作,苹果提出了一种新的规范,比起考虑不同设备机型尺寸的布局,我们更加关注两种类型的宽度(compact and regular) 以及两种类型的高度(compact and regular).称他们为size classes.
以下为各种机型对应的Size Class,我们可依据此对不同机型及横竖屏做适配
Size-Class.png

注意:

  • 在横屏状态下,iPhone(除了Plus)仍然被当成compact widths.
  • 所有的iPad在横屏或竖屏模式中都被当成regular widths and heights,这也就意味着
    iPad方向改变不会触发size class.

Size Class 不是约束和自动布局的代替品,而是让它们更好的一起工作。

  • 调整Views视图或重新定位
  • 字体和颜色能够改变
  • 约束能够使用或者不使用(called installed and uninstalled)
  • Views 能选择添加或移除 (also called installed and uninstalled).

使用步骤

1. 在xib中打开使用Autolayout功能
openAutoLayout.png
2. 使用Autolayout 设置xib中控件的布局
  • 以横竖屏为例,先添加横屏状态下Hello Label的一条约束,如图所示
hello_landscape.png
  • 在添加完约束后默认是所有状态都支持此约束,则竖屏状态下默认仍遵守此规则,竖屏状态如图所示。
hello_portraitDefault.png
  • 因此我们首先要将横屏状态的所有约束依次设置为只有横屏状态支持,而竖屏不支持,则按照图中所示操作即可。
onlyLandscapeSupport.png
  • 然后再切换到竖屏状态重新添加竖屏状态需要的约束并设置每一条约束为仅竖屏状态支持。
onlyPortrait.png

注意,当打开AutoLayout功能后,在xib中很多属性左边会有如上的加号按钮,这些即都可通过加号按钮控制不同状态下控件的一些属性,原理正如上所讲,其他情况可自行研究

补充 :

1.为同一条约束赋不同的值

DiffValue.png

2.同一控件不同状态下的颜色,阴影,隐藏状态等等

portraitOther.png

参考文章:苹果官方文档Size Class

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

推荐阅读更多精彩内容