cocos2d-x 菜鸟学习笔记七（界面控件之scrollView与tableView）

在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的代理，看下面的代码：

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