TableView和ListView的使用

在游戏中，我们经常看到一些用来展示好友的列表或者展示一些道具的列表，如下图：

在这里，我们就来学学这种控件列表是如何使用的。

1.TableView

TabelView包含在cocos-ext.h头文件中，所以使用时要把它包含进来，同时声明其命名空间USING_NS_CC_EXT;

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
#include "cocos-ext.h"
using namespace std;
USING_NS_CC_EXT;
class HelloWorld : public cocos2d::Layer,public TableViewDataSource,public TableViewDelegate
{
public:
    
    
    static cocos2d::Scene* createScene();

    virtual bool init();

    void menuCloseCallback(cocos2d::Ref* pSender);

    //滚动的时候会调用(可选)
    virtual void scrollViewDidScroll(ScrollView* view);
    //缩放的时候会调用(可选)
    virtual void scrollViewDidZoom(ScrollView* view);
    //点击条目时回调
    virtual void tableCellTouched(cocos2d::extension::TableView* table, cocos2d::extension::TableViewCell* cell);
    //Cell就是每一个条目，这个函数是设置cell的大小
    virtual cocos2d::Size tableCellSizeForIndex(cocos2d::extension::TableView *table, ssize_t idx);
    //添加Cell，每个cell的样式通过该函数创建并且返回
    virtual cocos2d::extension::TableViewCell* tableCellAtIndex(cocos2d::extension::TableView *table, ssize_t idx);
    //设置Cell个数
    virtual ssize_t numberOfCellsInTableView(cocos2d::extension::TableView *table);
    CREATE_FUNC(HelloWorld);
    
    
    
};

#endif // __HELLOWORLD_SCENE_H__

让使用TableView的类去继承TableViewDataSource和TableViewDelegate，因为这两个类是纯虚函数，所以必须去实现它们的一些函数，这些函数也是TabelView的监听函数和创建是所需的函数(例如cell大小，数目，所显示的内容)，到时候给TabelView设置委托的时候，只需把this传递进去，就OK了。(学过安卓的朋友可能更加容易理解，安卓中称为ListView，创建ListView需要给他设置适配器，适配器类中的一些抽象方法由开发者自己实现，即编写自己的适配器，适配器中的方法仍然和上面一样，有设置条目数目，所显示的内容等等，开发者只需创建一个类或者让当前类去继承它并实现这些抽象函数，再把适配器对象设置给ListView就行了)，所以在这里，我们的HelloWorld继承了TableViewDataSource和TableViewDelegate，本身也算得上是一个适配器了。

再来看看实现方面：

#include "HelloWorldScene.h"
#include "Hero.h"
USING_NS_CC;


Scene* HelloWorld::createScene()
{
    auto scene = Scene::create();
    
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}




bool HelloWorld::init()
{


    if ( !Layer::init() )
    {
        return false;
    }
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("pnglist/galleryLayer.plist");
    auto winSize=Director::getInstance()->getWinSize();
  
    //创建TableView对象 参数是TableView控件的大小
    TableView* tableView = TableView::create(this,Size(440,winSize.height));
    tableView->setDirection(ScrollView::Direction::VERTICAL);//设置TableView方向
    tableView->ignoreAnchorPointForPosition(false);//是否忽略对锚点的设置 false为否
    tableView->setAnchorPoint(Vec2::ZERO);//设置锚点
    tableView->setPosition(Vec2::ZERO);//设置位置

    //设置TableView的属性 TOP_DOWN 条目从上往下添加 BOTTOM_UP条目从下往上添加
    tableView->setVerticalFillOrder(TableView::VerticalFillOrder::TOP_DOWN);
    tableView->setDelegate(this);//设置委托 即设置了其回调和创建相关函数
    this->addChild(tableView);
    tableView->reloadData();//更新数据

    return true;
}
//scrollview滚动的时候会调用
void HelloWorld::scrollViewDidScroll(ScrollView* view)
{
    
}
//scrollview缩放的时候会调用
void HelloWorld::scrollViewDidZoom(ScrollView* view)
{
    
}

