UGUI學習筆記之Slider元件
一、初始Slider介紹
1.作用:滑塊/進度條
2.顯示效果:
3.object結構
二、Slider結構詳解
總:slider主要由三部分組成:背景區(Background),填充區(Fill Area),滑塊區(Handle Slide Area)
1.背景就是一個簡單的image
2.填充區由Fill Area和Fill兩個物體組成
(1)Fill Area只包含一個Rect Transform元件,表示填充長度
(2)Fill是一個image(Image Type設為sliced),作為填充圖片
為了方便觀察和理解,我給Fill Area添加了一個image元件,並設定為了黃色。並將Fill放在了Fill Area的下方。
狀態 | 圖示 | 說明 |
value=0% |
使用時,應當把Fill的中心對準Fill Area的邊緣(如左圖所示),這樣當把滑塊拉到最後(value=100%)時,左右多出的部分才是對稱的(如下圖)。 | |
value=100% |
3.滑塊區也由兩部分組成:
(1)Handle Slide Area只包含一個Rect Transform元件,表示滑塊滑動的區域
(2)Handle 是滑塊,即滑鼠點選並移動的按鈕。
同樣,為了方便觀察和理解,我給Handle Slide Area添加了一個image元件並設為綠色。
狀態 | 圖示 | 說明 |
value=0% |
使用時,應當把Handle的中心對準Handle Slide Area的邊緣(如左圖所示),這樣當把滑塊拉到最後(value=100%)時,Handle相對於Handle Slide Area的位置與value=0%時才是對稱的(如下圖)。 |
|
value=100% |
Handle的中心依然在Handle Slide Area的邊緣上。 |
4.效果演示
上例演示 | |
把新增的兩個image去掉,並調整一下各部分比例後的效果。 中間灰色的矩形是Background (Fill Area和Background的寬度比較) |
|
如果想只在Background框內填充,那麼Fill Area應當比Backgound短一點。如果Fill Area和Background一樣長,那麼就會出現填充內容超出填充框外的效果。如果Fill Area比Background更長,就會更加明顯。當然,需要什麼要的效果需要根據實際而定。 |
三、Slider元件屬性介紹(除了Slider之外,還有Image元件。Slider元件前面屬性和Button元件一樣,就不贅述了)
屬性 | 含義 |
Fill Rect | 代表填充圖片,即slider結構中的Fill。其父物體代表Fill Area |
Handle Rect | 代表滑塊圖片,即Slider結構中的Handle。其父物體代表Handle Slide Area |
Direction |
Left To Right:從左滑到右 Right To Left:從右滑到左 Bottom To Top:從下滑到上 Top To Bottom:從上滑到下 |
Min Value | 最小值,滑塊在起始點代表的值 |
Max Value | 最大值,滑塊到終點代表的值 |
Whole Numbers | 是否只能取整數 |
Value | 當前的值。介於Min Value 和 Max Value之間。 |
四、事件
On Value Changed事件在slider的值發生改變時就會呼叫。此事件可以繫結引數為float的函式,在slider值發生改變時,會自動的呼叫繫結的函式且把slider的值作為引數傳入函式。
1.例一
(1)建立一個C#指令碼,並新增下面的函式。並把此指令碼掛在Slider物體上(可以掛在場景中任何物體上)。
public void SliderTest(float f) { Debug.Log("slider當前的值為:"+f); }
(2)點選+好,繫結新函式。把Slider物體(指令碼所在物體)拖拽到“None(Object)”上並選擇剛才編寫的函式。
這裡需要注意的是:在選擇函式的時候,會看到兩個一樣的函式名,但是分別處於Dynamic bool和 Static Parameters標籤下(如下圖)。我們應當選擇處於Dynamic bool下的 TSliderTest函式,這樣在執行的時候,slider的值才會自動傳入函式。
(3)點選執行,滑鼠滑動slider,就可以看到控制檯的輸出了。
作者:一白夢人 出處:https://www.cnblogs.com/ybmr/p/ugui_slider.html 版權:本文版權歸作者和部落格園共有 轉載:歡迎轉載,但未經作者同意,必須保留此段宣告;必須在文章中給出原文連線;否則必究法律責任 |