CATableView（表單視圖）

類說明 

CATableView 主要用于生成列表，在table中展示數(shù)據(jù)，是一個一維的表，可以讓用戶能通過分層的數(shù)據(jù)進行導航，表可以是靜態(tài)的或者動態(tài)的，可通過 dataSource 協(xié)議和 delegate 協(xié)議可以實現(xiàn)很多的個性化定制，即便擁有大量數(shù)據(jù)也非常有效率。CATableView只能有一列數(shù)據(jù)(cell)，且只支持縱向滑動。

我們先了解一下CATableView的界面構成，CATableView主要是由兩級目錄構成Selection級和Cell級。如圖所示，一個CATableView包含一個或多個Selection，一個Selection包含一個或多個Cell，這樣就構成了CATableVIew的層級表示圖。

CATableView的使用方法和CAListView比較類似，我們也要分別使用：CATableView、CATableViewCell、CATableViewDelegate、CATableViewDataSource來構建。
CATableView是表格視圖的容器，是容器的載體。
CATableViewCell是表格視圖的一個單元（本節(jié)后面簡稱cell）。
CATableViewDelegate是交互代理，響應cell選中和取消狀態(tài)。
CATableViewDataSource是數(shù)據(jù)代理，設置Selection個數(shù)及Selection包含cell個數(shù)。

CATableView 屬性（點擊查看方法介紹）

CATableView 方法（點擊查看方法介紹）

CATableViewCell 屬性（點擊查看方法介紹）

CATableViewCell 方法（點擊查看方法介紹）

CATableViewDelegate 方法（點擊查看方法介紹）

CATableViewDataSource 方法（點擊查看方法介紹）

我們本節(jié)也使用CATableView來實現(xiàn)一個簡單的表單視圖，首先我們需要新建一個Class，命名為：MyTableViewCell并繼承CATableViewCell。代碼示例如下：

文件CATableViewCell.h

#ifndef _My_TableViewCell_h_
#define _My_TableViewCell_h_
#include <iostream>
#include "CrossApp.h"
USING_NS_CC;
class MyTableViewCell:public CATableViewCell
{
public:
    MyTableViewCell();
    virtual ~MyTableViewCell();
     
    //創(chuàng)建MyTableViewCell
    static MyTableViewCell* create(const std::string& identifier, const DRect& _rect = DRectZero);
     
public:
    //初始化
    void initWithCell();
     
    //按鈕的回調函數(shù)
    void cellBtnCallback(CAControl* btn, DPoint point);
protected:
     
    //正常狀態(tài)下調用
    virtual void normalTableViewCell();
     
    //高亮狀態(tài)下調用
    virtual void highlightedTableViewCell();
     
    //選擇狀態(tài)下調用
    virtual void selectedTableViewCell();
     
    //禁用狀態(tài)下調用
    virtual void disabledTableViewCell();
     
    //恢復狀態(tài)下調用
    virtual void recoveryTableViewCell();
};
#endif

文件CATableViewCell.cpp

