cocostudio在scrollview封装滚动条

cocostudio里面是没有对应scrollview封装滚动条的，在实际的项目中需要scrollview携带滚动条是很常见的需求，对此研究了一下，自己封装了一个UIScrollbar的实现，不是很完善，但大致完成了当scrollview滚动时，滚动条也对应着滚动。首先，先对需求进行一下数学分析(不是数学专业的数学分析~_~)，看下面的图解：

从这个图用数学知识分析，当scrollview的item子项往上移动一个像素的时候，由于我们的滚动条的范围是在黑色区域的高度，所以我们必须用比例，则加上总的高度为1000，黑色部分的高度为500，假设偏移量为dy，则滚动条的偏移量为dy1 = dx *(1000 - 500)/500,基于这个知识，贴上UIScrollbar的代码：

#include "UIScrollBar.h"

UIScrollBar::UIScrollBar(const char* fileName)
:filePath(fileName)
{

m_lastPosY = 0;

pos = 0;

}

UIScrollBar::~UIScrollBar()
{
}
//UIScrollbar的初始化，和设置UIScrollbar的纹理
UIScrollBar* UIScrollBar::create(const char* filePath)
{
UIScrollBar* widget = new UIScrollBar(filePath);
if (widget && widget->init())
{
widget->autorelease();
return widget;
}
CC_SAFE_DELETE(widget);
return NULL;
}


bool UIScrollBar::init()
{
bool isRet = false;
if ( !CCLayer::init())
{
return isRet;
}
isRet = true;

//图片使用Imageview载入（采用ccsprite也是可以的，但需要把addchild改为addNode,并且继承与Widget就可以了）

this->m_scrollbar = ImageView::create();
this->m_scrollbar->loadTexture(filePath);
this->addChild(this->m_scrollbar);

//执行帧函数，每一帧都设置滚动条争取的位置
this->scheduleUpdate();
return isRet;
}
//设置scrollbar的位置，初始化的时候设置的时候要注意滚动区域的高度，设置位置的高度应该为滚动区域的Y轴坐标，
void UIScrollBar::setPosition(CCPoint pos)
{
this->m_scrollbar->setPosition(pos);
}
//更新函数
void UIScrollBar::update(float dt)
{

//获得父节点UIScrollview，因为我是把uiscrollbar加入到scrollview里面的，此时能产生裁剪的效果
UIScrollView* sview = (UIScrollView*)this->getParent();
if ( sview != NULL )
{

//uiscrollbar更新位置的逻辑

//因为我没找到获得uiscrollview的偏移量的方法，所以就采用获得Scrollview的子节点偏移量来获得便宜量
CCArray* array = sview->getChildren();
Widget* item = (Widget*)array->lastObject();
this->posy = (item->getWorldPosition()).y;
CCLog("posy is %f\n",posy);

//判断当前是否是有移动了，当有移动的时候才去更新Scrollbar的位置
if ( this->m_lastPosY != posy )
{

//获得偏移量
float disY = this->m_lastPosY - posy;
CCLog("disY is %f\n",disY);

float y；

//获得scrollview的滚动区域与可视区域的比例，以便得到scrollview的可视区域的高度
float viewCsize = sview->getSizePercent().y;

//可视区域的高度
float size = sview->getSize().height / viewCsize;

//如上图所说的比例计算
float rate = (sview->getSize().height - size) / size;

//滚动条需要滚动的偏移量
double reaY = disY / rate;

//为什么需要+disY，这是很重要的一部份，也是坑了我一天的东西，后来想了想，其实也是很自然的东西，那是因为父节点移动了disY，所以子节点也移动了disY，

//所以当你需要设置正确位置的时候，必须是相对于整个屏幕Scrollbar是没有移动的，所以必须加上disY,保持scrollbar是相对于整个屏幕没有移动，然后在加上计算好的

//需要滚动的偏移量
y = this->m_scrollbar->getPositionY() + reaY + disY;
//必须加上相对于父节点的偏移量使子节点是处于整个视口是不动的，此时加上偏移量才是正确的
this->m_scrollbar->setPositionY(y);
this->m_lastPosY = posy;
}
}
}

当你需要使用这个的时候，只需要把这段代码设置为一个层，然后加入到UIScrollview的子节点中，设置好正确的位置，就可以实现带滚动条的uiscrolllview了。