Unity UGUI 滚动列表

这篇具有很好参考价值的文章主要介绍了Unity UGUI 滚动列表。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果:

unity 滚动列表,Unity,unity

当前用的 Unity 版本为 5.6.7f1,场景分辨率为 1440 * 2560,下面的案例中,都是以这个分辨率为标准,如果你设置的屏幕大小和我的不一样,那么在后面的操作中,参数可能会不一样。

1.在场景中添加一个 Canvas 组件

unity 滚动列表,Unity,unity

2.在 Canvas 中添加一个 Panel 组件

unity 滚动列表,Unity,unity

添加完成后,场景界面如下

unity 滚动列表,Unity,unity  

3.在 Panel 里添加一个空的游戏物体 Content

如下

unity 滚动列表,Unity,unity

将 Content 的大小调整一下

unity 滚动列表,Unity,unity

在场景中的显示如下

unity 滚动列表,Unity,unity

4.在 Content 里添加一个 UI 控件 Text

unity 滚动列表,Unity,unity

将 Text 大小和位置设置和 Content 一样,另外将字体设置为100,将颜色设置为红色

unity 滚动列表,Unity,unity

在 Text 中随便加入一些文字

unity 滚动列表,Unity,unity

场景中如下

unity 滚动列表,Unity,unity

5.在 Panel 上添加 Scroll Rect 控件

unity 滚动列表,Unity,unity

将 Content 游戏物体拖入到 Scroll Rect 控件中的 Content 属性里

unity 滚动列表,Unity,unity

6.测试效果

运行后,就可以拖动了,但是此时控件会左右晃动,效果:

unity 滚动列表,Unity,unity

 这里可以添加一个限制,只要取消 水平轴 的勾选,就可以让控件只能在水平方向移动

unity 滚动列表,Unity,unity

效果:

unity 滚动列表,Unity,unity

这里效果基本完成了,接下来给界面加个滚动条。

7.添加滚动条

在 Panel 中,添加一个 UI 控件 Scrollbar

unity 滚动列表,Unity,unity

将滚动条 Direction 属性 设置为 Buttom To Top ,也就是设置滚动条的方向

unity 滚动列表,Unity,unity

8.调整滚动条的颜色

找到子物体 Handle ,这个就是鼠标拖动的那个白方块

unity 滚动列表,Unity,unity

unity 滚动列表,Unity,unity

将颜色调整为鲜艳一点的颜色,更容易辨认

9.调整滚动条的位置

滚动条的位置和大小数据设置如下

unity 滚动列表,Unity,unity

此时场景中的显示如下

unity 滚动列表,Unity,unity

10.Scroll Rect 控件绑定 Scrollbar 

点击 Panel 控件,将 Scrollbar 控件拖入到 Scroll Rect 控件的 Vertical Scrollbar 属性中,如下图

unity 滚动列表,Unity,unity

这时,需求基本完成了,效果:

unity 滚动列表,Unity,unity

 当前只是文本控件拖动的形式,其实滚动列表原理差不多。
 

11.滚动列表

先删除上面步骤中的 Text 控件,这个暂时不需要了。

在 Content 里面添加一个空的游戏物体 Parent

unity 滚动列表,Unity,unity

Parent 的 Rect Transform 数据如下:

unity 滚动列表,Unity,unity

在 Parent 添加一个 UI 控件 Image

unity 滚动列表,Unity,unity

调整 Image 的大小

unity 滚动列表,Unity,unity

完成了上面的操作,在场景中显示如下 

unity 滚动列表,Unity,unity

给 Parent 添加一个 Vertical Layout Group 控件,将 Child Alignment 设置为 Upper Conter (向上对齐,并居中)

unity 滚动列表,Unity,unity

完成了上一步的操作后,Image 控件会自动移动到最顶部

unity 滚动列表,Unity,unity

我们将 Image 控件再复制十个

unity 滚动列表,Unity,unity

场景中显示如下:

unity 滚动列表,Unity,unity

运行后效果:

unity 滚动列表,Unity,unity

此时,虽然实现了滚动列表的效果,但是,此时滚动时一片空白,不知道那个是那个,接下来就做了一点改动,先删掉刚复制的 Image,再在 Image 里面添加了一个 Text 控件。

unity 滚动列表,Unity,unity

场景中显示如下:

unity 滚动列表,Unity,unity

接下来,就给 Image 挂上一个脚本 Test.cs

unity 滚动列表,Unity,unity

