Cocos2d-x 3.4 TableView

Cocos2d-x 3.4 TableView

 

 

 

A long time ago I want to do this kind of ScrollView stuff, In the cocos2d-x to the heap template, found this effect, deliberately to learn,

I also read some books and posted more than N websites, and found that most of them are 2. x versions,

Specially sorted the version 3.x

 

 

1. What is TableView?

This is an example of the rankings of many games after the conclusion. For example, there are 20 contents in the rankings. However, due to limited windows, you cannot display them all, so you can portrait like a scroll bar (or horizontal) pulling stuff.

This is also different from ListView and PageView,

? Compared with ListView

I have never used ListView before, and I haven't found much online information. Let's talk about the biggest difference.

Each unit in ListView is called an item, and each unit in TableView is called a cell. If 20 units are created separately, only 5 units can be displayed at a time. When a ListView is created, 20 items are directly created, while TableView creates only 5 cells, which are repeatedly used in the queue. You don't need to talk about the advantages of doing so.

? Compared with PageView

I think the difference is that when we use TableView, the sliding distance is not fixed, that is, the sliding distance is difficult to fix, and it is often accompanied by an offset, for example, when you move your hand down, it will continue to draw down (just like there is inertia ).

PageView is different. If you slide down, for example, from Number 1 to the half of number 3, it will determine whether it finally slides to 3 or 4. Just as you do, you can't flip half of the book, either by no means.

 

 

 

Ii. Use of TableView

1. First, you must know the header file and namespace.

 

#include cocos2d.h#include cocos-ext.hUSING_NS_CC;USING_NS_CC_EXT;

 

There are also inherited proxy classes

 

class HelloWorld : public Layer,TableViewDataSource,TableViewDelegate{};

 

 

I directly display TableView in this class, so it also inherits Layer

 

 

2. required functions

 

