cocos TableView滑动块

最新推荐文章于 2021-10-12 09:30:18 发布
最新推荐文章于 2021-10-12 09:30:18 发布
阅读量483 收藏
点赞数
 #ifndef _SCROLL__BAR__H_
#define _SCROLL__BAR__H_

#include "cocos2d.h"
#include "ui/UIScale9Sprite.h"

namespace cocos2d {
    namespace extension {

    enum SclBarDirection
    {
   DIR_NODIR = 0,
   DIR_VERTICAL,
   DIR_HORIZENTAL,
    };
    class TableView;
    class ScrollBar : public cocos2d::Layer
    {
    public:
   ScrollBar();
   ~ScrollBar();
   /**
   * 因为九宫图不能缩小到比实际图片要小，所以传入的图片的实际大小要足够小，否则slider的大小会有问题
   */
        static ScrollBar * create(ui::Scale9Sprite * bar_bg, ui::Scale9Sprite * bar_slider, TableView * tableView, SclBarDirection dir);
   static ScrollBar * createWithFile(const char * bar_bgFile,const char * bar_sliderFile,TableView * tableView,SclBarDirection dir);
        bool myInit(ui::Scale9Sprite * bar_bg, ui::Scale9Sprite * bar_slider, TableView * tableView, SclBarDirection dir);

        ui::Scale9Sprite * getSliderBg();
        ui::Scale9Sprite * getSlider();
    protected:
   virtual bool onTouchBegan(Touch* touch, Event* pEvent);
   virtual void onTouchMoved(Touch *pTouch, Event *pEvent);
   virtual void onTouchEnded(Touch *pTouch, Event *pEvent);

   virtual void update(float dt) override;
   /**
   * 动态改变slider的大小
   */
   void updateSlider();

    private:
   TableView * m_pTarget;
        ui::Scale9Sprite * m_pBg;
        ui::Scale9Sprite * m_pSlider;
   SclBarDirection m_direction;
   Size m_preContentSize;
   Size m_viewSize;
   bool m_sliderTouched;
   Vec2 m_firstTouch;
   Vec2 m_sliderCurPos;
   Vec2 m_targetCurPos;
    };

    }
}

#endif



#include "ScrollBar.h"
#include "cocos-ext.h"

USING_NS_CC;
USING_NS_CC_EXT;

ScrollBar::ScrollBar()
: m_pTarget(nullptr)
, m_pBg(nullptr)
, m_pSlider(nullptr)
, m_direction(DIR_NODIR)
, m_preContentSize(Size::ZERO)
, m_viewSize(Size::ZERO)
, m_sliderTouched(false)
, m_firstTouch(Vec2::ZERO)
, m_sliderCurPos(Vec2::ZERO)
, m_targetCurPos(Vec2::ZERO)
{

}

ScrollBar::~ScrollBar()
{

}

ScrollBar * ScrollBar::createWithFile(const char * bar_bgFile, const char * bar_sliderFile, TableView * tableView, SclBarDirection dir)
{
Scale9Sprite * pBg = Scale9Sprite::create(bar_bgFile);
Scale9Sprite * pSlider = Scale9Sprite::create(bar_sliderFile);

return create(pBg,pSlider,tableView,dir);
}

ScrollBar * ScrollBar::create(Scale9Sprite * bar_bg,Scale9Sprite * bar_slider,TableView * tableView,SclBarDirection dir)
{
ScrollBar * pRet = new ScrollBar();
if (pRet && pRet->myInit(bar_bg,bar_slider,tableView,dir))
{
pRet->autorelease();
}
else
{
CC_SAFE_DELETE(pRet);
}

return pRet;
}

/**
* 初始化各个数据
*/
bool ScrollBar::myInit(Scale9Sprite * bar_bg,Scale9Sprite * bar_slider,TableView * tableView,SclBarDirection dir)
{
if (!Layer::init())
{
return false;
}
m_pBg = bar_bg;
m_pSlider = bar_slider;
m_pTarget = tableView;
m_direction = dir;
m_preContentSize = m_pTarget->getContainer()->getContentSize();
m_viewSize = m_pTarget->getViewSize();
if (m_direction == DIR_VERTICAL)
{
m_pBg->setContentSize(Size(m_pBg->getContentSize().width,m_viewSize.height));
m_pBg->setPosition(Vec2(m_pBg->getContentSize().width / 2,0));
m_pSlider->setPositionX(m_pBg->getContentSize().width / 2);
} 
else if (m_direction == DIR_HORIZENTAL)
{
m_pBg->setContentSize(Size(m_viewSize.width,m_pBg->getContentSize().height));
m_pBg->setPosition(Vec2(0,-m_pBg->getContentSize().height / 2));
m_pSlider->setPositionY(-m_pBg->getContentSize().height / 2);
}
this->addChild(m_pBg,0);

this->updateSlider();

this->addChild(m_pSlider,1);

this->scheduleUpdate();

auto listenerT = EventListenerTouchOneByOne::create();
listenerT->onTouchBegan = CC_CALLBACK_2(ScrollBar::onTouchBegan,this);
listenerT->onTouchMoved = CC_CALLBACK_2(ScrollBar::onTouchMoved,this);
listenerT->onTouchEnded = CC_CALLBACK_2(ScrollBar::onTouchEnded,this);
listenerT->setSwallowTouches(false);
Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listenerT,this);

