cocos2d-x 菜鸟学习笔记七(界面控件之scrollView与tableView)
2013-05-25 18:53
585 查看
在cocos2d-x中集成了一些扩展插件,这些引用文件都可以在cocos2d-x目录下的extentions下找到,其中常用的scrollView和tableView的引用文件在GUI目录下。scrollView常用于大尺寸图片或者大区域无限制地显示内容(也就是说不需要对齐内容),tableView常用于大量数据的排列展示,特别是需要一些对齐格式的内容,其中scrollView只在cocosbuilder示例里展示了,但因为引用的是cocosbuilder生成的外部数据,所以没有具体的示例参考。要说cocosbuilder的话,它是一个可视化的编辑器,就如同上个月出的cocostudio一样,可以通过这样的编辑器编辑场景,然后生成一个包含了场景信息的文件,供cocos2d读取并引用,这些工具就不说了,现在cocostudio还不成熟,想了解的话可以自己去这个网址下来用下,已经有些教程了:http://www.cocostudio.org/
由于扩展的控件调用的都是lib库,所以,在使用之前,必须将库与项目关联起来,所以需要右击工程项目->属性->链接器->输入->附加依赖项,然后手动在列表里输入库的名称,这里要用到的是libExtensions.lib,如果还缺少其它的库就自己看下差哪个加上就行……要不然编译的时候很可能出现错误。
scrollView继承的是CCLayer,用的时候需要一个容器,在最近的版本里,scrollView的处理已经“自动化”,可以说是被当作一个精灵直接装载入容器再被加入到场景中来使用的,最方便的方式是按照官方原例中tableView的方式来载入,即创建这个作为窗口的层时同时加载scrollView进入这个层,并让这个层作为scrollView的代理,看下面的代码:
上面这个层当然也要创建并加入场景中才能显示,和其它层一样,在创建场景的时候加个创建代码即可。
然后看看tableView,顾名思义,这就是表格视图了,它继承于CCScrollView,在其上扩展出了具有表格视图的功能,其作用在于规范元素的显示格式,主要用于对齐元素,并且可以通过单元格索引响应点击事件,也就是说既可以尽情地scroll,也可以响应元素对应单元格的点击事件,真是完美的兼容……不像scrollView一样,放个按钮在上面时点按钮是没法拖动视图的,需要设置层响应的优先级……下面是从官方原例中抽出来的代码:
其实用法差不多吧,只是tableView的使用流程稍微麻烦一点,最后要说的就是,在使用这些扩展插件时要包含的文件是#include "cocos-ext.h"以及宏USING_NS_CC_EXT;这里是原代码下载地址 :http://download.csdn.net/detail/cyistudio/5449709
由于扩展的控件调用的都是lib库,所以,在使用之前,必须将库与项目关联起来,所以需要右击工程项目->属性->链接器->输入->附加依赖项,然后手动在列表里输入库的名称,这里要用到的是libExtensions.lib,如果还缺少其它的库就自己看下差哪个加上就行……要不然编译的时候很可能出现错误。
scrollView继承的是CCLayer,用的时候需要一个容器,在最近的版本里,scrollView的处理已经“自动化”,可以说是被当作一个精灵直接装载入容器再被加入到场景中来使用的,最方便的方式是按照官方原例中tableView的方式来载入,即创建这个作为窗口的层时同时加载scrollView进入这个层,并让这个层作为scrollView的代理,看下面的代码:
class testScrollView:public cocos2d::CCLayer, public cocos2d::extension::CCScrollViewDelegate{ public: virtual bool init(); CREATE_FUNC(testScrollView); virtual void scrollViewDidScroll(cocos2d::extension::CCScrollView* view) {}; virtual void scrollViewDidZoom(cocos2d::extension::CCScrollView* view) {} cocos2d::extension::CCScrollView* tScrollView; };
bool testScrollView::init() { if ( !CCLayer::init() ) { return false; } CCSize winSize = CCDirector::sharedDirector()->getWinSize(); //这里是在容器层testScrollView里创建scrollView的实例 tScrollView=CCScrollView::create(); //设定scrollView的内容尺寸,比如说这里面只是要放一个100x100尺寸的图片,就按下面这样设定 tScrollView->setContentSize(CCSize(100,100)); // 设置滚屏属性,这里设置的是两个方向随便拉,其它参数自己看源码 tScrollView->setDirection(kCCScrollViewDirectionBoth); //这位置我是随便设定的,需要的自己改 tScrollView->setPosition(CCPointZero); addChild(tScrollView); this->setContentSize(CCSize(150,150)); // 我是在scrollView里放了个菜单按钮 CCMenuItemImage *itemBack = CCMenuItemImage::create("Icon.png", "Icon.png",this, menu_selector(testScrollView::toExtensionsMainLayer)); itemBack->setPosition(ccp(150, 25)); CCMenu *menuBack = CCMenu::create(itemBack, NULL); menuBack->setPosition(CCPointZero); tScrollView->addChild(menuBack); return true; } void testScrollView::toExtensionsMainLayer(cocos2d::CCObject *sender) { }
上面这个层当然也要创建并加入场景中才能显示,和其它层一样,在创建场景的时候加个创建代码即可。
然后看看tableView,顾名思义,这就是表格视图了,它继承于CCScrollView,在其上扩展出了具有表格视图的功能,其作用在于规范元素的显示格式,主要用于对齐元素,并且可以通过单元格索引响应点击事件,也就是说既可以尽情地scroll,也可以响应元素对应单元格的点击事件,真是完美的兼容……不像scrollView一样,放个按钮在上面时点按钮是没法拖动视图的,需要设置层响应的优先级……下面是从官方原例中抽出来的代码:
class TableViewTestLayer : public cocos2d::CCLayer, public cocos2d::extension::CCTableViewDataSource, public cocos2d::extension::CCTableViewDelegate { public: virtual bool init(); void toExtensionsMainLayer(CCObject *sender); CREATE_FUNC(TableViewTestLayer); virtual void scrollViewDidScroll(cocos2d::extension::CCScrollView* view) {}; virtual void scrollViewDidZoom(cocos2d::extension::CCScrollView* view) {} //单元格点击事件 virtual void tableCellTouched(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell); //单元格尺寸设定 virtual cocos2d::CCSize cellSizeForTable(cocos2d::extension::CCTableView *table); //单元格索引 virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx); //单元格数量设定 virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table); }; //单元格节点 class CustomTableViewCell : public cocos2d::extension::CCTableViewCell { public: virtual void draw(); };
bool TableViewTestLayer::init() { if ( !CCLayer::init() ) { return false; } CCSize winSize = CCDirector::sharedDirector()->getWinSize(); CCTableView* tableView = CCTableView::create(this, CCSizeMake(250, 60)); tableView->setDirection(kCCScrollViewDirectionHorizontal); tableView->setPosition(ccp(20,winSize.height/2-30)); tableView->setDelegate(this); this->addChild(tableView); tableView->reloadData(); tableView = CCTableView::create(this, CCSizeMake(60, 250)); tableView->setDirection(kCCScrollViewDirectionVertical); tableView->setPosition(ccp(winSize.width-150,winSize.height/2-120)); tableView->setDelegate(this); tableView->setVerticalFillOrder(kCCTableViewFillTopDown); this->addChild(tableView); tableView->reloadData(); // Back Menu CCMenuItemFont *itemBack = CCMenuItemFont::create("Back", this, menu_selector(TableViewTestLayer::toExtensionsMainLayer)); itemBack->setPosition(ccp(50, 25)); CCMenu *menuBack = CCMenu::create(itemBack, NULL); menuBack->setPosition(CCPointZero); addChild(menuBack); return true; } void TableViewTestLayer::toExtensionsMainLayer(cocos2d::CCObject *sender) { } void TableViewTestLayer::tableCellTouched(CCTableView* table, CCTableViewCell* cell) { //点击单元格时输出一个包含被点击单元格索引号的日志 CCLOG("cell touched at index: %i", cell->getIdx()); } CCSize TableViewTestLayer::cellSizeForTable(CCTableView *table) { //设定单元格的大小 return CCSizeMake(60, 60); } CCTableViewCell* TableViewTestLayer::tableCellAtIndex(CCTableView *table, unsigned int idx) { //在这里产生自定义的单元格及内容 CCString *string = CCString::createWithFormat("%d", idx); CCTableViewCell *cell = table->dequeueCell(); if (!cell) { cell = new CustomTableViewCell(); cell->autorelease(); CCSprite *sprite = CCSprite::create("Icon.png"); sprite->setAnchorPoint(CCPointZero); sprite->setPosition(ccp(0, 0)); cell->addChild(sprite); CCLabelTTF *label = CCLabelTTF::create(string->getCString(), "Helvetica", 20.0); label->setPosition(CCPointZero); label->setAnchorPoint(CCPointZero); label->setTag(123); cell->addChild(label); } else { CCLabelTTF *label = (CCLabelTTF*)cell->getChildByTag(123); label->setString(string->getCString()); } return cell; } unsigned int TableViewTestLayer::numberOfCellsInTableView(CCTableView *table) { //返回了20个单元格 return 20; } void CustomTableViewCell::draw() { CCTableViewCell::draw(); // draw bounding box // CCPoint pos = getPosition(); // CCSize size = CCSizeMake(178, 200); // CCPoint vertices[4]={ // ccp(pos.x+1, pos.y+1), // ccp(pos.x+size.width-1, pos.y+1), // ccp(pos.x+size.width-1, pos.y+size.height-1), // ccp(pos.x+1, pos.y+size.height-1), // }; // ccDrawColor4B(0, 0, 255, 255); // ccDrawPoly(vertices, 4, true); }
其实用法差不多吧,只是tableView的使用流程稍微麻烦一点,最后要说的就是,在使用这些扩展插件时要包含的文件是#include "cocos-ext.h"以及宏USING_NS_CC_EXT;这里是原代码下载地址 :http://download.csdn.net/detail/cyistudio/5449709
相关文章推荐
- Cocos2d-x学习笔记(八)-------->TableView控件
- cocos2d-x 菜鸟学习笔记六(界面控件之MenuItem)
- cocos2d-x 菜鸟学习笔记八(界面控件之CCControl控件)
- IOS学习笔记 -- scrollView和tableView整理
- 第二章、小控件实例 tableview,button(iOS学习笔记,从零开始。)
- Cocos2d-x 3.2 学习笔记(十)Joystick 搖杆控件
- cocos2djs学习笔记-ccui.ScrollView
- ASP.NET控件学习笔记之ViewState
- 菜鸟学习日志3.界面控件的设置
- IOS 学习笔记(9)tableView基础
- cocos2d-x 学习笔记(3)cocos2d-x 创建基本控件 及小动画
- Cocos2d-x学习笔记(14)(更新函数scheduleUpdate、进度计时器CCProgressTo、滚动视图CCScrollView)
- iOS学习笔记--tableView中如何获取cell上textfiled的值
- cocos2d-x 菜鸟学习笔记十四(简单的碰撞检测 进阶篇)
- ((ios开发学习笔记九)) Simple TableView 实现(附 实例源码)
- cocos2d-x 菜鸟学习笔记十五(简单的碰撞检测 实践篇 上)
- QT学习笔记之QT5 + VS2013/VS2015 中文乱码解决办法以及ListView,TableView,TreeView的基本用法
- 安卓学习笔记--- Android自定义View(CustomCalendar-定制日历控件)
- 安卓学习笔记---ScrollView中嵌套recycleView 出现的不显示,显示不全,终极解决方案
- [Android新手学习笔记11]-UI控件之TextView