#73 iOS Auto Layout 的修練-2-Device Size Classes-適應各裝置直向橫向不同佈局。

這個看文件有點難懂,看完前輩的影片教學總算懂了,操作不難,但是有點繁瑣。如果你所有的裝置及方向要支援最適合的佈局,你要設定4次的 Auto Layout 設定 (wC, hR)、(hC, wR)、(wC, hC)、(wR, hR)才行。

設定完成的影片:

各個代表裝置及方向的截圖

Device size classes

Size Class 包含「Compact」與「Regular」 的組合。

Compact是指比較緊湊的空間,分為wC 與hC。

Regular是指比較常規無約束的空間。分為wR與hR。

好記一點就是iPhone那邊比較短就是比較緊湊 Compact,iPad 因為螢幕很大,所以直向橫向都很寬裕 Regular。

把官網的表格也整理一下。

簡單看,只要可以把

  • iPhone 15 Pro Max (wC, hR) (hC, wR)
  • iPhoneSE (wC, hC)
  • iPad (wR, hR)

這三台直向跟橫向都設定完成大致就完成了。

初始布局

先設定一下 autolayout 佈局,

  • 圖片距離邊界10, 比例1:1
  • 文字也距離邊界 10,
  • 按鍵距離下邊界 10, 左右也距離10,2個按鍵長度相同

但是如果橫放就會只看到部份圖片及按鍵

所以我們要再設定橫放時的 autolayout 設定

要參考 size

在 右側的屬性面版最下方的 installed 按左邊的 +號,會出現 width height 的設定

直向 wC hR

把每一個 Constraints 都加上 wC hR, 把原本的 Installed 取消

橫向 wR hC

剛剛直向的 iPhone 15 Pro Max 一轉橫向,可以發現全部的 Constraints 都變成了灰色

就再設一下我們想要的佈局。

把每一個 Constraints 都加上 wR hC, 把原本的 Installed 取消

橫向 wC hC

接下來設定 iPhone SE 橫向

切過來果然跑版了,再重覆一次剛剛的動作。

設好一下我們想要的佈局。

把每一個 Constraints 都加上 wC hC, 把原本的 Installed 取消

橫向 wR hR

接下來設定 iPad

切過來果然跑版了,再重覆一次剛剛的動作。

Constraints 已經多到超過螢幕高度啦

設好一下我們想要的佈局。

把每一個 Constraints 都加上 wR hR, 把原本的 Installed 取消

直向 wR hR

切過來一樣跑版了,再重覆一次剛剛的動作。

但是因為直向跟橫向都是 wR hR ,但長寬是不一樣的,怎麼調都怪怪的。要再想一下

就是這樣啦,真的有點繁雜,所以可以想像,為什麼大部份的 App 都只做一個方向,哈。

參考:

之前的練習

參考:

而Size Class就包含「Compact」與「Regular」。

Compact是指「被約束」的空間,也就是受限的空間。分為wC與hC。

Regular是指「無約束」的空間,也就是不受限的空間。分為wR與hR。

Harsh Kumawat 的教學影片:
https://www.youtube.com/watch?v=iX5oLueHHsw

APPLE

--

--