iOS使用Autolayout解决横竖屏控件差别较大
2018-02-23 本文已影响0人
小东邪啊
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
