这个效果主要用到了3个组件(对象):

1:Scrollbar对象  滚动条

2:Scroll Rect组件  让对象具有滑动效果

3:Mask组件  遮罩层。把多余的部分隐藏不显示

 

 

Scrollbar是滑动条的意思。在做界面的时候。滑动的效果是常见的。先来看看最终的效果

UGUI之Scrollbar使用

 

好了。我们一步一步里创建

 

首先有一个容器。我创建一个Image命名为Note。当然你也可以创建panel,

然后在里Note中在创建一个Image。这个Image命名为Bg是做背景颜色用的。

在Bg下创建一个Text也就是显示的文本了

UGUI之Scrollbar使用

 

这里Bg和Note的大小是一样的

在Text放文本。既然要滑动。肯定内容过多才需要滑动。这里有一点要注意。就是Text的大小要足够大。让文本全部显示出来

 

UGUI之Scrollbar使用

 

 

现在来让Bg具有滑动效果。在Bg上添加Scroll Rect组件。这样Bg就具有滑动的效果了。它有一个属性:Content。即需要滑动的内容。把Text拖拽到Content

UGUI之Scrollbar使用

 

这样Bg就具有滑动效果了。可以滑动了

UGUI之Scrollbar使用

 

你会发现。这不特别丑吗?没滑动的应该隐藏才对。没错。现在该Mask组件登场了,给Bg组件添加Mask

UGUI之Scrollbar使用

是不是比刚才好看了。上面说了Bg是背景用的。有白色。如果想不显示。就要去掉勾勾

UGUI之Scrollbar使用

 

看效果。这些根据你自己的需求弄就行了

 

UGUI之Scrollbar使用

 

有滑动效果还不行。 是不是还需要一个滑动条呢。添加Scrollbar对象

UGUI之Scrollbar使用

 

调节大小。如布局

UGUI之Scrollbar使用

 

来看看ScrollBar对象的重要的属性

UGUI之Scrollbar使用

 

设置Scroll Bar的方向。一把习惯性的是第三个。

如果你细心。你会发现。Scroll Rect 有这样一个属性

UGUI之Scrollbar使用

 

即是给容器指定一个滑动条。把刚刚的滑动条拖拽给它就可以了。动手试试吧。

 

相关文章:

  • 2022-02-22
  • 2021-05-31
  • 2021-05-08
  • 2022-12-23
  • 2021-11-14
  • 2022-12-23
  • 2021-05-12
  • 2021-12-07
猜你喜欢
  • 2022-12-23
  • 2021-10-19
  • 2021-06-09
  • 2021-06-15
  • 2022-12-23
  • 2021-06-17
  • 2021-09-07
相关资源
相似解决方案