Unity_UGUI_实现上下拖动展示文字

1.首先在 场景中创建一个 image作为 主背景

Unity_UGUI_实现上下拖动展示文字_第1张图片

2.点击刚刚创建 主背景 把背景的颜色 修改成半透明的 

Unity_UGUI_实现上下拖动展示文字_第2张图片

3.在 主背景 Bg_img 下创建一个 Image命名为-->Title_img  并且将其背景色 修改成你想要的效果

Unity_UGUI_实现上下拖动展示文字_第3张图片

4.在 Title_img 下面创建 一个 Text 修改如下 属性

Unity_UGUI_实现上下拖动展示文字_第4张图片

Title_img 和 Text 的宽高 修改成一样

Unity_UGUI_实现上下拖动展示文字_第5张图片

5.在 Bg_img 下面创建 一个Image 命名为 Scroll_img 并修改其 大小和位置

6.在 Scoll_img 下创建Text 随便填写 一段文字 上百度 复制就可以

  注意⚠️ 这里 需要将 Text 的高修改成 足够显示完 全部文字的高度 不然没效果

Unity_UGUI_实现上下拖动展示文字_第6张图片

7.这一步 很关键 在Scroll_img 上添加两个组件 Scroll Rect 和 Mask

  Scroll Rect 组件是让Scroll_img实现上下拖动效果

  Mask组件是让Scroll_img 隐藏超出的文字

  点击 Scroll_img 

  把Scroll_img 下的Text 拖拽到 Scroll_img 的 Scroll Rect 组件的 Content属性上

 把Scoll Rect 上的 Horizontal(水平) 属性的沟去掉 不让文字左右 水平拖动 只让文字上下拖动

把 Scroll_img 上的Mask组件 上的 Show Mask Graphic 属性的 沟去掉 让Scroll_img 的背景消失

Unity_UGUI_实现上下拖动展示文字_第7张图片

最终效果如下:

Unity_UGUI_实现上下拖动展示文字_第8张图片

 

添加一个功能 结合Scrollbar滚动条  实现上下拖动

1.在 Bg_img创建一个 Scrollbar

2.修改 Scrollbar 的Direction(方向)  --> Bottom to Top    

Unity_UGUI_实现上下拖动展示文字_第9张图片

3.把 Scrollbar 拖拽到 Scroll_img 的 Vertical Scrollbar 上

Unity_UGUI_实现上下拖动展示文字_第10张图片

加了 Scrollbar 的最终效果如下 ?

Unity_UGUI_实现上下拖动展示文字_第11张图片

 

搞完收工?

你可能感兴趣的:(Unity_UGUI)