使用Size Class實現(xiàn)橫堅屏界面適配

最近工作中碰到了橫堅屏切換且界面差異較大的需求。最常用的實現(xiàn)方式是通過實現(xiàn)兩個不同的布局View來適配橫屏與堅屏。這里使用了Size class這種新的方式,Mark一下吧。

簡單介紹

Size class是IOS8推出來的新功能。它將屏幕抽象成了三種狀態(tài):compant(緊湊)、Regular(寬松)、Any(任意)。這樣寬高搭配起來使用總共就3*3種狀態(tài)。這里給出一張圖和一些具體機(jī)型對應(yīng)的數(shù)據(jù):
sizeclass形象圖

iPhone4S,iPhone5/5s,iPhone6
堅屏:width:compant height:Regular
橫屏:width:compant height:compant

iPhone6 Plus
堅屏:width:compant height:Regular
橫屏:width:Regular height:compant

iPad
堅屏:width:Regular height:Regular
橫屏:width:Regular height: Regular

不考慮ipad的情況下,從上面我們可以總結(jié)下面幾個結(jié)論:

  • 在只支持堅屏模式時,使用WCHR模式,或者使用默認(rèn)模式不需要關(guān)注SizeClass功能
  • 在需要支持橫屏?xí)r,使用WCHR+WAHC模式,WAHC表示寬度為任意,高度為緊湊

Demo

現(xiàn)在通過一個例子來說明SizeClass的使用流程。需要為實現(xiàn)下面的橫豎屏界面。
堅屏界面

橫屏界面

可以看出,橫豎屏界面元素雖然沒有變化,但元素的位置變動較大,如果我們僅僅使用autolayout技術(shù)來布局整個界面,可以想象在屏幕切換時,需要使用較為繁鎖的代碼來更新約束。

我們先在常規(guī)模式把堅屏界面做好。
SizeClass堅屏布局約束

然后點擊下面的按鈕將預(yù)覽圖切換到橫屏狀態(tài)。
橫堅屏切換

在左側(cè)的約束中選擇不適用于橫屏的約束,將右側(cè)的installed按鈕設(shè)為非勾選狀態(tài)。點擊+號按鈕新增WAHC的約束。同樣可以在堅屏狀態(tài)下添加僅適用于堅屏的約束。
僅適用于堅屏的約束

適用橫屏的約束

我們可以在約束的列表中看到,只適用于一種狀態(tài)的約束,在屏幕切換到另外一種狀態(tài)時,就會呈現(xiàn)出灰色,即不可用的狀態(tài)。這樣通過不現(xiàn)的狀態(tài)下使用不同的約束就完成了整個屏幕的更新與切換。

尾聲

SizeClass暫時只支持IB的形式使用,如果你是一位純代碼的開發(fā)者的話,這個功能可能還需要再等待一段時間了,相信后續(xù)蘋果會推出相關(guān)的API使用接口,也希望Masonry等優(yōu)秀的開源項目能盡快提供支持。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容