UGUI交互组件ScrollView

14 篇文章 0 订阅

一.ScrollView的结构

对象说明
Scroll View挂有Scroll Rect组件的主体对象
Viewport滚动显示区域,有Image和mask组件
Content显示内容的父节点,只有个Rect Transform组件
Scrollbar Horizontal水平滚动条
Scrollbar Vertical垂直滚动条

二.Scroll Rect组件的属性

属性:功能:
Content这是对需要滚动的 UI 元素(例如大型图像)的矩形变换的引用。
Horizontal启用水平滚动
Vertical启用垂直滚动
Movement TypeUnrestricted、Elastic 或 Clamped。使用 Elastic 或 Clamped 可强制内容保持在滚动矩形的边界内。Elastic 模式在内容到达滚动矩形边缘时弹回内容
 Elasticity这是弹性模式中使用的反弹量。
Inertia如果设置 Inertia,则拖动指针再松开时内容将继续移动。如果未设置 Inertia,则只有进行拖动时内容才移动。
        Deceleration Rate设置 Inertia 的情况下,减速率 (Deceleration Rate) 决定了内容停止移动的速度。速率为 0 将立即停止移动。值为 1 表示移动永不减速。
Scroll Sensitivity对滚轮和触控板滚动事件的敏感性。
Viewport对作为内容矩形变换父项的视口矩形变换的引用。
Horizontal Scrollbar对水平滚动条元素的引用(可选)。
  Visibility滚动条是否应在不需要时自动隐藏以及(可选)是否还展开视口。
  Spacing滚动条与视口之间的空间。
Vertical Scrollbar对垂直滚动条元素的引用(可选)。
 Visibility滚动条是否应在不需要时自动隐藏以及(可选)是否还展开视口。
Spacing滚动条与视口之间的空间。

注意事项:

  • 视口Viewport具有Mask组件。视口可以是根游戏对象,也可以是作为根的子项的单独游戏对象。如果使用自动隐藏的滚动条,则视口必须是子项。需要在滚动矩形的 Viewport 属性中引用视口矩形变换。
  • 所有滚动内容必须是作为视口子项的单个内容游戏对象的子项。需要在滚动矩形的 Content 属性中引用内容矩形变换。
  • 滚动条(如果使用)是根游戏对象的子项。请参阅滚动条页面了解有关滚动条设置的更多详细信息,并参阅下面的滚动条设置部分了解有关滚动视图的滚动条设置的信息。

广泛应用的Scroll View情形:垂直,回弹,无滚动条,如下图所示,看下要改哪些设置

2.1 Horizontal关闭

2.2 删除Scrollbar Horizontal和Scrollbar Vertical

2.3 将ViewPort和Content的宽度设为和父节点一样

2.4 Content下挂上一个子节点,将位置摆在最上面

三.动态添加子节点

实际项目中Scroll View上有几个显示内容节点大部分情况是取决于后端数据,因此需要通过代码动态创建,内容创建完成后要注意的是需要设置Content的高度,不然当所有显示内容高于Content时,滚动显示不完整,实例代码如下

using TMPro;
public class CScrollView : MonoBehaviour
{
    void Start()
    {
        GameObject bgItem = GameObject.Find("ScrollView/Viewport/Content/bgItem");
        GameObject contentSV = GameObject.Find("ScrollView/Viewport/Content");

        int itemNum = 9;
        int itemHeight = 100;
        int itemOffset = 110;
        int allItemHeight = (itemNum - 1) * itemOffset + itemHeight;
        int svHeight = 500;
        for(int i = 0; i < itemNum; i++)
        {
            GameObject oneBgItem = Instantiate(bgItem);
            oneBgItem.transform.SetParent(contentSV.transform,true);
            float posY = -50 - i * itemOffset;
            oneBgItem.transform.localPosition = new Vector3(200, posY, 0);
            //设置文本
            GameObject itemText = oneBgItem.transform.GetChild(0).gameObject;
            itemText.GetComponent<TMP_Text>().SetText((i+1).ToString());
        }
        bgItem.SetActive(false);
        //设置content高度
        if(svHeight < allItemHeight)
        {
            RectTransform rectTransform = contentSV.GetComponent<RectTransform>();
            rectTransform.sizeDelta = new Vector2( 400, allItemHeight);
        }
    }
}

运行后可以看到模拟出了游戏中需要的效果

四.事件监听和滚动到指定位置

        //滚动监听
        ScrollRect scrollRect = GameObject.Find("ScrollView").GetComponent<ScrollRect>();
        scrollRect.onValueChanged.AddListener(delegate (Vector2 ve2)
        {
             Debug.Log("滚动ing y = "+ ve2.y);
        });
        //滚动到指定位置
        scrollRect.normalizedPosition = new Vector2(0, 0.5f);;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Super ScrollView for UGUI提供基于UGUI ScrollRect的可轻松定制的ScrollView。它是一组C#脚本,可帮助您创建所需的ScrollView。这是非常强大的和高度优化的性能。 文件 Android演示应用程序 演示: - 聊天消息列表演示 - 水平画廊演示 - 垂直画廊演示 - GridView演示 - PageVew演示 - TreeVew演示 - 与稠粘头演示的TreeView - 旋转日期选择器 - 更改项目高度演示 - 下拉刷新演示 - 拉起来加载更多的演示 - 点击加载更多演示 - 选择并删除演示 - GridView删除项目演示 - 顶部到底部的演示 - 自下而上的演示 - 从左到右的演示 - 右侧演示 - 响应GridView演示 - TreeViewWithChildrenIndent演示 特征: - ListView和GridView和TreeView - 无限的项目 - 项目在不同的大小(高度/宽度) - 具有不同预制的物品 - 在初始时间大小未知的项目 - 垂直滚动视图(从上到下,从下到上) - 水平滚动视图(从左到右,从右到左) - 项目填充 - 滚动到指定的项目 - 滚动到具有偏移量的项目 - 项目计数在运行时更改 - 项目大小(高度/宽度)在运行时更改 - 物品捕捉到视口中的任何位置 - 项目循环,如微调 - 添加/删除项目 - 全部删除/删除所有项目 - 刷新并重新加载项目 - 使用池缓存项目,不要在运行时销毁项目 - 有效回收物品 - 平台无关 - UGUI支持 - 支持Unity平台(IOS / Android / Mac / PC / Console / Winphone / WebGL ...)

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ellis1970

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值