2016年1月27日 星期三

[iOS] AutoLayout筆記 - 決定寬高的方法

根據之前的經驗我們知道,設定Constraint必須設定寬高與距離,

而寬高除了很制式的寫下實際的值,我們還有許多方法可以決定一個View的寬高,

而這些方法可以混用,也就是隨著你的需求可以改變不同的做法。

像是高的部分固定寫死,而寬的部分與螢幕同寬等等。

1. 根據水平或垂直距離決定這個View的寬高

舉例來說,這個View我希望距離左右都20,距離上面10,而高為100,





















這麼一來即使你不設定寬,寬也會因為你設定左右約束而被拉開,

這個寬在各個解析度的手機下都會不一樣,某些情況下也許你會需要這樣去設定。

此時,你發現寬好像可以設定,然後設定完後也沒有報出錯誤訊息。



















但是當你執行的時候,你會發現XCode跑出一大串訊息。










因為Constraint衝突了,剛才我們提到寬利用左右間距拉開了,而你又約束它說寬必須等於580,因為前者的約束會因使用者手機而有所不同,因此也許在小一點的手機,前者的約束會讓你的View的寬等於400,而你又強制叫他寬必須等於580,如此一來就發生了衝突。

因此你必須小心使用,當有類似的訊息出來時,也許是發生衝突了。

2. 根據其他View的大小來決定寬高

舉例來說,我希望我的View與螢幕同寬,而高度固定是100,垂直距離為上方往下20

首先你只需要設定這兩個約束






















接著在你的View上按住Control拉線到最外層的View















我們選擇與這個view一樣寬。

最後將我們的view水平置中



















如此一來就完成了,與superView一樣寬的view,並且高為100。

這並不是唯一的做法,你也可以利用第一個做法來完成一樣的效果。

當你越來越熟悉這個工具的時候,你會發現調一個畫面有許多方法可以調到你想要的樣子。

接著我們可以根據需求去調整Constraint,我們找到與superView一樣寬的這條Constraint










































我們可以看到multiplier這個欄位,我們可以針對他做修改。

像是輸入0.5,代表我們的寬要等於superView寬的一半,

當然你也可以輸入2,代表我們的寬等於superView寬的一倍。

這是相當常用的功能之一,

某個View的寬等於另一個View寬的兩倍之類的。

有了這些知識你可以試著調一些現有的Layout,看看你是否能夠瞭解了。

像是調出計算機的樣子。