uGUI練習(五) ScrollView

標籤：style   blog   http   color   ar   for   2014   sp   log   

一、相關組件

• 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 效果

uGUI練習(五) ScrollView