1. 程式人生 > 實用技巧 >UGUI學習筆記之Slider元件

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

版權:本文版權歸作者和部落格園共有

轉載:歡迎轉載,但未經作者同意,必須保留此段宣告;必須在文章中給出原文連線;否則必究法律責任