UGUI之ScrollRect

• 2019 年 12 月 2 日
• 筆記

一、相關組件

• ScrollRect
• Mask
• Grid Layout Group
• Scrollbar

二、步驟

1、創建一個Panel,命名為ScrollRect，添加 ScrollRect組件

2、在ScrollRect下創建一個子Panel,命名為Grid，添加Grid Layout Group 組件

3、在Grid下，創建一個Image，按Ctrl+D ，Copy出多個Image

4、在Scene視圖，可以看到Image的排列(注意：排列成了兩行)

5、讓Grid下的Image排列成一行；做法：拉伸Grid的長度，讓它變長

6、在Game視圖，看到Image已經超出了Scroll Rect

7、給Scroll Rect添加Mask組件

8、添加完Mask組件之後，Image就不再超出了，但此時仍然不能Drag它

9、設置參數

10、設置完參數之後，就能Drag了

2.2 添加Scrollbar

11、創建一個Panel，命名HScrollbar，添加 Scrollbar 組件

12、在HScrollbar下 創建一個空的GameObject，命名Stretch ，添加 Rect Transform組件，設置Stretch為All

13、在Stretch 下 創建一個Image，命名 Handler

14、為HScrollbar設置好Handler參數

15、同時為Scrollbar設置Horizontal Scrollbar

三、Scroll View 效果

四、補充

本周(2014年11月的最後一周)，Unity4.6正式版發布了，我在新版本里用上面同樣的步驟試用了ScrollView是可行的，但也發現有幾個地方可能會讓初學者迷惑，這裡指出。

步驟1：

默認創建一個Panel是Stretch的，沒有Width和Height,也就是它會撐滿全螢幕幕

我們可以手工縮放它的大小成我們需要的，但此時它具有Anchor 特性，就是會根據螢幕來拉伸

所以建議，把panel的布局方式改一下，這裡我選擇的是Middle – Center,這樣就可以控制Panel的大小為絕對值了

步驟2：

有可能你創建出來的Scroll，滑動不了內容。表現為：明明Grid下有很多Image，但它就是只能滑動那麼一點點。(—!gif工具突然不能錄製了！)

這是因為你的Grid的寬度不夠！如所下圖

我知道有兩個方法：

方法1、給Grid選擇固定列數，比如我有10個child，我就填10,填完之後，Grid Rect的寬度會自動幫你計算出來

方法2、自己計算，比如Grid下有10個Image，每個100×100,它們之前的spacing是x:10,y:10，那麼我可以這樣填

總之就是要把Grid下所有的Item都在同一直線上

步驟2.2

我在4.6正式版中，發現可以直接創建一個Scrollbar，就不需要手工的配置了，比較方便。

附註：

有同學發現在unity5.0 beta下UI的mask組件有bug[表現為:給panel添加mask後,chid組件全部不可見，可能是mask把它們alpha設置成0了]

同樣的，還有同學在做背包時，發現click事件很容易被當作scroll事件，所以建議大家在做UI時，更新到4.6的正式版。