#include "MyTableViewCell.h"
MyTableViewCell::MyTableViewCell()
{
}
MyTableViewCell::~MyTableViewCell()
{
}
MyTableViewCell* MyTableViewCell::create(const std::string& identifier, const DRect& _rect)
{
    //創(chuàng)建
    MyTableViewCell* tableViewCell = new MyTableViewCell();
    if(tableViewCell&&tableViewCell->initWithReuseIdentifier(identifier))
    {
        tableViewCell->setFrame(_rect);
        tableViewCell->autorelease();
        return tableViewCell;
    }
    CC_SAFE_DELETE(tableViewCell);
    return NULL;
}
void MyTableViewCell::initWithCell()
{
    //Cell的大小
    DSize m_size = this->getFrame().size;
     
    //創(chuàng)建CALabel
    CALabel* cellText = CALabel::createWithCenter(DRect(m_size.width*0.1, m_size.height*0.5, m_size.width*0.3, m_size.height*0.8));
     
    //設置tag
    cellText->setTag(100);
     
    //設置字體大小
    cellText->setFontSize(_px(30));
     
    //設置中心對齊
    cellText->setTextAlignment(CATextAlignmentCenter);
    cellText->setVerticalTextAlignmet(CAVerticalTextAlignmentCenter);
     
    //添加到當前cell
    this->addSubview(cellText);
     
    //創(chuàng)建CAButton
    CAButton* btnOnCell = CAButton::createWithCenter(DRect(m_size.width*0.85, m_size.height*0.5, m_size.width*0.2, m_size.height*0.7), CAButtonTypeRoundedRect);
     
    //設置tag
    btnOnCell->setTag(102);
     
    //設置顯示文本
    btnOnCell->setTitleForState(CAControlStateAll, "Touch");
     
    //添加回調監(jiān)聽
    btnOnCell->addTarget(this, CAControl_selector(MyTableViewCell::cellBtnCallback), CAControlEventTouchUpInSide);
     
    //添加到cell
    this->addSubview(btnOnCell);
}
void MyTableViewCell::cellBtnCallback(CAControl* btn, DPoint point)
{
    //按鈕被點擊時打印log
    CCLog("MyTableViewCell::cellBtnCallback-->");
}
void MyTableViewCell::normalTableViewCell()
{
    //改變背景顏色
    this->setBackgroundView(CAView::createWithColor(CAColor_white));
}
void MyTableViewCell::highlightedTableViewCell()
{
    //改變背景顏色
    this->setBackgroundView(CAView::createWithColor(CAColor_gray));
}
void MyTableViewCell::selectedTableViewCell()
{
    //改變背景顏色
    this->setBackgroundView(CAView::createWithColor(CAColor_orange));
}
void MyTableViewCell::disabledTableViewCell()
{
    //改變背景顏色
    this->setBackgroundView(CAView::createWithColor(CAColor_black));
}
void MyTableViewCell::recoveryTableViewCell()
{
    //改變背景顏色
    this->setBackgroundView(CAView::createWithColor(CAColor_blue));
}

我們創(chuàng)建了cell之后，就在FirstViewController實現(xiàn)CATableViewDelegate和CATableViewDataSource這兩個代理，那么FirstViewController.h的內容如下：

#ifndef __HelloCpp__ViewController__
#define __HelloCpp__ViewController__
#include <iostream>
#include "CrossApp.h"
#include "MyTableViewCell.h"
USING_NS_CC;
class FirstViewController: public CAViewController , public CATableViewDataSource ,public CATableViewDelegate
{
     
public:
    FirstViewController();
     
    virtual ~FirstViewController();
     
public:
    //選中cell時觸發(fā)
    virtual void tableViewDidSelectRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row);
     
    //取消選中cell時觸發(fā)
    virtual void tableViewDidDeselectRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row);
     
    //獲取對應的section所包含的cell個數(shù)
    virtual unsigned int numberOfRowsInSection(CATableView *table, unsigned int section);
     
    //獲取tableview包含的section個數(shù)
    virtual unsigned int numberOfSections(CATableView *table);
     
    //獲得指定cell
    virtual CATableViewCell* tableCellAtIndex(CATableView* table, const DSize& cellSize, unsigned int section, unsigned int row);
     
    //設置section的頭部
    virtual CAView* tableViewSectionViewForHeaderInSection(CATableView* table, const DSize& viewSize, unsigned int section);
     
    //設置section的尾部
    virtual CAView* tableViewSectionViewForFooterInSection(CATableView* table, const DSize& viewSize, unsigned int section);
     
    //獲取指定的cell高度
    virtual unsigned int tableViewHeightForRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row);
     
    //獲得指定的section的header vier的高度
    virtual unsigned int tableViewHeightForHeaderInSection(CATableView* table, unsigned int section);
     
    //獲得指定的section的footer view的高度
    virtual unsigned int tableViewHeightForFooterInSection(CATableView* table, unsigned int section);
     
protected:
     
    void viewDidLoad();
     
    void viewDidUnload();
     
};
#endif /* defined(__HelloCpp__ViewController__) */

然后我們在FirstViewController.cpp中實現(xiàn)表格視圖如下:

