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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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