自從 iPhone 5 與 iOS 6 上市之後, iPhone 有了多種解析度與方向,以往一個簡單的數字座標設定,眼下在不同解析度下面,就會有不同的結果。如果只想知道程式化手動建立 Constranints, 可以看這兒:手動建立Constransts 
先看一下實做Demo:
  


舉例來說,如果我們在XCode 沒有支援 autolayout 的版本(或關掉)下,用 StoryBoard 設定了一個 Button 並放在畫面中間的下面,大概會是這個樣子:

螢幕快照 2012-10-17 下午9.59.12
我們去看這個 Button 的 Layout  屬性的話,會看到這些:

 

螢幕快照 2012-10-17 下午10.02.34
這表示這個 Button 定位是在左上角起的座標,124, 397 的 位置下,設定了一個 width 73, height 44 的 Button。

這樣的設定似乎沒什麼問題,但其實是不是很理想,因為這是固定位置,所以在不同的解析度或方向時,就要重新設定位置,橫向的時候,和四吋的螢幕時,就要用程式重新計算,無法使用 IB 工具來設定畫面。在原生的狀況下,畫面將會出現:

橫向(Button 不見):

螢幕快照 2012-10-17 下午10.26.59  

 

我在四吋螢幕下留下底部空白:

螢幕快照 2012-10-17 下午10.29.23

 

  

但同樣的東西,在新版支援 AutoLayout 的情形下,結果與設定是完全不同的。同樣的我們在新版的 XCode (4.5.1 版之後 支援 iOS 6 Auto Layout 的情形下,我們會發現 StoryBoard 編輯畫面和以往的設定,有些不一樣了,其中有一個選項,叫做 Use auto layout。這個選項預設是開啟的,在開啟的狀況下如果我們拉入一個 Button 和以往的情形,有一些不同。

 

螢幕快照 2012-10-17 下午10.34.58


他不再只是讓你設定座標了,而是多了兩個 Constranints。


螢幕快照 2012-10-17 下午10.43.03   

 

Constranints 是 autolayout 的表示法,系統會依據他的設定,自動產生座標。

以這個案例來說,

第一個 Constranints 是指它的底部依據它的上層 View 的底部,加上固定距離。

第二個 Constranints 是指它的中央對齊它上層 View 的中央。

其他的依據這兩個來產生,於是就有自動座標,不管是 3.5 吋的畫面

 

螢幕快照 2012-10-17 下午10.57.45  

 

或四吋的 iPhone 5 

螢幕快照 2012-10-17 下午10.56.47  

 

更或者橫過來

 

螢幕快照 2012-10-17 下午10.57.05  

 

座標都以上面兩個 Constranints 來產生,而不再是固定座標。當然,Constranints 中有許多技巧需要做更進一步的說明,如優先權等,下次再做更進一步的說明。

如果想知道程式化手動建立 Constranints, 可以看這兒:手動建立Constransts 

 

, , , , , , , , , ,
創作者介紹

X Code Objective-C Swift 學習記錄 for iOS & macOS (OS X)

shenfive 發表在 痞客邦 PIXNET 留言(0) 人氣()