#include "FirstViewController.h"
FirstViewController::FirstViewController()
{
}
FirstViewController::~FirstViewController()
{
}
void FirstViewController::viewDidLoad()
{
    DSize size = this->getView()->getBounds().size;
    CATableView* p_TableView = CATableView::createWithCenter(DRect(size.width*0.5, size.height*0.5, size.width, size.height));
    p_TableView->setTableViewDataSource(this);
    p_TableView->setTableViewDelegate(this);
    p_TableView->setAllowsSelection(true);
    p_TableView->setAllowsMultipleSelection(true);
    p_TableView->setSeparatorColor(CAColor_clear);
    this->getView()->addSubview(p_TableView);
}
void FirstViewController::viewDidUnload()
{
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}
void FirstViewController::tableViewDidSelectRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row)
{
}
void FirstViewController::tableViewDidDeselectRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row)
{
}
CATableViewCell* FirstViewController::tableCellAtIndex(CATableView* table, const DSize& cellSize, unsigned int section, unsigned int row)
{
    DSize _size = cellSize;
     
    //根據(jù)標識獲得cell
    MyTableViewCell* cell = dynamic_cast<MyTableViewCell*>(table->dequeueReusableCellWithIdentifier("CrossApp"));
     
    //如果沒有找到cell
    if (cell == NULL)
    {
        //創(chuàng)建一個
        cell = MyTableViewCell::create("CrossApp", DRect(0, 0, _size.width, _size.height));
         
        //調用cell的初始化
        cell->initWithCell();
    }
    //如果是section為1的情況
    if (section == 1)
    {
        //根據(jù)tag獲得CAButton
        CAButton* cellBtn = (CAButton*)cell->getSubviewByTag(102);
         
        //隱藏按鈕
        cellBtn->setVisible(false);
    }
    else
    {
        //根據(jù)tag獲得CAButton
        CAButton* cellBtn = (CAButton*)cell->getSubviewByTag(102);
         
        //顯示按鈕
        cellBtn->setVisible(true);
    }
    string order = crossapp_format_string("cell-%d",row);
     
    //根據(jù)tag獲得CALabel
    CALabel* cellText = (CALabel*)cell->getSubviewByTag(100);
     
    //設置文本顯示
    cellText->setText(order);
    return cell;
}
CAView* FirstViewController::tableViewSectionViewForHeaderInSection(CATableView* table, const DSize& viewSize, unsigned int section)
{
    CCLog("Header-->");
    string head = crossapp_format_string("Selection-%d", section);
     
    //創(chuàng)建Section頭部視圖
    CAView* view = CAView::createWithColor(CAColor_gray);
    DSize _size = viewSize;
    CALabel* header = CALabel::createWithCenter(DRect(_size.width*0.5, _size.height*0.5, _size.width*0.8, _size.height));
    header->setText(head);
    header->setFontSize(_px(30));
    header->setColor(CAColor_white);
    header->setTextAlignment(CATextAlignmentCenter);
    header->setVerticalTextAlignmet(CAVerticalTextAlignmentCenter);
    view->addSubview(header);
    return view;
}
CAView* FirstViewController::tableViewSectionViewForFooterInSection(CATableView* table, const DSize& viewSize, unsigned int section)
{
    CCLog("Footer-->");
    CAView* view = CAView::createWithColor(CAColor_white);
    return view;
}
unsigned int FirstViewController::numberOfRowsInSection(CATableView *table, unsigned int section)
{
    //cell數(shù)，從0計算。10表示0-9
    return 10;
}
unsigned int FirstViewController::numberOfSections(CATableView *table)
{
    //表格數(shù)，從0開始計算。4則表示0-3
    return 4;
}
unsigned int FirstViewController::tableViewHeightForRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row)
{
    //高度
    return _px(130);
}
unsigned int FirstViewController::tableViewHeightForHeaderInSection(CATableView* table, unsigned int section)
{
    //高度
    return _px(50);
}
unsigned int FirstViewController::tableViewHeightForFooterInSection(CATableView* table, unsigned int section)
{
    return 1;
}

