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 %fn",posy);
//判断当前是否是有移动了,当有移动的时候才去更新Scrollbar的位置 if ( this->m_lastPosY != posy ) {
//获得偏移量 float disY = this->m_lastPosY - posy; CCLog("disY is %fn",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了。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|