cocos2dx中滚动界面和小滚动条同步的实现

在游戏中，经常会遇到滚动界面，或者滚动列表，在滚动时，为了给用户一个更好的体验，我们会想到在滚动界面的旁边加上一个小小的滚动条，让这个滚动条和滚动界面的同步运动来告诉用户，这个滚动界面还有多少距离到底部等。下面我就来说下我在cocos2dx中具体怎么来实现这一功能。我下面说的是竖着滚动的，所以大小等只针对高。当然横向的原理也是一样的！

首先你要有一个滚动界面控件，也就是ScrollView控件（当然ListView也一样，它是继承前者的）然后有一个表示小小的滚动条的sprite。经过观察别的应用在处理这个问题的时候，我们会发现这个小小的滚动条的大小会随着滚动页面所需要滚动的总大小而变化（下图中H2，有个时候，这个滚动界面是动态的发生变化的，比如qq的好友列表，你往下拉，他的那个列表才会加长，这样你会发现旁边的那个小滚动条的长度在减少），所以第一步，我们要得到小滚动条的长度：即下图h1，其实里面的算法逻辑很简单，很容易得出结论：滚动界面的高 H1（也就是你实际看到的那个表面的滚动界面的高）和用户需要滚动的高H2（这个就是包含滚动界面中不被看到的部分，也就是我们裁剪掉的部分）的比值 等于小小滚动条的高h1（这个就是我们要得到的）和滚动界面的高H1。

不是美工，图片做的有点搓，见笑了。

其中 那个实框表示能给用户看到的滚动区域，下面的虚框是滚动界面的总大小，我们需要得到的是 小滚动条的大小h1 = H1 * H1 / H2(注意为了更精确，请使用float类型)

到此，解决了我们的第一个问题：小滚动条的长度问题。

接下来就是小滚动条的滚动位移的问题：

分析：首先要得到一个小滚动条的滚动因子，其实很简单，根据之前要实现滚动界面和小滚动条的同步，那么滚动界面滚动到底（即全部滚完）的时间和小滚动条滚动到底的时间是一样的，我们用s1来表示小滚动条滚动的距离，用s2来表示滚动界面滚动的距离，那么显然，每一次滚动的距离，即有这么一个关系 s1 / s2 = (H1 - h1) /  (H2 - H1); 我们用 float moveFactor = (H1 - h1) /  (H2 - H1) 来记录这个滚动因子。那么小滚动条移动的距离，永远是大滚动界面移动的距离的 moveFactor 倍，即 s1 = s2 *moveFactor  。这样我们只需要在大滚动界面的滚动事件里面得到他的滚动距离s2，那么我就就可以对小滚动条做出滚动距离的变化了。

实现：因为无论是ScrollView还是ListView他们的滑动不需要我们处理，这里我们只要在滚动界面滑动的时候，让小滚动条也跟着滚动就行了，查看ScrollView的类，发现有以下监听事件：

enum class EventType
    {
        SCROLL_TO_TOP,
        SCROLL_TO_BOTTOM,
        SCROLL_TO_LEFT,
        SCROLL_TO_RIGHT,
        SCROLLING,
        BOUNCE_TOP,
        BOUNCE_BOTTOM,
        BOUNCE_LEFT,
        BOUNCE_RIGHT
    };

显而易见，我们需要的是SCROLLING事件，于是注册监听事件（不要告诉我你不会，不会可以看引擎自带的test项目工程），在回调函数里面来实现小滚动条的移动。

void HelloWorld::touchListViewBack(Ref* ref ,ui::ScrollView::EventType type)
{
	auto touchTarget = dynamic_cast<ScrollView*>(ref);
	if (type == ScrollView::EventType::SCROLLING)  //正在滚动
	{
		m_pos2= touchTarget->getInnerContainer()->getPositionY();

                s2 = m_pos2 - m_pos1;
		s1= s2 *moveFactor;
		m_pos1=m_pos2;
		m_spHuaDongTiao->setPositionY(m_spHuaDongTiao->getPositionY() + s1* (-1)); //*（-1）表示方向相反
	}
}

touchTarget : 当然就是注册滚动事件的ScrollView 或者listview, m_spHuaDongTiao:当然就是小滑动条精灵了，m_pos1 和m_pos2是一对float用来处理每一次调用此回调函数时，大滚动界面滚动的距离：即进入此函数，得到当前滚动界面内容器（注意请用这个函数：->getInnerContainer()）的位置，然后减去上一次的位置，即是改变值，那么小滑动条的改变值就是此值的moveFactor倍了。然后再更新一下m_pos1。最后设置一下小滑动条的位移就搞定了。这样，就彻底实现了 两者之间的同步问题。写得比较混乱，但是我相信聪明的你，肯定看的懂的！