這樣我們就構建了一個表格視圖，大家可以自己嘗試這用CATableVIew去實現(xiàn)一個微信的通信錄列表。

CATableView 屬性說明

TableViewDataSource

類型：CATableViewDataSource*

解釋：添加數(shù)據(jù)代理。set/get{}。

TableViewDelegate

類型：CATableViewDelegate*

解釋：添加交互代理。set/get{}。

TableHeaderView

類型：CAView*

解釋：添加頭部視圖。set/get{}。

TableFooterView

類型：CAView*

解釋：添加尾部視圖。set/get{}。

SeparatorColor

類型：CAColor4B

解釋：設置cell分割線的顏色。set/get{}。

TableHeaderHeight

類型：unsigned int

解釋：設置頭部視圖的高度。set/get{}。

TableFooterHeight

類型：unsigned int

解釋：設置尾部視圖的高度。set/get{}。

SeparatorViewHeight

類型：unsigned int

解釋：設置cell分割線的高度。set/get{}。

AllowsSelection

類型：bool

解釋：是否開啟cell選擇。is{}。

AllowsMultipleSelection

類型：bool

解釋：是否可以多選cell。is{}。

AlwaysTopSectionHeader

類型：bool

解釋：設置cell頂部的標題。is/set{}。

AlwaysBottomSectionFooter

類型：bool

解釋：設置cell底部的標題。is/set{}。

CATableView 方法說明

virtual void setAllowsSelection(bool var);

返回值：virtual void

參數(shù)：

解釋：是否開啟cell選擇

virtual void setAllowsMultipleSelection(bool var);

返回值：virtual void

參數(shù)：

解釋：是否可以多選cell

void setSelectRowAtIndexPath(unsigned int section, unsigned int row);

返回值：void

參數(shù)：

解釋：設置選中cell時調用

void setUnSelectRowAtIndexPath(unsigned int section, unsigned int row);

返回值：void

參數(shù)：

解釋：設置取消選中cell時調用

virtual void setShowsScrollIndicators(bool var);

返回值：virtual void

參數(shù)：

解釋：設置顯示滾動條

unsigned int getNumberOfSections();

返回值：unsigned int

參數(shù)：

解釋：獲取tableview包含的section個數(shù)

unsigned int getNumberOfRowsInSection(unsigned int section);

返回值：unsigned int

參數(shù)：

解釋：獲取對應的section所包含的cell個數(shù)

float getSectionHeightInSection(unsigned int section);

返回值：float

參數(shù)：

解釋：通過索引獲取section高度

float getSectionHeaderHeightInSection(unsigned int section);

返回值：float

參數(shù)：

解釋：通過section索引獲取section頂部的高度

float getSectionFooterHeightInSection(unsigned int section);

返回值：float

參數(shù)：

解釋：通過section索引獲取section底部的高度

float getRowHeightInSectionInRow(unsigned int section, unsigned int row);

返回值：float

參數(shù)：

解釋：通過索引cell高度獲取section和cell

static CATableView* createWithFrame(const DRect& rect);

返回值：static CATableView*

參數(shù)：

解釋：創(chuàng)建，并指定其Frame，默認Frame為(0,0,0,0)

static CATableView* createWithCenter(const DRect& rect);

返回值：static CATableView*

參數(shù)：

解釋：創(chuàng)建，并指定其Center，默認Center為(0,0,0,0)

virtual bool init();

返回值：virtual void

參數(shù)：

解釋：初始化

void reloadData();

返回值：void

參數(shù)：

解釋：重載數(shù)據(jù)

CATableViewCell* dequeueReusableCellWithIdentifier(const char* reuseIdentifier);

返回值：CATableViewCell*

參數(shù)：

解釋：可以重用單元標示符

CATableViewCell* cellForRowAtIndexPath(unsigned int section, unsigned int row);

返回值：CATableViewCell*

參數(shù)：

解釋：通過索引cell獲取Index路徑

virtual void switchPCMode(bool var);

返回值：virtual void

參數(shù)：

解釋：開關PC模式

virtual bool ccTouchBegan(CATouch *pTouch, CAEvent *pEvent);

返回值：virtual bool

參數(shù)：

