2017-02-23 55 views
0

我有一個幾乎完整的應用程序。我想使用自動佈局,但即使我已經搜索了很多關於此主題的內容,但我找不到可以使用的答案。我可以得到它顯示在一個屏幕尺寸正常,但沒有其他...這裏是我的問題如何在圖像上放置標籤和按鈕,以便即使縮放圖像,它們也位於圖像上的相同位置?

我把必要的約束如何做到這一點,即使計數器縮放爲不同尺寸的設備,標籤和該按鈕在圖像上的相同位置? (圖像是PNG圖像)

我真的很高興,如果你能回答或直接我展示瞭如何做類似的事情的答案。

這就是我想要 Demo Image

這是,如果我嘗試用自動佈局,在不同的屏幕尺寸做會發生什麼。

Demo Image 2

  • 這是不是我用我的應用程序相同的圖像,但它會給你一個想法)

再次感謝

編輯:

感謝您的解答,但正如評論中指出的那樣,第一個答案不能提供縮放不同屏幕尺寸圖片的方法。

第二個答案提供了一種方法,但我不明白的answer.I的第二部分需要多一點點的細節。如果有人能幫我解決這個問題,我會很高興。

我仍然有這個問題掙扎。如果我按照第二個答案Xcode說我需要X位置,第一個填充視圖的寬度和Y位置,第二個填充視圖的高度。我被卡在這一點。我不確定這些觀點有什麼價值。

+0

您確定您在圖片資源中使用正確縮放的圖片(1x,2x和3x)。我嘗試在圖片資源和自動佈局工作中放置正確大小的圖片。 –

+0

我有1x 2x和3x。我使用名爲Prepo的Mac應用程序來創建它們,但我不擅長自動佈局。你能告訴我你使用的約束嗎?我錯過了什麼嗎?謝謝 – TheTeacher33

+0

我已經添加了一個示例項目作爲答案 –

回答

0

由於圖像的大小將在不同的屏幕尺寸改變,你不能設置固定的限制。你需要的是比例約束。

  1. 設置你的UILabelUIButton有寬度和高度的比例分別爲UIImageView寬度和高度。

要做到這一點:點擊你UILabel

enter image description here

和Ctrl它拖到UIImageView,選擇相等寬度相等的高度enter image description here

假設你的UILabel的寬度爲100px,而你的UIImageView的寬度爲500px。編輯你剛纔設置的約束,並設置乘數爲100:500 enter image description here

這將確保在UIImageView寬度的任何修改,將相應影響UILabel寬度。對高度限制做同樣的事情。

UIButton重複相同的步驟。

  • 的頂部/底部/後/領先約束不能設置正比於UIImageView大小不幸的是,但可以有填料視圖 - 可以模仿佈局約束透明視圖。
  • 您將需要兩個填料觀點:一個頂級的約束: enter image description here

    (設置它的高度是成正比的UIImageView的高度)

    和一個領導約束

    enter image description here

    (設置其寬度與UI成正比ImageView width)

    如果不夠清楚,我可以爲你製作一個小視頻。

    +0

    感謝您的回答。我認爲我能夠遵循第一部分,但我無法理解第二部分。我們是否將觀點固定在任何地方?這是我在自動佈局中做的最複雜的事情,但我想我需要學習它。我真的很感謝視頻。 – TheTeacher33

    1

    你必須相對於圖像視圖添加約束。我用你的形象創建了一個小項目。這應該有助於你開始。

    https://1drv.ms/u/s!Aq8sK_MQLIL9gxMl-lBOMHkToudU

    +0

    請記住,在這種情況下,圖像視圖將每個設備具有相同的寬度和高度。它不會針對不同尺寸的設備進行縮放 – Vlad

    +0

    我玩過這個遊戲,但是@Vlad指出它不適合不同尺寸的屏幕。任何方式來實現這一目標? – TheTeacher33

    相關問題