简介

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来实现甩出的效果。

巴特西

从零开始のcocos2dx生活（十）ScrollView

简介