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

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

• 在檢視窗口中為“Scroll Panel”對象添加ScrollRect組件，取消勾選“Vertical”復(fù)選框。本示例僅需水平方向滾動
• 將“Content Panel”對象拖拽至ScrollRect組件的Content字段，即滾動區(qū)域?qū)⒁苿拥膬?nèi)容，這里就是內(nèi)容面板
• 將Movement Type設(shè)為“Clamped”

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

現(xiàn)在點(diǎn)擊運(yùn)行，即可在滾動區(qū)域內(nèi)左右拖動。

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

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

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

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

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

最后的CreateImages方法遍歷所有紋理，創(chuàng)建新游戲?qū)ο蟛⑵涓笇ο笤O(shè)為“Content Panel”，為其添加Image組件，用紋理新建Sprite賦值給Image的Sprite屬性。

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

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

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

然后為“Content Panel”對象添加ContentSizeFitter組件，將Horizontal Fit設(shè)為“Preferred Size”，讓其根據(jù)圖片加載數(shù)量自動調(diào)整內(nèi)容區(qū)域大小，以避免出現(xiàn)無法滾動的情況。

運(yùn)行測試，最終效果如下：

本文為大家介紹了運(yùn)行時加載圖片以及自動設(shè)置滾動區(qū)域大小的基本概念，整個過程非常簡單，實(shí)際項(xiàng)目中的使用情況可能會更加復(fù)雜，例如可能會將圖片保存為預(yù)制件而非通過代碼創(chuàng)建新的游戲?qū)ο螅褂妙A(yù)制件可以設(shè)置圖片大小與樣式，甚至加入一些交互。又或是加入一些加載進(jìn)度的提示，使用對象池等方式來提高性能等等，大家可以在此項(xiàng)目的基礎(chǔ)上繼續(xù)添加這些功能。

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