cocos scrollview和pageview 的区别

Posted 2023-05-15

参考技术A ListView就是一个树状列表展示就像Windows资源管理器中左方的展示一样， ScrollView就是内容展示不过这个有滚动条可以上下拖动。 这两个东西可以分开单独使用， 也可以配合在一起使用

从零开始のcocos2dx生活ScrollView

目录

• 简介
• 基础变量
  • ScrollViewDelegate
  • Direction
  • _dragging
  • _container
  • _touchMoved
  • _bounceable
  • _touchLength
• 方法
  • create
  • setContentSize
  • deaccelerateScrolling
  • maxContainerOffset 和 minContainerOffset
• 触摸的各阶段
  • onTouchBegan
  • onTouchMoved
  • onTouchEnded

简介

scrollView是在一定可视范围内通过滚动看到更大范围的方法，可视的范围是绑定在滚动视图上的容器。

容器有两个界限，一个是容器偏移，一个是为了回弹设置的延伸的长度。

基础变量

ScrollViewDelegate

设置委托函数实例，继承并重写下面的方法，可以在滚动和缩放时使用回调函数

virtual void scrollViewDidScroll(ScrollView* view) {};
virtual void scrollViewDidZoom(ScrollView* view) {};

//使用
scrollView->setDelegate(this);   ///<添加委托
virtual void scrollViewDidScroll(ScrollView* view) 
{
  /*  */
}

Direction

设置滚动的方向

enum class Direction
    {
        NONE = -1,
        HORIZONTAL = 0,
        VERTICAL,
        BOTH
    };

_dragging

是否开始拖动的标志，在onTouchBegan时会设为true，表示开始拖动，在onTouchEnded、onTouchCancelled中设为false

_container

作为scrollView的子节点，存放显示的所有内容，滚动视图的滚动框就是在这个上面进行滚动的。Inset

inset分为_minInset和_maxInset，如果设置了回弹会被设置成偏移边界加上可视范围的20%

_touchMoved

标记正在拖动的标志，在onTouchMoved时被设为true，在onTouchEnded、onTouchCancelled中设为false

_bounceable

回弹，在初始化时默认被设为true，是指在滑动到container的边界之后，会继续滑动一截最后再弹回到边界处的一种效果。

_touchLength

用来计算两个触摸点之间的距离，会换算成缩放的倍数

方法

create

创建的时候可以将设置好的设置好的container作为参数，将容器绑定到滚动视图中，然后调用initWithViewSize方法来初始化滚动视图

initWithViewSize

初始化时调用

如果没有传入container参数会创建一个

setContentSize

这个方法主要是为了设置容器的大小，同时也刷新了Inset的大小，在调用setContentSize之前，minInset和maxInset都是0，没有被设置，setContentSize会调用updateInset方法，对minInset和maxInset进行了设置，让回弹可以进行，让deaccelerateScrolling可以获得正确的值。

void ScrollView::setContentSize(const Size & size)
{
    if (this->getContainer() != nullptr)
    {
        this->getContainer()->setContentSize(size);
        this->updateInset();
    }
}

void ScrollView::updateInset()
{
    if (this->getContainer() != nullptr)
    {
      _maxInset = this->maxContainerOffset();
      _maxInset.set(_maxInset.x + _viewSize.width * INSET_RATIO,
      _maxInset.y + _viewSize.height * INSET_RATIO);

      _minInset = this->minContainerOffset();
      _minInset.set(_minInset.x - _viewSize.width * INSET_RATIO,
      _minInset.y - _viewSize.height * INSET_RATIO);
    }
}

deaccelerateScrolling

在onTouchEnded中会调用这个方法来实现甩出的效果。在onTouchMoved中设置了scrollDistance参数，意思是松手前一帧内触摸点移动的距离，每次会将容器当前的位置加上scrollDisdtance更新位置，然后再将这个距离乘以一个参数让它变小，实现甩出逐渐减速的效果。

