UGUI 字型背景尺寸自適應

2021-08-10 13:10:15 字數 1363 閱讀 8448

在ugui裡,我們有時需要做類似對話方塊這種東西,還需要對話方塊可以隨著裡面文字多少,行數的變化,進行拉伸變化。

我第一時間想到的解決方案是自己計算對話的char長度,然後動態的去修改背景圖的尺寸,這種方法乍看之下沒有任何問題,但是在實際應用中,發現有致命的缺陷。

那就是當對話的文字可能是多語言的時候,媽賣批呀,不同的語言下乙個字元的尺寸都是不同,更何況有的字型可能還有別的什麼特殊設定。

所以這時我們單純的靠字元數算尺寸的方法,看起來就是漏洞百出的了。

這時又人可能會說,那我自己根據語言,字型來設定不同的尺寸呢?這種方法不是不行,但是大兄弟,這樣會增加很多任務作量不說,後期每增加一種語言,你就得維護一次呀,那我們為什麼要把自己搞的這麼累呢?找乙個一勞永逸的手段不是美滋滋嗎?

幸好unity為我們提供了相應的元件,來解決這一需求。

下面我們來說說具體要怎麼實現:

首先字型為子物體,背景為父物體是一定的。有些人肯定想到了背景當文字的子物體,然後去下錨點的方法,那樣是解決了尺寸變化,但是把文字擋住了呀,無解!所以這個方法是否定的。

那麼我們把text當子物體,當父,想使的尺寸會伸縮變化,就要新增元件 content size fitter 和 horizontal layout group。

如圖:

然後我們設定 content size fitter 的 horizontal fit , vertical fit 為preferred size。

它們是 ui.contentsizefitter.fitmode的 列舉型別,分別是

unconstrained:不執行任何調整

minsize:調整內容的最小大小

preferredsize:調整內容的首選大小,也就是會自動根據內容來調整大小

設定 horizontal layout group 的 control child size 的 width, height 為 true,這個就很好理解的,讓子物體來控制尺寸。

這樣我們就完工了,背景會隨著我們 text 中的內容去變換尺寸,進行拉伸。

但是還剩下4個邊要怎麼辦呢?這裡我選擇了這樣做。

將layout_dialog的尺寸賦值給img_bg_middle,然後上下左右都去錨那個middle!

這樣,我們的自適應對話方塊就徹底大功告成了。

背景自適應

一張清晰漂亮的背景能給網頁加分不少,設計師也經常會給頁面的背景使用大圖,我們既不想因為不同解析度變形,也不希望當在大屏的情況下,背景有一塊露白,簡而言之,就是實現能自適應螢幕大小又不會變形的背景大圖,而且背景不會隨著滾動條滾動而滾動。用css實現真的很簡單很簡單,下面我們來看一下第一種方法具體的 你...

css介面尺寸的自適應 尺寸單位

然而,是乙個很好用的尺寸單位,它會相對螢幕的尺寸變化而做同比例的伸縮變化。1.從根容器開始,你就要設定它的長寬百分比,一層一層的指定。如果父元素長寬百分比未指定,並且裡面沒有內容,那麼子元素的長寬百分比是無效的,有可能坍縮為0。從而無法看見。2.子元素的長寬百分比是相對于父元素的長寬百分比做相應的變...

wpf MVVM介面自適應 介面自適應及字型自適應

原文 wpf mvvm介面自適應 介面自適應及字型自適應 1,介面自適應 介面先劃分region,每個填充region的view不設定width屬性,即可按照region劃分的比例,自適應螢幕解析度 2.字型自適應 程式根據螢幕解析度分別計算4種字型大小,從大到下為 titlefontsize ta...