return true;
}

void ScrollBar::updateSlider()
{
float ratio = 0.0;
if (m_direction == DIR_VERTICAL)
{
ratio = m_viewSize.height / m_preContentSize.height;
m_pSlider->setContentSize(Size(m_pSlider->getContentSize().width,m_viewSize.height * ratio));
} 
else if (m_direction == DIR_HORIZENTAL)
{
ratio = m_viewSize.width / m_preContentSize.width;
m_pSlider->setContentSize(Size(m_viewSize.width * ratio,m_pSlider->getContentSize().height));
}
//如果要显示的内容的尺寸比视图大小小，则隐藏滑块slider
this->setVisible( !(ratio >= 1) );
}

void ScrollBar::update(float dt)
{
//判断当前内容是否有增减，因为内容的增减会影响ContenSize,从而修改slider的大小
auto curContentSize = m_pTarget->getContainer()->getContentSize();
if ( !(fabsf(curContentSize.height - m_preContentSize.height) <= 0.00001)  || 
!(fabsf(curContentSize.width - m_preContentSize.width) <= 0.00001) )
{
m_preContentSize = curContentSize;
this->updateSlider();
}

//设置slider的位置
if (m_direction == DIR_VERTICAL)
{
//调整滑块的位置
auto curOffset = m_pTarget->getContentOffset() + (m_preContentSize - m_viewSize) / 2;
auto sliderOffset = curOffset.y / (m_viewSize.height - curContentSize.height) * 
(m_viewSize.height - m_pSlider->getContentSize().height);
//判断滑块是否滑出界限
if (fabsf(sliderOffset) > (m_viewSize.height - m_pSlider->getContentSize().height) / 2)
{
return ;
}
m_pSlider->setPositionY(sliderOffset);
}
else if (m_direction == DIR_HORIZENTAL)
{
auto curOffset = m_pTarget->getContentOffset() - (m_preContentSize - m_viewSize) / 2;
auto sliderOffset = -curOffset.x / (m_viewSize.width - curContentSize.width) * 
(m_viewSize.width - m_pSlider->getContentSize().width);
if (fabsf(sliderOffset) > (m_viewSize.width - m_pSlider->getContentSize().width) / 2)
{
return ;
}
m_pSlider->setPositionX(sliderOffset);
}
}

bool ScrollBar::onTouchBegan(Touch* touch, Event* pEvent)
{
m_sliderCurPos = m_pSlider->getPosition();
m_targetCurPos = m_pTarget->getContentOffset();
auto touchPoint = touch->getLocation();
m_firstTouch = touchPoint;
//将触摸点转为在当前子层下的坐标
touchPoint = this->convertToNodeSpace(touchPoint);
//只响应点击了滑块背景的触摸
if (!m_pBg->getBoundingBox().containsPoint(touchPoint))
{
return false;
}
//如果先点击了滑块，则设置标志
if (m_pSlider->getBoundingBox().containsPoint(touchPoint))
{
m_sliderTouched = true;
}
else//如果没有点击滑块，则点击的是滑块背景图
{
if (m_direction == DIR_VERTICAL)
{
//通过调整m_pTarget的偏移，从而调整了滑块slider的位置，因为update函数会一直监听m_pTarget的偏移
auto offset = touchPoint.y - m_sliderCurPos.y;
if (touchPoint.y <= 0)
{
offset += m_pSlider->getContentSize().height / 2;
} 
else
{
offset -= m_pSlider->getContentSize().height / 2;
}
auto newOff = m_targetCurPos.y + offset / (m_pSlider->getContentSize().height - m_viewSize.height) 
* (m_preContentSize.height - m_viewSize.height);
m_pTarget->setContentOffset(Vec2(0,newOff));
}
else if (m_direction == DIR_HORIZENTAL)
{
auto offset = touchPoint.x - m_sliderCurPos.x;
if (touchPoint.x <= 0)
{
offset += m_pSlider->getContentSize().width / 2;
} 
else
{
offset -= m_pSlider->getContentSize().width / 2;
}
auto newOff = m_targetCurPos.x + offset / (m_viewSize.width - m_pSlider->getContentSize().width) 
* (m_preContentSize.width - m_viewSize.width);
m_pTarget->setContentOffset(Vec2(newOff,0));
}
}
return true;
}
void ScrollBar::onTouchMoved(Touch *pTouch, Event *pEvent)
{
//只响应点击了滑块的移动
if (m_sliderTouched)
{
auto offPos = pTouch->getLocation() - m_firstTouch;
if (m_direction == DIR_VERTICAL)
{
//通过调整m_pTarget的偏移，从而调整了滑块slider的位置，因为update函数会一直监听m_pTarget的偏移
auto newOff = m_sliderCurPos.y + offPos.y;
//判断滑块是否滑出界限
if (fabsf(newOff) > (m_viewSize.height - m_pSlider->getContentSize().height) / 2)
{
(newOff < 0 ? (newOff = (m_pSlider->getContentSize().height - m_viewSize.height) / 2) : 
(newOff = (m_viewSize.height - m_pSlider->getContentSize().height) / 2));
}
newOff -= m_sliderCurPos.y;
m_pTarget->setContentOffset(Vec2(0,
m_targetCurPos.y + newOff / (m_pSlider->getContentSize().height - m_viewSize.height) 
* (m_preContentSize.height - m_viewSize.height)));
}
else if (m_direction == DIR_HORIZENTAL)
{
auto newOff = m_sliderCurPos.x + offPos.x;
if (fabsf(newOff) > (m_viewSize.width - m_pSlider->getContentSize().width) / 2)
{
(newOff < 0 ? (newOff = (m_pSlider->getContentSize().width - m_viewSize.width) / 2) : 
(newOff = (m_viewSize.width - m_pSlider->getContentSize().width) / 2));
}
newOff -= m_sliderCurPos.x;
m_pTarget->setContentOffset(Vec2(m_targetCurPos.x + newOff / (m_viewSize.width - m_pSlider->getContentSize().width) 
* (m_preContentSize.width - m_viewSize.width),0));
}
}
}

