UGUI-Unity滚动文本设计

目录

前言

一、设计步骤

1.在Hierarchy窗口右键UI，创建Image

 2.在NoteBG下创建Text文本框，并添加文字内容

 3.在NoteBG下创建新的Image

 4.在TextBG上添加Unity自带的脚本Scroll Rect和Mask

5.在NoteBG下添加滚轮Scrollbar

6.将Scrollbar组件挂载到TextBG组件中Scroll Rect脚本的Vertiacl Scrollbar属性

滑动文本框就实现啦！

---

前言

滑动文本框是UI设计中常见的一种，在各类型的游戏中都有所涉及。本文介绍了如何在Unity中设计简单的滑动文本框。

---

一、设计步骤

1.在Hierarchy窗口右键UI，创建Image

Image作为滑动文本框的背景图层，方便起见命名为NoteBG

 2.在NoteBG下创建Text文本框，并添加文字内容

在创建的Text文本框，调整合适的宽度和高度（高度可以超出NoteBG，要把文字完全显示，不然会因为文本框过小导致文字缺失）。在文本框中加入文字，调整到所需要的大小。

 3.在NoteBG下创建新的Image

将新的Image取名为TextBG，作为文本框的背景层。宽度最好等于文本框（后续可以进行调整），将Text拖进TextBG

 此时的场景：

 4.在TextBG上添加Unity自带的脚本Scroll Rect和Mask

Scroll Rect脚本控制指定的组件拖动

设置一下参数：

 取消Horizontal的勾选，因为我们只需要上下移动。

此时会发现拖动的文本会超出NoteBG，非常的不美观。所以我们在TextBG上添加Mask脚本，该脚本可以截取超出的部分。

5.在NoteBG下添加滚轮Scrollbar

将Scrollbar组件放到合适的位置即可（我放到了Text文本的右侧）。找到Scrollbar的属性面板中的Direction属性，将其更改为Bottom to Top。

6.将Scrollbar组件挂载到TextBG组件中Scroll Rect脚本的Vertiacl Scrollbar属性

 该属性的功能就是将文本与滚轮建立关联。

---

滑动文本框就实现啦！