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

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

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

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

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

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

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

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

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

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

给个效果图:

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

  • 16
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值