Unity3D 使用UGUI ScrollRect制作动态相册

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
【阅读原文】