2015-01-14 31 views
6

我正在嘗試進入自動佈局業務,但我發現它很難。自動佈局 - 中心有5個按鈕

我想獲得5個圖像視圖在視圖的中心彼此相鄰顯示。他們需要調整自己的身高來擴大身高和身高。

這是它的外觀在IB(還挺運行應用程序時,它需要的樣子): IB Of views

所以我有以下限制:1

  • 新增長寬比:1,以便它們總是平方的
  • 第一個按鈕是「擁抱」視圖的左側,所以它會顯示在側面。
  • 以下4個按鈕與它們旁邊的按鈕之間有一個水平間距
  • 每個按鈕對屏幕的頂部和底部都有約束,所以如果調整屏幕大小,它們會變大。

然而,當我運行它,它看起來像這樣: Results

,我只是有點難倒這裏。我究竟做錯了什麼?

由於提前, 最好的問候 -/JBJ

**編輯** 我添加尾隨約束到最後一個按鈕。這確保了它們都在屏幕內,但在考慮它的大小時有點問題,所以也沒有解決它。 added trailing to last button

*編輯編輯* 試圖消除頂部和底部的約束,因爲他們是那些迫使大小了。爲他們全部添加了垂直中心約束。這也不起作用。顯示他們非常小(一字排開很好,但過小),並且還配備了警告: In IB

In simulator

+1

試圖固定拖約束爲最右邊的圖像視圖 – Dev

+0

我試過了,仍然無法正常工作。請參閱編輯結果 –

+0

刪除頂部和底部約束,並將它們垂直居中放置在視圖中。這是確定您的按鈕大小的頂部和底部限制。讓他們根據他們的水平安裝來確定其大小。 – vacawama

回答

22

OK,這裏去...

  1. 添加5個按鈕的觀點......沒有任何限制。

enter image description here

  • 添加所有這些之間的水平空間約束。還要將第一個和最後一個視圖的約束添加到超級視圖。我也將最後一個約束更改爲0(注意+306告訴我它現在不合適)。
  • enter image description here

  • 選擇所有的按鈕和(使用添加約束按鈕)enter image description here添加 「相等的寬度」 到他們。注意橙色虛線輪廓告訴我他們現在都會有相同的寬度。
  • enter image description here

  • 查閱與該按鈕的視圖的垂直中心對齊它們...
  • enter image description here

    enter image description here

    1. 最後要做的就是去到每一個,並添加1:1的長寬比。您需要添加約束,然後將其編輯爲1。

    enter image description here

    請確保您更新框架一旦你完成重新定位鍵上的新的約束......

    enter image description here

    預覽畫面顯示這方面的工作在所有不同的尺寸...

    enter image description here

    +0

    但是,如果我將它們放在另一個容器視圖中,它有什麼區別?爲什麼我不能只使用它們現在作爲容器視圖的視圖?約束應該是相同的?我相信我需要這個,因爲我需要讓它們在寬度和高度上都變化? –

    +0

    @ user3625855是的,你是對的,我只是自己想這個。忘記容器視圖。你需要有四件事。第一個按鈕被限制在左邊緣。最後一個按鈕限制在右邊緣。按鈕都具有相同的寬度。按鈕之間的空間受到限制。 – Fogmeister

    +0

    非常感謝您的幫助,但它仍然無法正常工作。顯然我錯過了一些東西。我有這些限制:限制爲左邊緣 最左邊的按鈕,所有的按鈕具有水平間隔限制 最右邊的按鈕受限於右邊緣 現在,它需要在一個約束Y座標爲好。我想我可以在他們所有人的頭頂上加個約束。 然後,我將縱橫比設置爲1:1以確保它們平方。 但是這不起作用?你可以舉個例子嗎?我不知道我錯過了什麼。 –

    2

    對於將它們放在屏幕的中心垂直使用

    NSLayoutConstraint *constraintHorizontal = [NSLayoutConstraint constraintWithItem:self 
                        attribute:NSLayoutAttributeCenterY 
                        relatedBy:NSLayoutRelationEqual 
                         toItem:self.superview 
                        attribute:attribute 
                        multiplier:1.0f 
                        constant:0.0f]; 
    

    放置水平方向 按鈕寬度=(屏幕寬度) - (按鈕間距尺寸) - (左側距離) - (右側距離)/ 5;

    相同的高度。 第一個圖像視圖的初始左約束將是左側距離。

    +0

    有點想找一種方法在IB中做,所以我可以得到它的竅門。 –

    0

    我總是在這種情況下做的只是簡單的思考。 我需要多少約束來100%定義設計?我應該寫些什麼來告訴電話中的人看起來像什麼?

    在你的情況下,這是下面的約束(希望我不會忘記一個)

    • 他們都是正方形(寬度相等的高度,而不是一個值)
    • 他們有相同的大小,只需將其設置爲等於,而不是一個值
    • 元件和邊緣之間的水平間距,其設置爲固定大小
    • 垂直居中
    +0

    沒關係,這是有道理的。只是不知道前2點: 所有的廣場,所以相等的寬度/高度,而不是一個值?這是縱橫比1:1的部分,對吧?所以我只是將第一個按鈕設置爲1:1寬高比,另一個則相等。 –

    +0

    @Fogmeister U想添加另一種觀點,這就是爲什麼我低估了你,但是你的回答是最好的,所以你得到了我的讚賞。 – Simon

    +1

    @Simon是的,我正在考慮一個不同的中心對齊(在兩個視圖之間居中)。無論如何,我在提交後意識到我錯了,這是我編輯的原因。 – Fogmeister

    0
    1. 放置5個按鈕垂直和水平方向中的UIView

    2. 中心選擇所有這些,它們嵌入在堆疊視圖

    3. 變化分佈均等地填充。

    4. 調整屬性檢查器中的間距以在按鈕之間留出空間。

    5. 將前導和尾隨空間和高度約束添加到堆棧視圖。也垂直對齊它。

    enter image description here