UGUI 中的ScrollRect組件可用于在Unity中創建可滾動UI，簡單易用，直接從UI菜單創建滾動視圖即可自動設置所有內容。今天這篇文章，將為大家介紹該組件不太常見的用法，來實現可滾動的動態相冊，可以運行時從本地或網絡服務器獲取圖片資源。

• 首先新建場景并添加Canvas，在Canvas下新建Panel命名為“Scroll Panel”,在“Scroll Panel”下新建Panel命名為“Content Panel”

• 在檢視窗口中為“Scroll Panel”對象添加ScrollRect組件，取消勾選“Vertical”復選框。本示例僅需水平方向滾動
• 將“Content Panel”對象拖拽至ScrollRect組件的Content字段，即滾動區域將要移動的內容，這里就是內容面板
• 將Movement Type設為“Clamped”

在動態添加圖片前，先測試滾動區域的基本形式。重新設置“Scroll Panel”的大小，以免滾動區域占滿整個屏幕。然后重新設置“Content Panel”的大小，讓其稍微偏出滾動區域右側，如下圖所示（Unity小技巧：鼠標懸停在場景視圖時按T鍵可快速切換至調整大小的模式）：

現在點擊運行，即可在滾動區域內左右拖動。

下面通過腳本在運行時加載圖片，添加ImageLoader腳本，代碼如下：

腳本聲明了兩個序列化字段以便在Unity編輯器中修改。第一個變量指定從本地加載圖片的目錄，第二個設置“Content Panel”對象的引用。

在Start方法中，首先設置應用為可以在后臺運行，如果不啟用，加載圖片的過程可能耗時較長。如果加載過程中切換到其它界面，會暫停游戲加載。然后調用LoadImages協程函數，該函數先新建圖片列表，然后使用DirectoryInfo類獲取指定路徑下所有后綴名為.jpg的圖片文件。如果您想查找其它格式的圖片，可以替換該后綴名。

遍歷所有查找到的圖片文件，輸出文件名稱便于調試，再調用另一協程函數用于加載圖片，該函數有兩個參數，第一個是圖片名稱，第二個是AddLoadedTextureToCollection方法的引用，用于通知加載函數在加載完成后需要進行的操作。也可以在加載函數中添加代碼用于加載圖片，但實際項目中加載函數可能位于單獨的類中，在這里加載紋理就不太合適。

LoadTextureAsync函數就用于加載圖片，在加載圖片前先要修正文件名，如果加載本地文件，需要加上file://前綴，如果從網絡加載則是HTTP地址。添加代碼將“\”替換為“/”，以保證目錄路徑正確。然后使用WWW類來加載文件，新建空紋理，使用LoadImageIntoTexture函數從WWW請求中獲取紋理。注意，這里使用WWW類加載的依舊是本地文件。最后調用參數中的result函數，本例中該函數用于將紋理添加到圖片列表中，您可以根據項目實際需求進行更改。

最后的CreateImages方法遍歷所有紋理，創建新游戲對象并將其父對象設為“Content Panel”，為其添加Image組件，用紋理新建Sprite賦值給Image的Sprite屬性。

選中“Scroll Panel”對象后為其添加ImageLoader組件，在檢視窗口中指定圖片文件夾，并確保文件夾中存在.jpg圖片。然后將Content字段設為“Content Panel”對象。

為“Scroll Panel”對象添加Mask組件，取消勾選“Show Mask Graphics”，這樣就不會顯示遮罩圖片。Image組件將作為滾動區域的遮罩。

選中“Content Panel”對象，先為其添加“Horizontal Layout Group”組件用于自動水平布局所有圖片。將Spacing設為5，Child Alignment設為“Middle Center”。

然后為“Content Panel”對象添加ContentSizeFitter組件，將Horizontal Fit設為“Preferred Size”，讓其根據圖片加載數量自動調整內容區域大小，以避免出現無法滾動的情況。

運行測試，最終效果如下：

本文為大家介紹了運行時加載圖片以及自動設置滾動區域大小的基本概念，整個過程非常簡單，實際項目中的使用情況可能會更加復雜，例如可能會將圖片保存為預制件而非通過代碼創建新的游戲對象，使用預制件可以設置圖片大小與樣式，甚至加入一些交互。又或是加入一些加載進度的提示，使用對象池等方式來提高性能等等，大家可以在此項目的基礎上繼續添加這些功能。

本文來源于：unity3d.college
原作者：Jason Weimann
Demo鏈接: https://pan.baidu.com/s/1nvbtjhZ 密碼: qnhb
【閱讀原文】