cocos2dx+lua学习笔记：UIScrollView的使用

news2025/7/17 14:18:05

前言

本篇在讲什么

本篇简单介绍Lua篇cocos2dx中UIScrollView的相关内容
仅介绍简单的应用，仅供参考

本篇适合什么

适合初学Cocos2dX的小白
适合想要在Cocos2dx-lua中使用UIScrollView的人

本篇需要什么

对Lua语法有简单认知
对Cocos2dx-Lua有简单认知
Cocos2dx-Lua 3.15的开发环境

本篇的特色

具有全流程的图文教学
重实践，轻理论，快速上手
提供全流程的源码内容

★提高阅读体验★

👉 ♠ 一级标题 👈

👉 ♥ 二级标题 👈

👉 ♣ 三级标题 👈

👉 ♦ 四级标题 👈

♠ 简介

UIScrollView是继承自Layer的容器，本质是可供开发者做水平或垂直方向的滚动容器

♥ 滚动原理

滚动原理很简单，从c++代码内可以看到，UIScrollView组件在初始化的时候创建了一个名为_innerContainer的Layout组件，所有的子控件均挂载在该组件下

void ScrollView::initRenderer()
{
    Layout::initRenderer();
    _innerContainer = Layout::create();
    _innerContainer->setColor(Color3B(255,255,255));
    _innerContainer->setOpacity(255);
    _innerContainer->setCascadeColorEnabled(true);
    _innerContainer->setCascadeOpacityEnabled(true);
    addProtectedChild(_innerContainer, 1, 1);
}

然后在点击事件内会根据点击前后的位置差来设置_innerContainer的位置，进而达到滚动的效果

♠ 应用

以下我们将通过几个简单的代码示例，来展示UIScrollView的功能

♥ 横向滚动列表

我们通过以下代码创建一个横向滚动列表，效果如下所示

local sv            = ccui.ScrollView:create()
local size          = cc.size(1280, 720)

sv:setContentSize(size)
sv:setAnchorPoint(0.5, 0.5)
sv:setDirection(cc.SCROLLVIEW_DIRECTION_HORIZONTAL)

for i=1,10 do
    local sp = cc.Sprite:create("dlrb.png")
    sv:addChild(sp)
    sp:setPosition(cc.p(i*350, size.height/2))
end

sv:setInnerContainerSize({width = 4000, height = size.height})
sv:setPosition(640,360)

self:addChild(sv)

在这里插入图片描述

要点1：通过ccui.ScrollView:create()来创建一个滚动列表的实例

要点2：通过setContentSize来设置滚动显示区域

要点3：通过setDirection来设置滚动方向，参数有两个

cc.SCROLLVIEW_DIRECTION_HORIZONTAL ：水平滚动参数
cc.SCROLLVIEW_DIRECTION_VERTICAL ：垂直滚动参数

要点4：通过setInnerContainerSize来设置滚动容器的范围，就是可滑动的范围，不设置滚不了

♠ 附加功能

我们已经可以创建最基础的滚动列表了，基类中还提供了很多额外的效果，例如回弹，自动滚动等，下面介绍几个常用的功能

♥ 隐藏滚轴

位于右侧和下方的滚动轴，默认是显示的，通过下面接口隐藏

sv:setScrollBarEnabled(false)

在这里插入图片描述

♥ 回弹

在滚动边界增加回弹效果

sv:setBounceEnabled(true)

在这里插入图片描述

♥ 惯性

在滑动很快的时候，松手，列表会按照惯性滑动一定距离，默认true，不想要可以设置成false

sv:setInertiaScrollEnabled(true)

在这里插入图片描述

♥ 自动滚动

官方提供了可以自动滚动的接口，包括不限于滚动到最左侧、最右侧、最上、最下、固定进度等

virtual void scrollToBottom(float timeInSec, bool attenuated);

virtual void scrollToTop(float timeInSec, bool attenuated);

virtual void scrollToLeft(float timeInSec, bool attenuated);

virtual void scrollToRight(float timeInSec, bool attenuated);

virtual void scrollToTopLeft(float timeInSec, bool attenuated);

virtual void scrollToTopRight(float timeInSec, bool attenuated);

virtual void scrollToBottomLeft(float timeInSec, bool attenuated);

virtual void scrollToBottomRight(float timeInSec, bool attenuated);

virtual void scrollToPercentVertical(float percent, float timeInSec, bool attenuated);

virtual void scrollToPercentHorizontal(float percent, float timeInSec, bool attenuated);

virtual void scrollToPercentBothDirection(const Vec2& percent, float timeInSec, bool attenuated);

下面为自动在2s内滚到最右侧，参数attenuated表示力道逐渐衰减

sv:scrollToRight(2, true)

在这里插入图片描述

♥ 跳转位置

官方提供了可以直接跳转到某个位置，包括不限于跳转到最左侧、最右侧、最上、最下、固定进度等

virtual void jumpToBottom();

virtual void jumpToTop();

virtual void jumpToLeft();

virtual void jumpToRight();

virtual void jumpToTopLeft();

virtual void jumpToTopRight();

virtual void jumpToBottomLeft();

virtual void jumpToBottomRight();

virtual void jumpToPercentVertical(float percent);

virtual void jumpToPercentHorizontal(float percent);

virtual void jumpToPercentBothDirection(const Vec2& percent);

下面代码，滚轴会跳转到最右侧