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

小東邪發表於2018-02-24

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


需求:

1. 通常橫豎屏轉換後如果使用約束會按照正常的橫豎屏下同一個約束進行佈局,但是如果某些APP中橫豎屏控制元件位置差別較大時則顯得不適用。

比如控制元件hello這個Label在橫屏下為距離父控制元件頂部為0,橫向垂直於父控制元件中心如圖1,而在豎屏下如果按照自動適配則如圖2,但是如果我們想要它在豎屏為圖3的效果(即距離父控制元件左邊距離為0,距離父控制元件上部距離為100)則需要重新設計不同螢幕狀態下的約束。本例則為解決此類需求

舉例說明

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

注意:

  • 在橫屏狀態下,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功能

開啟Autolayout

2. 使用Autolayout 設定xib中控制元件的佈局
  • 以橫豎屏為例,先新增橫屏狀態下Hello Label的一條約束,如圖所示

橫屏狀態下Hello的位置

  • 在新增完約束後預設是所有狀態都支援此約束,則豎屏狀態下預設仍遵守此規則,豎屏狀態如圖所示。

豎屏狀態下Hello的位置

  • 因此我們首先要將橫屏狀態的所有約束依次設定為只有橫屏狀態支援,而豎屏不支援,則按照圖中所示操作即可。

新增橫屏約束

  • 然後再切換到豎屏狀態重新新增豎屏狀態需要的約束並設定每一條約束為僅豎屏狀態支援。

新增豎屏約束

注意,當開啟AutoLayout功能後,在xib中很多屬性左邊會有如上的加號按鈕,這些即都可通過加號按鈕控制不同狀態下控制元件的一些屬性,原理正如上所講,其他情況可自行研究

補充 :

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

DiffValue

2.同一控制元件不同狀態下的顏色,陰影,隱藏狀態等等

other

參考文章:蘋果官方文件Size Class

相關文章