NGUI官網樣本9 – QuestLog(可展開元件)

NGUI官網樣本9 – QuestLog
這個樣本展示的是可伸縮的介面，點擊沒一個Quest，可以把裡面的內容展開。：

描述:請輸入描述

圖片:1.png

首先先製作出基本的介面，這裡就不再贅述（可以參考我上面的系列教程），在這裡提一下，在製作背景時，可以使用Create a Widget建立出一個SimpleTexture，貼上合適的材質之後，不要縮放和移動它，為它添加一個Stretch組件（Component->NGUI->UI -> Stretch），該組件可以根據視窗的大小自動調整尺寸。注意該層級結構，最終效果

描述:請輸入描述

圖片:2.png

接下來就是這個樣本的重頭戲了。選擇Quest Log，並為其建立一個新的Panel（NGUI->Create a panel），並命名為SubPanel，

描述:請輸入描述

圖片:3.png

選擇SubPanel，建立一個空的遊戲對象，作為它的子物體，並命名為Table。該對象將來用於排列它的所有子物件的位置，現在暫時不管。

描述:請輸入描述

圖片:4.png

選擇Table對象，建立一個空的遊戲對象，作為它的子物體，並命名為Quest1，reset一下。

描述:請輸入描述

圖片:5.png

選擇Quest1，為其添加一個Lable和一個SlicedSprite，最終效果

描述:請輸入描述

圖片:6.png

選擇Quest1，建立一個空的遊戲對象，並命名為Tween，成為它的子物件，reset一下，並在Tween下建立一個Label，並輸入文字描述，最終效果

描述:請輸入描述

圖片:7.png

首先先把Tween對象的Enable關掉，再使用同樣的方式再製作出三個這樣的Quest出來，我這裡偷懶，直接使用Ctrl+D複製出2個來，並命名為Quest2和Quest3。不用去管它的位置，

描述:請輸入描述

圖片:8.png

選擇Table對象，為其添加一個Table組件（Component->NGUI->Interaction->Table），並設定Colomn參數為1，Direction為Down，Padding的Y為4，Sorted、Hide Inactive和Keep Within Panel勾選上，點擊播放之後，其子物體就會自動地排列了，神奇！（大家從英文上應該能看出這些參數的意思吧，這裡不贅述了）。

描述:請輸入描述

圖片:9.png

接下來實現點擊這些Quest時，會自動延伸其下面的說明。選擇Quest1下面的Tween對象，為其添加一個TweenScale組件（Component->NGUI->Tween->Scale），並設定其參數

描述:請輸入描述

圖片:10.png

選擇Quest1下面的SlicedSprite，為其添加一個Trigger組件（NGUI->Attach a collider）用來接收輸入事件，接著為其添加一個Button Tween組件（Component-> NGUI->Interaction->Button Tween）這個組件很熟悉吧，對其他的幾個Quest進行類似的操作，點擊播放，滑鼠放在Quest上點擊，ok，實現了！其參數如下

描述:請輸入描述

圖片:11.png

如果你三個Quest同時展開，會發現，此時內容都漏出來了，呵呵，霸氣外漏！我們來解決這個問題。選擇SubPanel，設定其Panel組件中的Clipping為SoftClip，並設定它的size中x為420，Y為290，softness為X為1，Y為8，然後點擊再播放，哈，內容在這個設定的範圍內了。

描述:請輸入描述

圖片:12.png

問題又來了，我想看下面的內容呢。那麼我們可以給他添加一個ScrollBar捲軸。在Quest Log下建立一個垂直ScrollBar元件，我們現在想當內容超出panel時scollBar才顯示出來，我們設定其Alpha為0，最後參數

描述:請輸入描述

圖片:13.png

現在來串連SubPanel和ScrollBar。選擇SubPanel，為其添加一個DraggablePanel組件（Component-> NGUI->Interaction->DraggablePanel）。然後把ScrollBar對象賦值給VerticalScrollBar，

描述:請輸入描述

圖片:14.png

OK，其拖動功能就搞定了！

這個樣本當中還有一個拖動視窗的效果，這裡效果在以前的教程中已經講過。