void ScrollBar::onTouchEnded(Touch *pTouch, Event *pEvent)
{
m_sliderTouched = false;
}

ui::Scale9Sprite * cocos2d::extension::ScrollBar::getSliderBg()
{
    return m_pBg;
}

ui::Scale9Sprite * cocos2d::extension::ScrollBar::getSlider()
{
    return m_pSlider;
}

 

淡乄
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于creator的tableView和pageView
TTUZ的博客
08-18 2551
转载请注明出处 tableView并没有继承cc.ScrollView，一是怕现在或以后和ScrollView中的方法冲突，二是因为属性太多，太乱心了，子龙山人的那集视频开头没看到，不知道排版应该怎么搞。。。 pageView是在tableView基础上添加的翻页行为 显示大量节点时，性能有明显提升 测试例子地址：https://gith
LQXAutoTableView(自动滚动)
07-17
在开发中,有时候需要自动滚动的循环列表,在这里,小弟提供了一个写好的tableView直接继承即可使用
如何做优化，UITabelView才能更加顺滑
天行健，君子以自强不息
01-15 369
如何做优化，UITabelView才能更加顺滑 2016-01-15 06:18 编辑： suiling 分类：iOS开发 来源：南峰子的技术博客 UITabelView应用优化 原文由Alexander Orlov发表于medium，地址为https://medium.com/ios-os-x-development/perfect-smooth
cocos2dx tableview基础：实现多图片的滑动显示
小猫戏蝴蝶的博客
07-07 546
通过tableview实现滑动显示26个字母图片，点击图片执行相应的动作。 tableview 需要继承TableViewDataSource（数据源），TableViewDelegate（触屏事件处理），同时实现其虚函数。 代码如下： 头文件TableViewTest.h如下： #ifndef __macstudycocos2dx__TableViewTest
cocos2d-x ScrollView与tableView的使用范例
05-25
cocos2d-x ScrollView与tableView的使用范例
关于cocos2dx之lua使用TableView
帘卷西风的专栏
09-30 1万+
在手机游戏的开发中，滚动是一项非常重要的操作，而cocos2dx中使用的最广泛的就属于TableView了，不过由于cocos2dx的接口比较晦涩，所以需要一个熟悉的过程。本文主要讲解如何使用TableView。 首先当然是创建一个TableView，这比较简单，和其他控件差不多。看看示例代码： self._skillView = cc.TableView:create(cc.size(wi
cocos2dx scrollview优化
09-07
在Cocos2d-x游戏开发框架中，ScrollView是用于实现滚动视图的组件，它能够帮助开发者处理大量的可滚动内容，比如长列表或者图像画廊。ScrollView优化是提高游戏性能和用户体验的关键环节，尤其是在资源密集型的应用...
tableview和scrollview的混合使用
01-09
首先，`TableView` 是Cocos2d-x中用于显示动态列表的控件，它基于 `ListView` 类，能够自动生成和管理多个子节点（Cell），并且可以实现滑动、滚动等操作。每个Cell通常代表列表中的一个项目，开发者可以通过重载 `...
cocosCreator日历组件(Ts）
12-31
5. 动画效果：增强用户体验，可以添加日期切换的过渡动画，如淡入淡出、滑动切换等。 四、实际应用场景 1. 游戏中的事件触发：例如，在角色养成游戏中，特定事件可能与日期关联，玩家可以选择日期触发剧情或活动。...
cocos2dx实现的聊天界面
10-27
通过`TableView`，开发者可以轻松地创建滑动列表，其中每个单元格代表一条聊天消息。 在Cocos2dx中实现聊天界面，我们首先需要设置`TableView`的基本结构。这包括创建一个`TableView`对象，定义单元格（`Cell`）的...
Cocos Creator 实现的tableView列表demo
06-13
cocos cerator 实现的 tableView 列表，封装了含有回收机制，列表复用，缓存机制等功能防止内存泄露与卡顿等问题
优化tableview cell的滚动速度心得
ios专栏
10-08 1万+
之前lvyile对我说过，tableview cell滚动可以优化到不卡，当时确实是因为技术不到家，怀疑是否是内容过多，再加上没有太多的时间去优化，所以一直没有实质性的进展。最近在优化的过程中，xhan又对我说确实可以优化到不卡，让俺可以沉下心老实研究了。 rovercat在和我
cocos2dx 屏幕滑动（ScrollViewDelegate、TableViewDelegate）和屏幕触摸响应
lls2012的专栏
01-15 1261
1.ScrollView #include "GalleryLayer.h" using namespace cocos2d; using namespace cocos2d::extension; bool GalleryLayer::init() { bool bRet = false; do { CC_BREAK_IF( !CCLayer::init() );
cocos2dx 3.8中ScrollView记载TableView（代码详解）
cocs2dliuyu的博客
08-08 1159
啥都不说 代码先附上： #ifndef __COMBINE_VIEW_H__ #define __COMBINE_VIEW_H__ #include "cocos2d.h" #include "cocos-ext.h" USING_NS_CC; USING_NS_CC_EXT; enum Table { Table_Left = 0, Table_Center, Table_Righ
Cocos2dx 3.0 过渡篇（三） 触摸机制
热门推荐
天涯海阁
01-15 2万+
假设要实现拖动一个精灵移动，那我们的步骤是： 1、 创建一个精灵sprite； 2、一个触摸事件 listener ，设置listener的onTouchBegan,onTouchMoved,onTouchEnded; 3、将sprite 和 listener关联起来。
CocosCreator之动态加载滑动列表
神兽白泽
10-12 2525
问苍茫大地，谁主沉浮？------《沁园春·雪》 本组件依赖于ScrollView组件。请这样挂载： 滑动列表初始化： import TableView from "../../../component/TableView"; /** * 初始化滚动条目 * @author 神兽白泽 */ const { ccclass, property } = cc._decorator; @ccclass export default class ListTest extends cc.Comp.
CocosCreator之分层管理的ListView
~生命淡如水~
07-16 931
前言 进入公众号回复listview即可获得demo的git地址。 之前写的一篇文章《Creator之ScrollView那些事》中提到了官方Demo中提供的ListViewCtl,只是实现了纵向滑动，没有实现横向滑动。并且建议官方可以把功能做全然后放入组件库中供开发者使用。 然后有个牛逼大神说这个ListView不ok。要我对自己的公众号内容负责。我还以为有什么严重的bug，其实是打断了合批操作。对于官方提供的ListViewCtr的操作方式肯定会打断合批的 !不过对于一些简单的需求，比如我上次文章中
Cocos2dx学习之---TableView实现二级菜单
Coding
04-27 2663
上周在公司的项目中实现了一个gongn
CocosCreator开发笔记(5)-ScrollView之动态更新的优化原理
楚游香的博客
01-19 1万+
ScrollView是比较常用的UI组件之一，游戏中的任务榜、排行榜都少不了它，实际使用中存在一个问题，例如：在排行榜中要显示前100名玩家，如果真的把这100名玩家的信息全部创建，并加载进ScrollView，对移动设备的宝贵内存会是巨大的浪费。其实玩家在屏幕上总能看到的最多只有7、8项而已，所以实际上只用创建比显示多一点的数量，再通过缓冲区实时动态更新数据，就可以给玩家呈现出尽可能多数量的列表...
cocos creator滑动列表
最新发布
10-17
在 Cocos Creator 中，可以使用 ScrollView 组件来实现滑动列表的功能。具体步骤如下： 1. 在场景中创建一个 ScrollView 节点，并设置它的大小和位置。 2. 在 ScrollView 节点下创建一个 Content 节点，并设置它的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值