2015-10-14 50 views
2

我目前正在建立一個登錄界面應該最終是這個樣子:靜間距對自動版式

enter image description here

我已經成功地完成創建所有屏幕上所需的外觀所需要的所有約束大小,但是,我似乎無法找出正確對齊「沒有帳戶?註冊」所需的約束。我設計了這樣的「沒有帳戶?」是UILabel,「註冊」是UIButton。我剛剛將這些並排排列在一起。

的的UILabel, 「不要有一個帳戶?」,有以下限制: enter image description here

的UIButton的,「註冊,具有以下限制:

enter image description here

這些約束似乎在屏幕尺寸4「及以下的屏幕上完成了他們需要的功能。然而,4.7英寸和5.5英寸(不包括iPad),UILabel和UIButton之間的間距很大。我已閱讀Ray Wenderlich的自動佈局教程,但仍然無法找出問題(我是新來的自動佈局,但我有一個想法,我在做什麼,我不只是添加隨機約束,希望它的工作原理)。

這是它看起來像我的所有目標設備:

enter image description here

通知作爲屏幕尺寸的增大,所以不會在標籤和按鈕之間的差距。任何幫助表示讚賞。

回答

3

您正在將標籤的前導空間設置爲其超級視圖,並且將該按鈕的尾部空間設置爲其超級視圖。所以很顯然,如果超級觀點變得更寬泛,他們將會進一步分化。

所以,如果這不是你想要的,不要這樣做。

你想要做什麼的實際解決方案非常棘手。您希望這兩個對象表現爲一個組,並且您希望該組以居中。沒有簡單的表達方式。您將需要組合。換句話說,您將需要一個容器視圖,爲該視圖提供絕對寬度並居中,並將這兩個對象放在容器內。

iOS 9的新功能,UIStackView可以爲您提供幫助。

+0

謝謝,這是有道理的。這是我所害怕的,謝謝你讓我知道。我可能最終會試圖在容器視圖中將它們「分組」,因爲我需要支持以前的版本。我很感謝答覆,謝謝! – Aaron

+2

不客氣。很好問的問題;好的屏幕截圖。約束問題很難提出(因爲它們很難描述);你做得很好。 – matt

1

另一種可行的方法是使用一對UIViews作爲間隔符。我有時更喜歡這個來收容,但這可能是一個品味問題。

  1. 從您的UILabel中刪除前導約束。

  2. 刪除UIButton中的尾部約束。

  3. 在你的UILabel前添加一個背景清晰的UIView。使用常量0設置從此UIView到容器前沿的主要約束。使用常量0設置尾部約束到UILabel。

  4. 同樣,在您的UIButton之後添加另一個UIView。用常量0設置從此UIView到UIButton的引導約束。設置從此UIView到容器後端的尾隨約束,常量爲0.

  5. 這兩個UIViews都需要Y位置和高度。這些都有些武斷,所以我會設置與你的UILabel對齊中心Y約束,並說高度約束5.

  6. 這裏是魔術發生的地方:選擇兩個UIViews並設置一個等寬度約束。這迫使UIViews在雙方中佔據相等的空間。

+0

這就是我的教授最初教我們的方式,使用了spacer視圖。我認爲這是不好的做法(只是覺得奇怪的是有很多觀點只是填充),但這只是我做的一個假設。很高興知道這不是。 – Aaron

1

UIStackView對於這種情況是矯枉過正的。只是

  1. 把標籤和按鈕放在一個單一的UIView
  2. 將標籤的左側和中心Y限制到容器視圖。
  3. 將按鈕的右側和中心Y限制到容器視圖。
  4. 將標籤的右邊緣限制在按鈕的左邊緣。
  5. 設置含有視圖的水平內容擁抱優先〜1000
  6. 約束所述含視圖的中心X至上海華。
+0

這就是我最終做的事情(類似於Matt最初的建議,將對象嵌入容器視圖中)。謝謝您的幫助! :) – Aaron

0

您可以通過設置很少的約束來達到您現有的代碼。即使在iPad上,這也適用於所有的分辨率。您不需要對它們進行分組,我已附加了圖像以顯示我已應用的約束條件。

enter image description here

而且按鈕設置這個限制 enter image description here

這將正確地顯示在所有設備好心具有看看它是如何看的所有決議和也的風景模式每個分辨率

enter image description here

enter image description here

enter image description here

enter image description here

感謝

OMKAR