iOS使用Autolayout-SizeClass解決橫豎屏控件位置差別較大情況

需求：

1. 通常橫豎屏轉(zhuǎn)換后如果使用約束會(huì)按照正常的橫豎屏下同一個(gè)約束進(jìn)行布局只恨，但是如果某些APP中橫豎屏控件位置差別較大時(shí)則顯得不適用。

比如控件hello這個(gè)Label在橫屏下為距離父控件頂部為0，橫向垂直于父控件中心如圖1捏题，而在豎屏下如果按照自動(dòng)適配則如圖2，但是如果我們想要它在豎屏為圖3的效果(即距離父控件左邊距離為0肉渴，距離父控件上部距離為100)則需要重新設(shè)計(jì)不同屏幕狀態(tài)下的約束公荧。本例則為解決此類需求

Demo

2. 本例主要使用Autolayout-SizeClass實(shí)現(xiàn)同一控件不同狀態(tài)下的布局，好處是像iPhone橫豎屏風(fēng)格相差較大以及iPhone與iPad同一界面布局相差較大時(shí)我們不需要?jiǎng)?chuàng)建兩個(gè)View同规，因?yàn)檫@兩個(gè)View只是布局不同而功能是完全相同的循狰，所以利用Autolayout可以幫助我們實(shí)現(xiàn)不同狀態(tài)下控件的布局。

適用情況

• 在iPad Pro上比iPhone SE上的文字字體更大
• 同一個(gè)View在橫豎屏布局差別較大
• iPad比iPhone多或者少一些控件及屬性等
• 當(dāng)應(yīng)用滑動(dòng)或者處于分屏模式布局內(nèi)容有所不同

注意：如上說明券勺，本例為解決橫豎屏绪钥，iPhone及iPad布局相差較大的情況，所以同一控件的功能并沒有改變关炼，僅僅改變布局位置程腹，本文默認(rèn)你認(rèn)為已會(huì)添加普通約束。

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

簡(jiǎn)書地址 : 控件布局

博客地址 : 控件布局

掘金地址 : 控件布局

總體流程：

• 使用xib創(chuàng)建View并開啟Autolayout功能
• xib中設(shè)置每個(gè)控件橫豎屏下不同的約束

Autolayout - Size Class 簡(jiǎn)介

在這里蘋果官方文檔,Size Class有詳細(xì)的介紹有關(guān)Autolayout-SizeClass的用法儒拂。

在這里不對(duì)Autolayout的普通布局做詳細(xì)介紹了寸潦，如果不會(huì)使用約束請(qǐng)先學(xué)會(huì)后再閱讀。

Size Class 基本功能

• (Install or uninstall)使用或者不使用一個(gè)View或control.

• (Install or uninstall)使用或者不使用一條約束

• 設(shè)置選中屬性的值(例如文字大小社痛，布局等)

• installed功能 : 當(dāng)系統(tǒng)加載一個(gè)scene時(shí)见转，會(huì)先實(shí)例化所有的views, contorls 和 constraints(約束),然后僅僅當(dāng)這些元素被installed(安裝)才會(huì)顯示在對(duì)應(yīng)的視圖結(jié)構(gòu)中

注意：系統(tǒng)會(huì)保持對(duì)uninstalled元素的引用，因此該元素并沒有被釋放蒜哀。

Regular and Compact

背景

• 我們通常使用的布局為 wAny hAny 表示各種不同尺寸的機(jī)型均支持

• 在過去適配iPhone和iPad我們需要?jiǎng)?chuàng)建2個(gè)View當(dāng)它們布局中控件差別較大斩箫，這樣相當(dāng)于有兩個(gè)文件，但是比如控件的點(diǎn)擊事件做的是同一個(gè)操作，這時(shí)我們相當(dāng)于每改動(dòng)一處代碼都需要在iPhone和iPad上做出對(duì)應(yīng)改變乘客，但是隨著機(jī)型大小的多變已經(jīng)iOS 8引入的拆分視圖控制器赊抖，以及iOS 9 引入分屏控制多任務(wù)模式使得操作十分繁瑣。

目的

• 為了簡(jiǎn)化這些操作寨典，蘋果提出了一種新的規(guī)范氛雪，比起考慮不同設(shè)備機(jī)型尺寸的布局，我們更加關(guān)注兩種類型的寬度(compact and regular) 以及兩種類型的高度(compact and regular).稱他們?yōu)閟ize classes.

以下為各種機(jī)型對(duì)應(yīng)的Size Class耸成，我們可依據(jù)此對(duì)不同機(jī)型及橫豎屏做適配

Size-Class.png

注意：

• 在橫屏狀態(tài)下报亩，iPhone(除了Plus)仍然被當(dāng)成compact widths.
• 所有的iPad在橫屏或豎屏模式中都被當(dāng)成regular widths and heights，這也就意味著
  iPad方向改變不會(huì)觸發(fā)size class.

Size Class 不是約束和自動(dòng)布局的代替品井氢，而是讓它們更好的一起工作弦追。

• 調(diào)整Views視圖或重新定位
• 字體和顏色能夠改變
• 約束能夠使用或者不使用(called installed and uninstalled)
• Views 能選擇添加或移除 (also called installed and uninstalled).

使用步驟

1. 在xib中打開使用Autolayout功能

openAutoLayout.png

2. 使用Autolayout 設(shè)置xib中控件的布局

• 以橫豎屏為例，先添加橫屏狀態(tài)下Hello Label的一條約束花竞，如圖所示

hello_landscape.png

• 在添加完約束后默認(rèn)是所有狀態(tài)都支持此約束劲件，則豎屏狀態(tài)下默認(rèn)仍遵守此規(guī)則，豎屏狀態(tài)如圖所示约急。

hello_portraitDefault.png

• 因此我們首先要將橫屏狀態(tài)的所有約束依次設(shè)置為只有橫屏狀態(tài)支持零远，而豎屏不支持，則按照?qǐng)D中所示操作即可厌蔽。

onlyLandscapeSupport.png

• 然后再切換到豎屏狀態(tài)重新添加豎屏狀態(tài)需要的約束并設(shè)置每一條約束為僅豎屏狀態(tài)支持牵辣。

onlyPortrait.png

注意，當(dāng)打開AutoLayout功能后奴饮，在xib中很多屬性左邊會(huì)有如上的加號(hào)按鈕纬向，這些即都可通過加號(hào)按鈕控制不同狀態(tài)下控件的一些屬性，原理正如上所講戴卜，其他情況可自行研究

補(bǔ)充 :

1.為同一條約束賦不同的值

DiffValue.png

2.同一控件不同狀態(tài)下的顏色逾条，陰影，隱藏狀態(tài)等等

portraitOther.png

參考文章：蘋果官方文檔投剥，Size Class