[iOS] AutoLayout 筆記 - 設定距離的小技巧2

上次提到設定距離的小技巧，還有一些東西可以補充。

首先先拉出一個100 x 100 ，且水平垂直置中的View

點Center Y這條線，並將First Item打開，會看到許多選項

Center Y，代表的意思就是你的View的中心位於這條線上。

你可以試著將他調成Top，此時你的View的Top會位於這條線上。

接著你將他調整成Bottom，你大概會猜出，此時這個View的Bottom會位於這條線上。

接著你試著按另一條線，Center X，在First Item一樣有三個選項可以選。

有上一個例子後，你應該會知道這三個改了之後大概會有什麼樣的效果。

此時，假設我們想要在螢幕高度1/3的位置處，往下畫出這個View，該怎麼做呢？

你可以先拉出一個View，讓他的高度等於1/3，確認你的位置是正確的。

接著回到一開始拉出的置中View，並將Center Y的First Item改為Top，因為你要從1/3的位置處畫出這個View，而不是在1/3位置處置中這個View。

此時，你可以設定Second Item，預設是Superview.Center.Y，也就是在SuperView的置中的位置，一樣有數個選項可以做設定。

改到Top的話，就是在Superview的Top處。

而Superview的Bottom的話，你的View會在Superview的Bottom，

此時應該會在螢幕之外。

接著試著將Multiplier 改為1:3，你會看到你的View突然跑到螢幕之中。

可是還是有一點差異，因為有status bar的關係，因此會有一些差距。

你可以將status bar關閉，在將Frame修正，就會一致了。

此時你會看到你的View的確是在1/3處。

或者你需要status bar的話，就只要將他的高度加入Constant之中即可。

status bar的高度為20，將他填入Constant之中。

學會這個技巧後，許多需要透明View來達成的工作，也可以靠這樣的技巧來完成。

當然左右也是一樣的道理，靠比例來設定你需要的Layout吧！

[iOS] AutoLayout - 實際例子 - 圖片上放元件

有網友提出了這樣的問題，有一張圖在背景，會隨著螢幕比例不同而改變，而要怎麼準確的將元件放到正確的位置上呢？

首先你要先確認原圖的大小，並先將圖片放到正確的位置上。

畢竟，如果圖的位置都錯了，那調整元件也沒有任何意義。

圖片原始的大小是1024 x 158，在所有橫向的畫面上，至底。

首先先將StoryBoard調整成wAny hCompact

這樣我們可以只在橫向的iPhone顯示圖片。

接著將ImageView加入其中，並設定左下右均為0，且將Aspect Ratio打勾。

接著我們將Aspect Ratio的比例設定一下，跟原圖要一樣的比例。

此時你可以開各個模擬器並看一下效果是否正確。

確定圖片位置正確後，就可以開始將元件放在上面。

接著你得回去確認原始圖，你要放的位置是在哪兒。

首先先將下面的區塊標示出來吧，實際去量高度大約是42，那我們該怎麼標出下面的區塊呢？

先放一個View，左右下均為0，高為該ImageView的42/158

因為原始圖的全部高度為158，而原始圖該位置的高度為42，用比例的話他會自動縮放。

做完這兩步驟你應該可以準確地畫出下半部的位置，接著我們是要在下半部的右邊。

因此我們可以在這個區塊再加入一個View，讓他靠右，寬度是這區塊的一半。

此時你應該可以標出右邊的區塊了，接著我們量一下要放的位置是哪兒。

差不多是由左到右145距離左右，因此我們再塞入一個View，把145這個距離標出來。

首先一樣靠左上下均為0。

而寬你必須指定為supView的145/512，一樣得使用比例來決定他的寬。

此時你可以將一些View的底色改為透明，並且確認一下這個位置是不是正確的。

看起來是滿像我們要的效果，接著我們一樣把右邊的區塊顯示出來。

只需要加入一個左右上下均為0的View即可。

接著我們只要在右邊的區塊加入我們要的View就可以了。

假設寬要320，而高要20，當然如果要設定也是要靠比例來設定。

首先先加入一個View，並且往左靠0

接著將他的寬高設為與supview同寬高，在進行微調。

當然別忘記置中也要設定。

將高設為20:42

將寬設為320:367

要隨時注意你的superView現在是多大來做改變。

寬367是因為左邊區塊是145，而512-145=367。

最後如果沒設定錯誤的話，應該會達到你所需要的效果。

將不必要的部份設為透明，只留下需要的部份。

簡單的說可以運用比例與透明View來調整成你要的位置。

原圖的位置是相當重要的參考點，因為他會隨著你的螢幕大小而改變，

可以利用原圖的比例來設定，這樣不管在哪個狀況下都會改變。

[iOS] AutoLayout筆記 - Priority的功能

設定Constraint的時候，可能會發現有一欄叫做Priority，可是似乎都沒有用到。

某些狀況下你會需要它的，舉例來說。

我現在有一個View，他的高度希望是由螢幕解析度來決定，但是又希望有上下限。

像是，View的高為螢幕高的1/6，可是最大不能超過100。

這算是比較特別的例子，他會隨著螢幕解析度的不同而改變，而最大不會超過100

如果有這類的需求，就可以使用Priority來達成。

像是在4s的時候，1/6的大小應該不會超過100，

而6s+的時候，1/6的大小會超過100，而你希望他不要超過。

首先先做簡單的設定，左上右均為0 ，高為100。

接著在設定此View高為螢幕的1/6，並將Priority設為750。

最後將高為100的Relation 改為 Less Than or Equal

此時你執行此APP，在最小的4s手機下，這個View的高是160(2x)，也就是4s高的1/6，