/* Required functions * // This method is triggered when sliding tableview. The parameter is the current tableview object virtual void scrollViewDidScroll (ScrollView * view ){}; // This method is triggered when tableview is zoomed in or out. The parameter is the virtual void scrollViewDidZoom (ScrollView * view) of the current tableview object) {} // this method is called when the cell is clicked. The parameter is the current tableview object and the virtual void tableCellTouched (TableView * table, TableViewCell * cell) of the clicked cell object ); // set the Cell Size of tableview to virtual Size tableCellSizeForIndex (TableView * table, ssize_t idx); // obtain the cellvirtual TableViewCell * tableCellAtIndex (TableView * table, ssize_t idx) numbered idx ); // set the number of cells in tableview. virtual ssize_t numberOfCellsInTableView (TableView * table );

 

In the init function of the scenario, create TableView:

 

VisibleSize = Director: getInstance ()-> getVisibleSize (); // create a talbleview and set datasource as the display area of the tableview object of the current class to 300 * 300TableView * tableView = TableView: create (this, CCSizeMake (300,300 )); // set tableview to HORIZONTAL ScrollView: Direction: VERTICAL to VERTICAL, ScrollView: Direction: HORIZONTAL to HORIZONTAL tableView-> setDirection (ScrollView: Direction: VERTICAL ); // set the position tableView-> setPosition (Vec2 (visibleSize. width/2, visibleSize. height/3); // sets the proxy object tableView-> setDelegate (this); // fills in the order tableView-> setVerticalFillOrder (TableView: VerticalFillOrder: TOP_DOWN ); // Add tableview to current layerthis-> addChild (tableView); // load tableviewtableView-> reloadData ();

 

Then there is the definition of other functions:

 

// When the cell is clicked, call cell-> getIdx () to obtain the number of the currently clicked cell void HelloWorld: tableCellTouched (TableView * table, TableViewCell * cell) {// print out the current cell number CCLOG (cell touched at index: % I, cell-> getIdx () in the output window ());} // set the Size of the cell numbered idx to 100*100 Size HelloWorld: tableCellSizeForIndex (TableView * table, ssize_t idx) {return CCSizeMake (100,100 );} // because tableview dynamically acquires data, this method will be called once during initialization, and TableViewCell * HelloWor will be called when each hidden cell is displayed. Ld: tableCellAtIndex (TableView * table, ssize_t idx) {CCString * string = CCString: createWithFormat (% d, idx ); // retrieve a cell from the reuse queue and determine whether the cell is empty or not. Then, create a new TableViewCell * cell = table-> dequeueCell (); if (! Cell) {// create a new cell = new TableViewCell (); // Add it to the automatically released pool cell-> autorelease (); // create an image sprite * sprite = CCSprite: create(Icon.png); // set sprite-> setAnchorPoint (Vec2: ZERO) in the lower left corner of the sprite ); // set the sprite position to the relative position sprite-> setPosition (Vec2 () in the cell; // Add the sprite to the cell-> addChild (sprite ); // create a label LabelTTF * label = LabelTTF: create (string-> getCString (), Helvetica, 20.0 ); // set the label relative to the cell location label-> setPosition (Vec2: ZERO); // set the label anchorpoint to the lower left corner label-> setAnchorPoint (Vec2: ZERO ); // tag the label to be obtained when the cell is removed from the reuse queue and reset the label information label-> setTag (123 ); // Add the label to the cell. cell-> addChild (label);} else {// if the cell is not empty, the elements stored in the cell are obtained based on the tag, reset the Element Information and // obtain the label LabelTTF * label = (LabelTTF *) cell-> getChildByTag (123) in the current cell ); // reset the label information label-> setString (string-> getCString ();} return cell ;} // set the number of cells, that is, a tableview contains 20 cellssize_t HelloWorld: numberOfCellsInTableView (TableView * table) {return 20 ;}

 

The above code comment is so detailed that we will not talk about it more,

Some other functions that can be selected are not provided here. You can query and try them in the API.

PS: 3.4 English version API offline download-> here

 

 

 

Iii. Problems and Solutions

I encountered a lot of problems during the test. Here, if you encounter the same problems as me, you can solve them.

I am using the environment is cocos2d-x 3.4 + Win7 + VS2012

 

1. header files and inheritance classes

During the test, I read a lot of books and materials, but they are both 2.x versions, so there are many differences.

For example, the header file is not required # include extensions/cocos-ext.h

Now it is much more convenient, just # include the cocos-ext.h on the line

Do not forget the namespace USING_NS_CC_EXT,

In particular, the two inherited proxy classes TableViewDataSource and TableViewDelegate are both public-inherited.

In addition, there is no need to add, reference, or include paths to a project, and it has been optimized.

 

2. Coordinate ccp (0, 0)

This is also caused by version problems.

If it appears at setPosition (coordinate point), it can still pass through; but if it appears at setAnchorPoint (anchorpoint), it will have an Error.

3. x is changed to Vec. For example, ccp () is Vec2)

If it is an anchor, you can also use Vec2: ZERO

 

3. About ssize_t

After reading the code of previous versions, all unsigned int values are changed to ssize_t.

So the question is, who is ssize_t?

Tracking the source, in CCstd. h:

 

#ifndef __SSIZE_T#define __SSIZE_Ttypedef SSIZE_T ssize_t;#endif // __SSIZE_T

 

Then proceed to the search, in BASETSD. H:

 

//// SIZE_T used for counts or ranges which need to span the range of// of a pointer.  SSIZE_T is the signed variation.//typedef UINT_PTR SIZE_T, *PSIZE_T;typedef INT_PTR SSIZE_T, *PSSIZE_T;

 

It probably means that SIZE_T is usually used to count or to move a pointer. SSIZE_T is a variable with positive and negative values.

I think size_t is used as unsigned int, and ssize_t is used as int.

It is a little urgent to understand English. If the translation is wrong, please translate it.

 

4. About ction

 

tableView->setDirection(ScrollView::Direction::VERTICAL);

It is used here.

Previous versions are

Kccscrollviewdirehorhorizontal is horizontal, and kCCScrollViewDirectionVertical is vertical

It's already used.

ScrollView: Direction: VERTICAL is VERTICAL, ScrollView: Direction: HORIZONTAL is HORIZONTAL

 

The last question is about many class names, which is caused by version updates. The CC in front of many classes is removed.