解釋：觸摸事件開始時的回調函數(shù)

virtual void ccTouchMoved(CATouch *pTouch, CAEvent *pEvent);

返回值：virtual void

參數(shù)：

解釋：觸摸事件中觸點移動時的回調函數(shù)

virtual void ccTouchEnded(CATouch *pTouch, CAEvent *pEvent);

返回值：virtual void

參數(shù)：

解釋：觸摸事件結束時的回調函數(shù)

virtual void ccTouchCancelled(CATouch *pTouch, CAEvent *pEvent);

返回值：virtual void

參數(shù)：

解釋：觸摸非正常結束時的回調函數(shù)。（例如：電話或鎖屏）

virtual void mouseMoved(CATouch* pTouch, CAEvent* pEvent);

返回值：virtual void

參數(shù)：

解釋：鼠標移動

virtual void mouseMovedOutSide(CATouch* pTouch, CAEvent* pEvent);

返回值：virtual void

參數(shù)：

解釋：鼠標移出

CATableViewCell 屬性介紹

ContentView

類型：CAView*

解釋：內容視圖。get{}。

BackgroundView

類型：CAView*

解釋：背景視圖。set/get{}。

ReuseIdentifier

類型：std::string

解釋：重用標識符。set/get{}。

Section

類型：unsigned int

解釋：section。get{}。

Row

類型：unsigned int

解釋：cell。get{}。

ControlStateEffect

類型：bool

解釋：控制狀態(tài)。is/set{}。

AllowsSelected

類型：bool

解釋：允許選擇。is/set{}。

CATableViewCell 方法介紹

static CATableViewCell* create(const std::string& reuseIdentifier);

返回值：static CATableViewCell*

參數(shù)：

解釋：創(chuàng)建，默認Frame為(0,0,0,0)

virtual bool initWithReuseIdentifier(const std::string& reuseIdentifier);

返回值：virtual bool

參數(shù)：

解釋：重用標識符初始化

CATableViewDelegate 方法說明

virtual void tableViewDidSelectRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row);

返回值：virtual void

參數(shù)：

解釋：選中cell時調用

virtual void tableViewDidDeselectRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row);

返回值：virtual void

參數(shù)：

解釋：取消選擇cell時調用

CATableViewDataSource 方法說明

virtual CATableViewCell* tableCellAtIndex(CATableView* table, const DSize& cellSize, unsigned int section, unsigned int row);

返回值：virtual CATableViewCell*

參數(shù)：

解釋：獲取指定cell

virtual unsigned int tableViewHeightForRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row);

返回值：virtual unsigned int

參數(shù)：

解釋：獲取指定的cell高度

virtual unsigned int numberOfRowsInSection(CATableView* table, unsigned int section);

返回值：virtual unsigned int

參數(shù)：

解釋：獲取對應的section所包含的cell個數(shù)

virtual unsigned int numberOfSections(CATableView* table);

返回值：virtual unsigned int

參數(shù)：

解釋：獲取section個數(shù)

virtual CAView* tableViewSectionViewForHeaderInSection(CATableView* table, const DSize& viewSize, unsigned int section);

返回值：virtual CAView*

參數(shù)：

解釋：在tableView中通過索引獲取頭部Section

virtual unsigned int tableViewHeightForHeaderInSection(CATableView* table, unsigned int section);

返回值：virtual unsigned int

參數(shù)：

解釋：在tableView中通過索引獲取頭部Section高度

virtual CAView* tableViewSectionViewForFooterInSection(CATableView* table, const DSize& viewSize, unsigned int section);

返回值：virtual CAView*

參數(shù)：

解釋：在tableView中通過索引獲取尾部Section

virtual unsigned int tableViewHeightForFooterInSection(CATableView* table, unsigned int section);

返回值：virtual unsigned int

參數(shù)：

解釋：在tableView中通過索引獲取尾部Section高度

virtual void tableViewWillDisplayCellAtIndex(CATableView* table, CATableViewCell* cell, unsigned int section, unsigned int row);

返回值：virtual void

參數(shù)：

解釋：回調當前將要顯示的tableView