Test.cs 代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Test : MonoBehaviour
{
    // Use this for initialization
    void Start()
    {
        transform.Find("Text").GetComponent<Text>().text = transform.gameObject.name;
    }

    // Update is called once per frame
    void Update()
    {

    }
}

接下来,将 Image 控件复制十份

unity 滚动列表,Unity,unity

场景中界面如下:

unity 滚动列表,Unity,unity

运行后效果如下:

unity 滚动列表,Unity,unity

这样就OK了。

下载连接:点击下载

 end文章来源地址https://www.toymoban.com/news/detail-787566.html

到了这里,关于Unity UGUI 滚动列表的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity UGUI的Scrollbar(滚动条)组件的介绍及使用

    Scrollbar组件是Unity中UGUI系统提供的一种UI组件,主要用于在UI界面中提供滚动条功能,使用户可以通过滚动条来查看超出屏幕范围的内容。 Scrollbar组件的工作原理主要是通过改变滚动条的位置来改变关联的内容的显示位置。当用户拖动滚动条时,Scrollbar组件会根据滚动条的位

    2024年02月13日
    浏览(40)
  • 【Unity-UGUI控件全面解析】| Scrollbar 滚动条组件详解

    🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN 🙉 🎄 学习专栏推荐:

    2024年02月06日
    浏览(39)
  • 【Unity-UGUI控件全面解析】| ScrollView 滚动视图组件详解

    🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN 🙉 🎄 学习专栏推荐:Unity系统学习专栏 🌲 游戏制作专栏推荐:

    2024年02月06日
    浏览(48)
  • Unity实现一个可扩展的UGUI无限滑动列表控件

    12月20日新增 增加一个可收缩的滑动列表,适用于游戏中的任务系统,成就等 使用说明 创建时需要两个模板slot,一个是button,另一个则是btn下显示的cell 配置如下图添加 ExpandableView 脚本,新增的IsDefaultExpand用来控制是否展开 11月28日新增 增加可调节的顶部间隙和左侧间隙 采

    2024年01月19日
    浏览(39)
  • 【Unity3D-UGUI系列】(十二)ScrollView 滚动视图组件详解

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群:1040082875 大家好,我是佛系工程师 ☆恬静的小魔龙☆ ,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 首先,介绍一个UGUI,NGUI是UGUI的前身,Unity开发团队将NGUI的开发团队收到自己开发团队

    2024年02月05日
    浏览(49)
  • Unity2D 实现UGUI滚动鼠标滑轮以鼠标位置点为中心缩放图片

     先放参考文章: Unity3d UGUI以鼠标位置点为中心缩放图片(含项目源码) https://blog.csdn.net/qq_33789001/article/details/117749837 再放实现效果: 说说事情缘由,项目需要用到这个效果,所以上网找了个参考文章,后来不知道为什么失效了,所以想着自己改改,看看是什么毛病。 贴原

    2024年02月11日
    浏览(48)
  • Unity SnapScrollRect 滚动 匹配 列表 整页

    当停止滑动时 判断Contet的horizontalNormalizedPosition 与子Item的缓存值 相减,并得到最小值,然后将Content  horizontalNormalizedPosition滚动过去 直接将脚本挂到ScrollRect上 注意 :在创建Content子物体时 或子物体数量变更,需要调用 Refresh

    2024年01月21日
    浏览(31)
  • Unity UGUI Button

    目录 Button参数 Button事件 通过可视化界面绑定按钮事件:  通过代码绑定按钮事件

    2024年02月03日
    浏览(44)
  • Unity UI——UGUI

    包名: com.unity.ugui Canvas :   容纳所有UI元素的区域。   一种带有画布组件的游戏对象。   使用EventSystem对象来协助消息系统。 绘制顺序: 按照在 Hierarchy 中显示的顺序绘制,由上到下。 如果两个 UI 元素重叠,则后一个元素将显示在前一个元素之上 渲染模式:(Render Mode)

    2024年04月28日
    浏览(39)
  • Unity基础UGUI学习

    使用 UGUI来开发UI,离不开Canvas组件,所有的 UI 元素,一般都是放在包含 Canvas 组件的节点。 Canvas组件都有那些属性? RenderMode: 渲染模式,大概有三种: Screen Space - Overlay: 覆盖屏幕,Canvas 永远覆盖在场景中的其它所有元素的上层。 Pixel Perfect: UI元素精确到像素对齐,边

    2024年02月01日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包