Unity UGUI带滚动条的文本框显示

1、 创建一个 image或者Panel都行,用来作为背景:添加Scroll Rect组件和Mask 2D组件

Scroll Rect组件:用来实现滚动列表的组件

Mask 2D:与Mask组件作用一样, 用来遮罩,使其只显示它的部分,不会显示超出它的部分(这里解释得不清楚,看一下后面效果就能懂,另外新版的2018版的Mask组件没有作用,这个没有研究,只有用Mask 2D才有效果)

Unity UGUI带滚动条的文本框显示_第1张图片

2、在该image下面创建两个子物体,一个Scroll Bar,一个Text:

3、设置Scrollbar的Direction为TopToButton,只滑动条从上往下计算。大小自己调,满意就行,一般锚点设置为right,毕竟滑动条一般在右边。

Unity UGUI带滚动条的文本框显示_第2张图片

PS:如果有人看不到滑动块,就看看size是不是变成1了,改小些就行了。

4、为Text添加ContentSizeFitter, 用来自适应文字的内容,设置垂直方向适应就行,锚点设置在左上角,否则它自动扩充宽度的时候不是从最上面开始扩的,可以试一下添加txt的内容来看一下效果(你能看到txt在变长,但是只能看到一部分内容,这就是上面mask 2d的作用)。

Unity UGUI带滚动条的文本框显示_第3张图片

Unity UGUI带滚动条的文本框显示_第4张图片

5、准备就绪,剩下就是 把这两个绑定到Scroll Rect里面了:绑在vertical上面是由于我们是垂直的滚动条,举一反三,水平的就绑在horizontal上面就行了,Movement Type是指你划屏时允许怎么划,你设置成clamped就可以限制它不能左右划,至于左右划有什么效果你可以试一下。

Unity UGUI带滚动条的文本框显示_第5张图片

PS:如果想要它自动在内容不够的情况下自动隐藏滚动条,只需要将Visibility改为Auto Hide就行:

Unity UGUI带滚动条的文本框显示_第6张图片

给个效果图:

Unity UGUI带滚动条的文本框显示_第7张图片

PS:如果出现拖动不了滚动条,看一下自己是不是把把text放在了Scrollbar上面,因为Text是匹配整个父物体的,所以如果层级错了你是点不到滚动条的。

你可能感兴趣的:(学习理解)