void ScrollView::deaccelerateScrolling(float /*dt*/)
{
    if (_dragging)
    {
        this->unschedule(CC_SCHEDULE_SELECTOR(ScrollView::deaccelerateScrolling));
        return;
    }
    
    float newX, newY;
    Vec2 maxInset, minInset;
    //设置容器的位置
    _container->setPosition(_container->getPosition() + _scrollDistance);
    
    //有回弹就使用延伸出去的距离
    if (_bounceable)
    {
        maxInset = _maxInset;
        minInset = _minInset;
    }
    //没有回弹就是用最大偏移的距离
    else
    {
        maxInset = this->maxContainerOffset();
        minInset = this->minContainerOffset();
    }
    
    newX = _container->getPosition().x;
    newY = _container->getPosition().y;
    //逐渐缩小
    _scrollDistance = _scrollDistance * SCROLL_DEACCEL_RATE;
    this->setContentOffset(Vec2(newX,newY));
    
    //减速并回弹至设定最大偏移处
    //移动是否小于预定值
    //位置是否超出设定的延伸量
    if ((fabsf(_scrollDistance.x) <= SCROLL_DEACCEL_DIST &&
         fabsf(_scrollDistance.y) <= SCROLL_DEACCEL_DIST) ||
        ((_direction == Direction::BOTH || _direction == Direction::VERTICAL) && (newY >= maxInset.y || newY <= minInset.y)) ||
        ((_direction == Direction::BOTH || _direction == Direction::HORIZONTAL) && (newX >= maxInset.x || newX <= minInset.x)))
    {
        //取消每帧减速刷新
        this->unschedule(CC_SCHEDULE_SELECTOR(ScrollView::deaccelerateScrolling));
        //重新设置容器的偏移
        this->relocateContainer(true);
    }
}

maxContainerOffset 和 minContainerOffset

代码中有些地方对container的锚点和忽略锚点影响重新设置了，但不管怎么设置，它的锚点都是(0, 0)。

所以可以知道maxContainerOffset一直是都是(0, 0)，除非是又重新设置了。

这里其实有些难理解，最大容器偏移量指的是手指(鼠标)按住向右滑动，container的左边界相对于view的左边界的偏移。

对于minContainerOffset来说也是container的左边界相对于view的左边界的偏移，其值是负值，从代码来看是viewSize - 容器的大小。

向左滑动是minContainerOffset

向右滑动是maxContainerOffset

触摸的各阶段

onTouchBegan

1、要求触摸点是一个或者两个，没有在移动，包含在view的区域内

2、如果没有加到touches数组中，就加进去，用来在后面判断触摸点个数使用

3、如果是单点触摸touchMoved设为false，dragging设为true，scrollDistance设为0，touchLength设为0

4、如果是两点缩放，会记录初始状态时的 两点中点位置 和 两点之间的距离

onTouchMoved

单点触摸

1、获取这一帧内触摸点的移动距离

2、对三种不同的拖动方向，判断拖动的距离是否超出偏移范围

3、如果是第一次touchMoved并且长度小于设定的值，直接返回

4、如果是第一次touchMoved会将moveDistance设为0，影响是对第一帧移动时的移动设为了0，实际看不出来

5、记录了新的触摸点，将touchMoved设为true

6、对三种不同的拖动方向，分别设置了移动距离

7、设置新的移动偏移

两点缩放

1、获取当前两点之间的距离

2、用 当前zoomScale * 当前两点距离 / 开始时两点距离 获得设置缩放的参数，进入到setZoomScale中

setZoomScale

1、获取当前的两个触摸点的中点，如果是触摸长度是0，则中点为可视区域的中点，否则为两触摸点中点

2、

//在缩放前将触摸点中点坐标转换到节点坐标系
oldCenter = _container->convertToNodeSpace(center);
//执行缩放
 _container->setScale(MAX(_minScale, MIN(_maxScale, s)));
//因为是按照(0,0)点缩放的，原来的触摸中点会发生改变，这个时候重新转换触摸中点的位置到世界坐标系
newCenter = _container->convertToWorldSpace(oldCenter);

3、计算缩放前后的触摸点中点的差值，作为偏移量

4、使用容器的位置加偏移量作为容器的新偏移

onTouchEnded

配合的accelerateScrolling使用，每次触摸结束会调用accelerateScrolling来实现甩出的效果。