2016-03-08 23 views
3

我已經瘋了這幾天,我已經嘗試了我所知道的迄今爲止關於自動佈局的一切,但無法超越這一點。我有一堆按鈕和一個標籤。標籤位於頂部,下方有5個按鈕。每個視圖都是一個矩形,其寬度爲超級視圖的任一端8個點。該標籤的高度爲134點,其下方的每個按鈕略小(儘管屏幕截圖顯示每個高度爲83,因爲我正在測試某些內容並忘記更改它(如果需要,可以重新發布圖像)高度)),最底部的按鈕高度爲65點。就這些。看起來像一個簡單,直接的設計嗎?那麼,在過去的兩週研究了自動佈局的基礎知識,並找到了'Ray Wenderlich'教程的幫助很大的幫助後,我嘗試了一切可以使其正確模擬的內容,但事實並非如此!餘設置的約束對於每個視圖,拖尾,領導,底部,頂部,高度,寬度一切爲正確,我可以捉摸但這會發生什麼:新自動佈局,意見不會顯示爲在IB中配置

在4S:在頂部的標籤時的細線

在6個加:標籤是遠大於它應該是

我有限的如何以及多少圖像,我可以張貼因爲我是一個新成員。

界面生成器:

IB SCREENSHOT

iPhone 4S:

4s SIMULATOR

+1

標籤本身是否有明確的高度限制? –

+0

除非需要,否則不要給出元素的高度/寬度限制。始終給出頂部,底部,前導,尾部並讓自動佈局決定該特定元素的寬度和高度。 –

+0

是的,它的134點。我通過控制拖動顯示彈出式菜單的標籤來設置它 – sharp

回答

0

在你的問題,請您談談恰恰多少分每個按鈕均是,但你沒有說明你是如何想它表現爲當設備不夠高時(例如在iPhone 4上)。

除了標準的領先/尾隨/頂部/底部約束之外,我可能會建議您考慮定義各種標籤/按鈕相對於彼此的高度。例如,請考慮以下限制:

NSLayoutConstraint.activateConstraints([ 
    // leading constraints 

    pinkLabel.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8), 
    button1.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8), 
    button2.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8), 
    button3.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8), 
    button4.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8), 

    // trailing constraints 

    view.trailingAnchor.constraintEqualToAnchor(pinkLabel.trailingAnchor, constant: 8), 
    view.trailingAnchor.constraintEqualToAnchor(button1.trailingAnchor, constant: 8), 
    view.trailingAnchor.constraintEqualToAnchor(button2.trailingAnchor, constant: 8), 
    view.trailingAnchor.constraintEqualToAnchor(button3.trailingAnchor, constant: 8), 
    view.trailingAnchor.constraintEqualToAnchor(button4.trailingAnchor, constant: 8), 

    // vertical spacing constraints 

    pinkLabel.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 20), 
    button1.topAnchor.constraintEqualToAnchor(pinkLabel.bottomAnchor, constant: 8), 
    button2.topAnchor.constraintEqualToAnchor(button1.bottomAnchor, constant: 8), 
    button3.topAnchor.constraintEqualToAnchor(button2.bottomAnchor, constant: 8), 
    button4.topAnchor.constraintEqualToAnchor(button3.bottomAnchor, constant: 8), 
    view.bottomAnchor.constraintEqualToAnchor(button4.bottomAnchor, constant: 83), 

    // now set relative height 

    pinkLabel.heightAnchor.constraintEqualToAnchor(button1.heightAnchor, multiplier: 1.5), 
    button2.heightAnchor.constraintEqualToAnchor(button1.heightAnchor), 
    button3.heightAnchor.constraintEqualToAnchor(button1.heightAnchor), 
    button4.heightAnchor.constraintEqualToAnchor(button1.heightAnchor) 
]) 

(順便說一句,我編程方式顯示這些,因爲它明確地闡明所有約束的最簡單的方法,但你可以在IB設置這些或在目標實現。-C,也實現它反正你想要的,但這些例子的限制)

,這將導致在三個不同的設備:

enter image description here

很明顯,你可以改變茨艾倫對任何你想要的東西都有限制,但是這說明了一種方法。底線,只需添加標準的前導/尾隨/頂部/底部約束,然後定義各種標籤/按鈕相對於彼此的高度。

在你的問題,你告訴我們,你做了什麼希望它看起來像較小的屏幕上,但從來沒有闡明什麼應該樣子。如果你澄清你希望它出現在不同大小的屏幕上,那麼我們可以進一步幫助。

+0

謝謝看起來我需要學習和理解乘法器是什麼以及如何使用它們來定義相對於彼此的視圖,我必須快速學習它!如果有任何教程可以推薦,我會很感激,我會看到我如何能夠自己。我會回來的.. – sharp

+0

我不知道任何教程(除了相關的WWDC視頻),但其基本思路很簡單:您可以將約束定義爲等於另一個約束(例如,button2是相同的高度作爲button1),另一個約束的倍數(例如標籤是button1高度的1.5倍),另一個約束加上一些常量(例如標籤的頂部是superview的頂部加20),或者你甚至可以做一個組合(例如,某個視圖的高度可以定義爲50 +兩倍於另一個視圖的高度)。如上所述,我只是將標籤定義爲按鈕高度的一半。 – Rob

+0

所以它就好像IB中的設計佈局不一定是它在設備屏幕上的樣子。它將在設備屏幕上顯示的方式由每個約束屬性的約束和設置來定義。所以更多的是關於在不同設備尺寸下運行時,每個元素與下一個元素的關係,而不是像單個尺寸屏幕一樣精確地放置/調整元素的大小。那麼編輯者左邊的「期望」列表實際上是指什麼? Xcode的意思是'expect'等y/x/height/width等等。 – sharp

0

嘗試把所有的標籤與固定高度垂直堆疊視圖與另一個垂直堆疊視圖,並把所有的按鈕在內部垂直堆棧視圖中,並設置Distribution: Fill Equally以及您選擇的間距。這將在所有手機上顯示最準確的信息。確保設置了外部堆棧視圖的約束。不需要設置任何約束條件的內部堆棧,一切都將落實到位。

0

設置按鈕底部的限制低優先級的像

enter image description here