在6s+執行時，原本1/6應該是320(3x)，但是我們規定他最高不能超過100，在3x的時候就是不能超過300，因此這個View的高度會是300

Priority他的值越高越不會被改動，設為1000就是最高選項，任何人都得聽它的話，值越小的Constraint要聽值越高的。

以這個例子來說

螢幕高1/6      Priority 750

高度小於100  Priority 1000

在4s的狀況下 第一條得到的結果是160(2x)，而第二條也是符合的，小於等於200(2x)

在6s+的狀況下 第一條得到的結果是320(3x)，可是第二條的Priority高於第一條，

第一條說我想要這個View是320，可是他Priority輸給高度小於300(3x)

因此只好聽老大的話，乖乖的小於等於300(3x)。

你可以設定多個優先順序，來達到你想要的效果。

備註：

這邊的值都是依照該裝置的2x 3x來說明的，

簡單的說我輸入100，在2x的裝置下就是100x2 = 200

3x則是300。

[iOS] AutoLayout筆記 - 設定距離的小技巧

你現在有一個需求，假設是一個View必須放在螢幕寬度1/3的位置處，並且置中。

你可能會使用透明的View來達成這樣的效果。

先放一個大的透明View，假設高為150，寬與螢幕等寬。

接著在這個透明View裡面，切兩區塊，左邊為1/3，右邊為2/3

塞入一個View，設定寬為父View的1/3，並靠左上下均為0

此時，你會得到一個寬為螢幕1/3大小的區塊

接著，你只要在綠色區塊塞入你要的View，在將綠色區塊設為透明並將你的View置中。

這樣也許能夠達到你想要的效果。

但是似乎有點太麻煩，而且也設定了不少Constraint

接著你可以試試看另一種作法，可以少掉一些設定。

我們在下面一樣在加入一個150高的View，然後與上面條件相同，在1/3處有一置中的View

接著我們直接在這個View當中加入我們要的View，省略了上面綠色區塊的步驟

一樣設定寬高為100

接著加入垂直與水平置中

接著你選擇垂直的那條Constraint，並進行修改。

你會發現結果會跟上面的一樣。

事實上，你可以針對水平，垂直置中的Constraint做修改，只需要去改他的Ｍultiplier就可以了。

假設我們要分上下兩區塊，而我們的View要在下面的區塊並置中。

你只要很簡單的將垂直置中的Ｍultiplier改為3/2就好了。

某些情況下你可能希望你的距離不是一個固定的值，試著使用這種方式來設定你的Constraint。

另外一提，如果你想要利用此方式又增加一些固定值是否可行呢，

像是需要一個置中的View，但是他又得往右約100。

一樣是可行的，先拉出最簡單的置中Constraint。

接著點選垂直的Constraint，並將他的Constraint設定為100。

你就會得到一個置中，且偏右100的View了。

[iOS] AutoLayout 筆記 - ScrollView

ScrollView在設定Layout之中算是特殊種，一開始怎麼設定都不如預期。

一開始假設我們在ViewController之中加入一個ScrollView，並填滿ViewController

接著，我們想要在ScrollView之中，加入一個高100，全螢幕寬的View，在最上方。

根據以前的經驗，你可能會這樣設定。

水平距離為 左邊界0
垂直距離為 上邊界0
寬為螢幕大小
高為100

四個條件都吻合了，可是Xcode卻紅通通給你看。

即使按下Update Frames，卻發生不太正常的現象。

整個View變得很詭異

問題點有兩個，一個一個來解說。

1. 在ScrollView裡面的所有View，寬高均不能以ScrollView的距離來定義。

在一般的View，你塞入一個View，只要將左右邊界距離設為0，你的子View寬就會等於父View，而這樣的效果，在ScrollView是不行的。

因此第一個問題，你的寬必須等於ScrollView，而不是靠距離來等於。

寬高當然也可以用寫死的方式，像是定義他是100之類的，這是可行的，但是靠邊界來撐大是不行的。

2.在ScrollView裡面的所有View，都必須定義右邊界，下邊界的距離。

ScrollView是可以捲動的，水平是往右捲，而垂直是往下捲，因此你必須定義這個View離右邊界與下邊界的距離為何。

這可能有點難理解一點，不過我們實際動手做看看就知道，拿上一個例子來說，我們現在有一個View，他與螢幕等寬，高度是浮動的，假如超過螢幕高度就可以捲動。


一樣，先設定上左右間距為0，高度先設定為100，根據第一點我們得知，寬高均不能使用距離決定，因此我們將此View設定與ScrollView同寬。

此時你按下Update Frames，你會發現大部分都是你想的結果。

但是，還是有紅色的錯誤，根據我們前面的說明，必須定義右邊界與下邊界的距離，而我們已經定義了右邊界，而下邊界也沒定義，那我們設定下邊界的距離為0。

根據以前的經驗，你可能會認為這個白色區塊會填滿整個ScrollView，但是並沒有，而且紅色的錯誤都消失了，因為第一點有提到，所有ScrollView內的View，都不能依照距離來決定寬高。

接著你可以改個顏色跑看看，你會發現他是一個高100，不能捲動的View，因為沒有超出螢幕距離。

接著我們把這個區塊的高設定的高一些，就能感受到效果了。

找到此View的Hight，將它設定成1500，在試試看。

你就會得到可以捲動的區塊了，因為我們剛才設定與下邊界為0，因此你捲到最下面還是綠色的。

最後我們試著把下邊界設為30，這樣你捲到最下面會發現，有一小塊是白色的。

這樣你對ScrollView設定Layout應該有一定的了解了，

試著在ScrollView多加幾個View看看吧。