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了。