UGUI之Scrollbar使用


這個效果主要用到了3個組件(對象):

1:Scrollbar對象  滾動條

2:Scroll Rect組件  讓對象具有滑動效果

3:Mask組件  遮罩層。把多余的部分隱藏不顯示

 

 

Scrollbar是滑動條的意思。在做界面的時候。滑動的效果是常見的。先來看看最終的效果

 

好了。我們一步一步里創建

 

首先有一個容器。我創建一個Image命名為Note。當然你也可以創建panel,

然后在里Note中在創建一個Image。這個Image命名為Bg是做背景顏色用的。

在Bg下創建一個Text也就是顯示的文本了

 

這里Bg和Note的大小是一樣的

在Text放文本。既然要滑動。肯定內容過多才需要滑動。這里有一點要注意。就是Text的大小要足夠大。讓文本全部顯示出來

 

 

 

現在來讓Bg具有滑動效果。在Bg上添加Scroll Rect組件。這樣Bg就具有滑動的效果了。它有一個屬性:Content。即需要滑動的內容。把Text拖拽到Content

 

這樣Bg就具有滑動效果了。可以滑動了

 

你會發現。這不特別丑嗎?沒滑動的應該隱藏才對。沒錯。現在該Mask組件登場了,給Bg組件添加Mask

是不是比剛才好看了。上面說了Bg是背景用的。有白色。如果想不顯示。就要去掉勾勾

 

看效果。這些根據你自己的需求弄就行了

 

 

有滑動效果還不行。 是不是還需要一個滑動條呢。添加Scrollbar對象

 

調節大小。如布局

 

來看看ScrollBar對象的重要的屬性

 

設置Scroll Bar的方向。一把習慣性的是第三個。

如果你細心。你會發現。Scroll Rect 有這樣一個屬性

 

即是給容器指定一個滑動條。把剛剛的滑動條拖拽給它就可以了。動手試試吧。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM