《学Unity的猫》——第十七集：Unity的UGUI布局，皮皮猫的简历

最新推荐文章于 2022-01-19 21:46:16 发布

林新发

最新推荐文章于 2022-01-19 21:46:16 发布

阅读量1.3k

点赞数 4

分类专栏： Unity3D 文章标签：学Unity的猫 Unity UGUI 布局 Layout

本文链接：https://blog.csdn.net/linxinfa/article/details/111662726

版权

480 篇文章 2110 订阅

订阅专栏

简介：我是一名Unity游戏开发工程师，皮皮是我养的猫，会讲人话，它接到了喵星的特殊任务：学习编程，学习Unity游戏开发。
于是，发生了一系列有趣的故事。
在这里插入图片描述

我：“是时候给你找一份工作了。”
皮皮：“打工猫打工魂，勤勤恳恳不贫困。”
我：“以你的才能，不出去闯一闯太可惜了，来，我已经帮你做了一份简历。”
在这里插入图片描述
皮皮：“看起来可以，投哪里？”
我：“就先投我们公司吧，试试看。”

本工程Demo已上传到GitHub，感兴趣的同学可以下载下来学习。
GitHub工程地址：https://github.com/linxinfa/UnityResumeDemo
在这里插入图片描述

在Hierarchy窗口中右键菜单UI -> Scroll View，创建滚动视图。
在这里插入图片描述
如下

我们不想显示横竖拖拉条，可以将其删掉，如下，选中Scrollbar Horizontal和Scrollbar Vertical，然后按Delete将其删除。
在这里插入图片描述
如下

点击Scroll View节点，将Rect Transform的锚点为stretch - stretch模式。
在这里插入图片描述
设置Top和Bottom为0，Left和Right为34。

效果如下

修改Scroll View底图为纯灰白色
在这里插入图片描述
效果如下

我们只需要纵向拖拉，所以将横向拖拉取消掉。
将Scroll View节点中的Scroll Rect组件的Horizontal勾选去掉。
在这里插入图片描述

由于我们删除了横竖拖拉条，但是裁剪区（Viewport）是预留了拖拉条的宽度的，如下，Right和Bottom留了17个单位的宽度。
在这里插入图片描述

将Right和Bottom改为0。

这样裁剪区就铺满整个Scroll View了。

在Content节点下创建一个空节点，重命名为vertical。
在这里插入图片描述
添加横向布局组件Vertical Layout Group。

设置vertical节点的锚点为Left - Top，将宽高设为0。

如下

在vertical节点下创建Image作为item。
在这里插入图片描述
调节宽度，如下

复制N个Image。

调节vertical节点的Vertical Layout Group的Spacing为2，这样每个Image之间有2个点位的间隔。

如下

根据需要调节每个item的高度。
在这里插入图片描述
如下

在这里插入图片描述

最后将Scroll View底图改为纯白色，完成。
在这里插入图片描述
如果有什么疑问，欢迎留言或私信。

关注

专栏目录