//条目点击事件
void HelloWorld::tableCellTouched(cocos2d::extension::TableView* table, cocos2d::extension::TableViewCell* cell)
{

    //table  TableView本省

    //cell 为被点击的条目

    //to do some thing
}
Size HelloWorld::tableCellSizeForIndex(cocos2d::extension::TableView *table, ssize_t idx)//Cell大小
{
    return Size(440, 187);
}
TableViewCell* HelloWorld::tableCellAtIndex(cocos2d::extension::TableView *table, ssize_t idx)//添加Cell
{

    //获取之前的cell
    TableViewCell* cell = table->dequeueCell();

    //如果为空，则创建
    if(!cell)
    {
        cell = new TableViewCell();
        cell->autorelease();
    }
    cell->removeAllChildrenWithCleanup(true);
    Sprite* sprNormal;
    sprNormal->setAnchorPoint(Vec2::ZERO);
    sprNormal->setPosition(Vec2::ZERO);
    cell->addChild(sprNormal);
    return cell;
}

//设置cell个数
ssize_t HelloWorld::numberOfCellsInTableView(cocos2d::extension::TableView *table)
{
    return 5;
}

2.ListView

使用ListView所需头文件和命名控件

#include "cocos-ext.h"
#include "ui/CocosGUI.h"
using namespace ui;

创建ListView

void PhotoGalleryLayer::addListView()
{
   //创建ListView
    auto listView=ListView::create();
    //设置ListView方向 垂直
    listView->setDirection(ListView::Direction::VERTICAL);
    //可触摸交互
    listView->setTouchEnabled(true);
    //反弹
    listView->setBounceEnabled(true);
    //大小
    listView->setSize(Size(445, 500));
    //是否忽略size使用Texture size
    listView->ignoreContentAdaptWithSize(false);
    listView->setAnchorPoint(Vec2::ZERO);
    listView->setPosition(Vec2(0,120));
    //监听事件
    listView->addEventListener(CC_CALLBACK_2(PhotoGalleryLayer::selectedItemEvent, this));
    //创建ListView所需条目
    
    /*第一参数：默认状态下图片 第二参数：选择状态下图片
      第三参数：禁用状态下图片 第四参数：所用资源是plist文件还是本地图片
     Button::TextureResType::PLIST为plist Button::TextureResType::LOCAL为本地*/
    Button* wood_item = Button::create("Cell_0.png", "CellSel_0.png", "", Button::TextureResType::PLIST);
    Button* lion_item = Button::create("Cell_1.png", "CellSel_1.png", "", Button::TextureResType::PLIST);
    Button* stone_item = Button::create("Cell_2.png", "CellSel_2.png", "", Button::TextureResType::PLIST);
    Button* unKnow_item = Button::create("Cell_3.png", "CellSel_3.png", "", Button::TextureResType::PLIST);
    //添加条目
    listView->pushBackCustomItem(wood_item);
    listView->pushBackCustomItem(lion_item);
    listView->pushBackCustomItem(stone_item);
    listView->pushBackCustomItem(unKnow_item);
    this->addChild(listView);
}

以上是把Button作为ListView的Item，Item可以根据你所要展示的内容自定义设置，可以是一个Layer里面包含各种控件，可以显示图片，文字等等，最后再把Layer作为Item设置给ListView。

ListView条目点击回调函数

void PhotoGalleryLayer::selectedItemEvent(Ref* ref,ListView::EventType type)
{
    //开始点击
    if(type==ListView::EventType::ON_SELECTED_ITEM_START)
    {
        auto listView=(ListView*)ref;
        //当前显示条目的下标  从0开始，表示第一个条目
        auto idnex=listView->getCurSelectedIndex();
        switch (idnex) {
            case 0:

                //第一个条目被点击

                break;
            case 1:

                //第一个条目被点击

                break;

         }

     }

}

效果如下图所示：