2016-09-14 69 views
0

剛剛面對iOS,我很難設置自動佈局。觀看了許多視頻來學習,但他們都爲解決特定問題提供瞭解決方案。沒有視頻涵蓋了所有的基本規則來設置一個UI對象到它的位置&與適當的流量。需要幫助來設置自動佈局

我來自科羅娜背景&用於編程設置非常好的用戶界面。我以同樣的方式思考,但我認爲蘋果讓它變得如此困難,或者人們無法正確地解釋我。

請參閱此問題中附加的2個圖像&告訴我適用於實現此UI的規則。我請求你們以一般的方式請求解釋,以便我的其他屏幕可以使用相同的規則完成。

圖片1:http://i.stack.imgur.com/MPE47.png

圖2:http://i.stack.imgur.com/qEiCm.jpg

+1

你需要證明你已經嘗試這樣我們就可以告訴你解決什麼約束......確保每個這些箱子具有相同的寬度和高度相等的限制設置 –

+0

我莫名其妙定置其他屏幕但在這個屏幕上,甚至無法啓動。 Bcz我不知道如何讓這個黑盒恰好是屏幕尺寸的一半。所以無論我能做什麼,我都會根據需要在UI構建器中放置一切,並應用「爲整個屏幕添加缺少的約束」。但它放錯了一切,所以我清除了它。 –

+0

你看過什麼教程?這個解釋一切都很好,並有一個類似於你的設計:https://www.raywenderlich.com/115440/auto-layout-tutorial-in-ios-9-part-1-getting-started-2 – Losiowaty

回答

2

甲真正有用的準則是

  • 元件應該能夠找出它的位置(x和y)和尺寸(寬度和高度)。
  • 確保每個元素只有一種方法來找出其位置和大小。
  • 請記住,所有元素的自動佈局可以相互影響。

最常用的佈局約束是:

  • 視圖到另一個視圖的頂部之間的空間。
  • 尾隨視圖右邊緣與另一視圖之間的空間。
  • 主導到另一個
  • 視圖的底部邊緣和另一視圖
  • 寬度之間的空間中的視圖的左邊緣之間的空間分配一個固定寬度的圖(注它也可以是一個百分比 - 縱橫比)
  • 身高分配一個固定寬度的視圖(也可以是百分比)
  • 水平居中始終相對於另一視圖
  • 中心垂直的水平中心視圖對齊始終對準視圖相對另一視圖的垂直中心

例如,在第二個圖像,說的黃色條是一個叫做titleView的UIView。

  • 通過將頂部佈局約束設置爲容器視圖來設置titleView的位置。 y位置設置爲
  • 將前導約束設置爲容器視圖。 x位置設置爲
  • 將尾部約束設置爲容器視圖。視圖的寬度現在將隨着屏幕大小而變化。 現在可以確定寬度
  • 設置高度爲50. 高度設置爲
  • Now ...如果您還設置了此視圖的寬度,則會導致layoutConstraints中斷,因爲您已重新定義寬度約束。然後一些約束將被忽略。

layoutConstraints如何互相影響的另一個例子。讓我們看看確定第二個圖像的y位置。

  • 說titleview的具有頂部約束至50
  • currentCampaignView的容器+高具有頂部約束titleview的底部。 (使用垂直間距)+等於titleView的高度。 (y +身高可以計算)
  • 5個按鈕的高度相等。頂部按鈕具有TopCampaignView底部的頂部空間。中心按鈕的頂部空間位於頂部按鈕的底部。底部按鈕的頂部空間位於中央按鈕的下方。
  • startCampaignView與currentCampaignView具有相同的高度。對底部按鈕底部的頂部約束和對容器視圖的底部約束。

請注意,因爲視圖和按鈕具有相同的高度,所以在確定高度時都會考慮所有高度。因此,它們都是相互關聯的,並且可以使用的整個高度是特定的,這一點非常重要。在這種情況下,它由第一個元素titleView指定,該元素對Container視圖(其高度應該是已知的)具有頂端約束,而最後一個元素startCampaignView對Container視圖具有底部約束。因爲它們之間的所有視圖都與y位置和高度相關聯,所以視圖可以計算出每個視圖的高度和y位置應該是什麼。

再舉一個例子。 (你的第一個圖像)

  • topLeftButton設置上制約上海華。 (y),將前導約束設置爲Superview(x),設置高度= 100(高度),將等寬設置爲topRightButton(請注意,由於無法確定topRightButton的寬度,所以我們還沒有寬度)
  • topRightButton將頂部約束條件設置爲Superview。 (y),對topLeftButton的前導約束(將用於x),將追蹤約束設置爲超視圖。現在可以確定兩個按鈕的寬度,因爲我們有一個外部的startX + endX,我們知道兩個按鈕相互接觸並且寬度相等。因此可用空間將被拆分以獲得兩個按鈕的寬度。