iOS 12 Auto Layout界面自動佈局系列1-自動佈局的基本原理

不知不覺iOS系統已經更新到12了,技術的發展真是太快了,看來我也得與時俱進及時更新文章了(有些還是For iOS8的。。。)。這個系列主要是講解iOS系統中的自動佈局(Auto Layout),跟大家分享一下我自己關於界面自動佈局的理解,如有錯誤請不吝指教。

 

一、視圖定位的基本原理

視圖(View)是一個用於顯示內容的矩形區域,它是構成App界面的最基本單元。下圖爲計算器App的橫屏界面,其中每一個計算器按鍵都是一個視圖。

在平面直角座標系中,要準確描述一個矩形需要確定以下四個佈局屬性(Layout Attribute),即水平位置x垂直位置y寬度w高度h。只有上述4個佈局屬性都確定的情況下,該視圖才能正確顯示在界面中。

以上圖爲例,如果要將數字鍵5添加到界面中,則代碼類似爲:

UIView* number5View = [[UIView alloc] initWithFrame:CGRectMake(x, y, w, h)];
[parentView addSubview:number5View];

上述代碼詳細給出了該視圖的4個佈局屬性的值(x、y、w、h),我們姑且稱這種方式爲“顯式座標定位方式”

 

二、舊的界面佈局方式及其缺點

請思考以下問題:

  • 顯式座標定位方式在處理視圖數量很多時會遇到什麼問題?
  • 顯式座標定位方式在適配不同設備屏幕尺寸以及響應橫豎屏旋轉時會遇到什麼問題?

首先,當視圖數量很多時,由於每個視圖都需要精確給出4個佈局屬性的值,因此構建每一個視圖非常繁瑣而又容易出錯。而且,當發生界面尺寸變化(例如橫豎屏切換)時,你需要重新計算每個視圖的新的佈局屬性值,工程量巨大。這顯然不是一個令人滿意的解決方法。

於是蘋果給出了一個更好的解決方法,就是在創建視圖的同時給出其相對於父視圖的“對齊方式與縮放係數”,即autoresizingMask。當父視圖發生變化時,通過每個子視圖的autoresizingMask即可自動得出新的位置,而無需開發者提供。例如上圖中的等號鍵,即可以指定其對齊方式爲右對齊、下對齊,指定其縮放係數爲固定寬度、固定高度。這樣就保證了等號鍵總位於其父視圖的右下角且寬高不變。

蘋果解決問題的出發點是好的,通過給出界面變化的規則來自動計算出佈局屬性的值,從而省去開發者的工作。

然而autoresizingMask的問題在於:

  • 其描述界面變化規則不夠靈活,很多變化規則根本無法精確描述。autoresizingMask縮放比例是UIKit內部計算的,開發者無法指定縮放比例的精確值。
  • 變化規則只能基於父視圖與子視圖之間,無法建立同級視圖或者跨級視圖之間的關係。例如,對於上圖的計算器,autoresizingMask無法描述數字鍵5緊貼在數字鍵8下面,以及數字鍵0左側與數字鍵1左側對齊且數字鍵0右側與數字鍵2右側對齊這樣的規則。

因此在過去,很多時候開發者還不得不硬着頭皮使用顯式座標定位方式來解決轉屏(例如重寫layoutSubviews方法),或者分別做橫屏與豎屏兩套界面。

這些開發者都能忍,然而噩夢纔剛剛開始。。。

iPhone 4s及早期iPhone屏幕的尺寸是固定的(3.5寸屏:320*480),基本上在測試機上運行的效果就是用戶運行的效果。但此後的新版iPhone爲16:9的寬屏,分辨率也各不相同(4寸屏:320*568,4.7寸屏:375*667,5.5寸屏:414*736,5.8寸屏:375*812,6.1寸屏:414*896,6.5寸屏:375*896),另外有的app還需要同時支持iPad。難道所有這些設備都需要開發者去自己處理每個視圖的精確位置,自己去處理轉屏嗎?

蘋果當然也意識到了這些問題,因此在iOS 6發佈時引入了自動佈局(Auto Layout)佈局約束(Layout Constraint)的概念,意圖從根本上解決問題,接下來我們就來說說自動佈局的原理和使用方法。

 

三、自動佈局的原理與使用方法

自動佈局是對autoresizingMask的進一步改進,它允許開發者在界面上的任意兩個視圖之間建立精確的線性變化規則。所謂線性變化就是數學中的一次函數,即:

y = m*x + c

其中x和y是界面中任意兩個視圖的某個佈局屬性,m爲比例係數,c爲常量。例如,如果我們想描述數字鍵5緊貼在數字鍵8下方,我們可以建立如下規則:

  • 數字鍵5的水平中心x座標 = 1.0 * 數字鍵8的水平中心x座標 + 0.0  //8和5水平中心對齊
  • 數字鍵5的頂部y座標 = 1.0 * 數字鍵8的底部y座標 + 0.0  //8的底部爲5的頂部
  • 數字鍵5的寬度w = 1.0 * 數字鍵8的寬度w + 0.0  //8和5寬度相等
  • 數字鍵5的高度h = 1.0 * 數字鍵8的高度h + 0.0  //8和5高度相等

每個線性變化規則稱之爲佈局約束(Layout Constraint)。由於每個視圖需要確定4個佈局屬性才能準確定位,因此一般來說都需要建立4個佈局約束。

在下一篇文章中,我將詳細介紹添加自動佈局約束的方法,敬請關注。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章