2017-04-18 62 views
0

我想實現的是有兩個容器視圖,裏面有兩個標籤。此標籤是動態設置的,代表百分比或美元金額。我也有他們之間的圖像視圖。我想實現的是「容器視圖 - 圖像 - 容器視圖」。我遇到的問題如下所示:可以說左邊的容器有一個百分比值(從0-100),右邊的容器視圖有一個美元數量(可能高達數百萬)。我想要做的是爲標籤動態調整大小並儘可能減少空間。以下是圖像夫婦有一個更好的理解:UIStackView裏面的動態視圖

This is the problem I am experiencing: percent is a single digit and takes small amount of space, while dollar amount is too long and is either cut off completely of scree, or trunkating

我使用的堆棧視圖空間中的三個觀點。這是否是解決問題的正確方法?

Storyboard

編輯:這是最終的結果,我想實現:

end result

+0

你想的箭頭圖像水平居中?或者在圖像上限中顯示「$ 4 ...」標籤? – DonMag

+0

@DonMag理想情況下,我希望它在兩個容器之間有相等的距離(介意右邊的一個可以是左邊的兩倍) –

+0

hmmm ...好吧,您使用Containers是因爲每個標籤都是不同的視圖控制器?或者,你可以簡單地使用兩個UILabels和一個UIImageView嗎? – DonMag

回答

2

你可以用堆棧視圖來做到這一點。這裏有您需要做什麼:

  1. 設置圖像視圖的內容擁抱和抗壓性優先級低的數字,如100。這將讓攝像畫面拉伸,以填補額外的空間,或收縮以留下更多數字的空間。

  2. 在圖像視圖中設置最小寬度限制,以便在數字非常大時不縮小爲無。通過在圖像視圖上創建寬度約束,然後將其編輯爲而不是=

    你的圖像視圖的約束應該結束了這樣的:

    image view constraints

  3. 設置你的形象以「看點飛度」的內容模式。這將使它縮小或放大箭頭圖像根據需要以適應可用的空間,而不會干擾它:

    arrow content mode

  4. 爲標籤,設置自動收縮到「最小字體縮放」以0.5的值,打開「擰緊字母間距」。這使得標籤來調整,如果沒有足夠的房間全尺寸,以適應一切:

    label settings

結果:

demo screen shot

+0

謝謝,如果我使用UILabels(如你所建議的),這個工作。但是如果我想在箭頭的每一邊都有UIView(裏面有兩個/三個標籤)呢? –

+0

如果你根據裏面的標籤限制每個'UIView'的大小,那麼它應該可以正常工作。 –

+0

感謝羅布,我實際上使用你的答案和歸因字符串來實現我想要的結果。非常感激 –

0

選擇StackView並打開屬性檢查改變分佈按比例填充 。我也會測試非常大的數字,看看它是如何影響你的StackView的外觀,但如果我理解正確,這應該工作。