一.iPhone屏幕尺寸簡介
iPhone 4s
屏幕尺寸: 3.5英寸
分辨率:960 * 640
iPhone 5/ iPhone 5s / iPhone 5c / iPhone SE
屏幕尺寸: 4.0英寸
分辨率:1136 * 640
iPhone 6/ iPhone 6s / iPhone 7
屏幕尺寸: 4.7英寸
分辨率:1334 * 750
iPhone 6 plus / iPhone 6s plus / iPhone 7 plus
屏幕尺寸: 5.5英寸
分辨率:1920 * 1080
iPhone發展在4s之前,iPhone主流的屏幕尺寸是在3.5英寸,隨著iPhone的發展,隨后依次出現了大尺寸的屏幕的設備,隨之而來的帶給開發者的問題就是,如何一整套界面,來適配所有尺寸的屏幕呢,當屏幕切換的時候,怎么解決該橫屏切換豎屏的問題。這一點蘋果為開發者提供了解決的辦法。
Size Class 尺寸類別
二. Size Class的應用
iOS開發中,UI控件的約束的創建是對開發人員最基本的步驟。適配橫屏,豎屏的時候,通過蘋果提供的Size Class可以通過一組UI控件,在不同的屏幕下,使用不同的約束,已達到不同的效果等。
Xcode 8 可視化界面,下方展示出了在各個設備下控件的顯示狀態,進行預覽。
可以觀察到wR hC這樣的顯示
W為Width;H為Height;R為Regular;C為Compact
iPad的Size Class 為 wR hR
iPhone 豎屏 wC hR
iPhone 橫屏 wC hC
iPhone 橫屏 wR hC (plus機型)
通過不同的Size Class可以在添加不同的約束的時候,指定該約束在不同的Size Class中可以使用,從而使得讓一組UI控件,適配了不同的尺寸的設備。
三.Demo練習
在設備豎屏狀態下顯示的標簽
在plus設備橫屏狀態下顯示的標簽
Plus機型橫屏狀態下顯示的標簽
非plus機型顯示的標簽