请选择 进入手机版 | 继续访问电脑版
查看: 11704|回复: 4

[教程] [无脑码农CrossApp笔记]CATableView表单视图

[复制链接]
最佳答案
0 
无脑码农 发表于 2015-7-17 10:19:13 | 显示全部楼层 |阅读模式
本帖最后由 无脑码农 于 2015-7-17 10:25 编辑

无标题.png

CATableView 主要用于生成列表,在table中展示数据,是一个一维的表,可以让用户能通过分层的数据进行导航,表可以是静态的或者动态的,可通过 dataSource 协议和 delegate 协议可以实现很多的个性化定制,即便拥有大量数据也非常有效率。CATableView只能有一列数据(cell),且只支持纵向滑动。
我们先了解一下CATableView的界面构成,CATableView主要是由两级目录构成Selection级和Cell级。如图所示,一个CATextField包含一个或多个Selection,一个Selection包含一个或多个Cell,这样就构成了CATableVIew的层级表示图。
CATableView的使用方法和CAListView比较类似,我们也要分别使用:CATableView、CATableViewCell、CATableViewDelegate、CATableViewDataSource来构建。
CATableView是表格视图的容器,是容器的载体。
CATableViewCell是表格视图的一个单元(本节后面简称cell)。
CATableViewDelegate是交互代理,响应cell选中和取消状态。
CATableViewDataSource是数据代理,设置Selection个数及Selection包含cell个数。
先详细的看一下CATableView的常用函数
函数        说明
void setTableHeaderView(CAView* var)        添加头部视图
void setTableFooterView(CAView* var)        添加尾部视图
void setTableHeaderHeight(unsigned int var)        设置头部视图的高度
void setTableFooterHeight(unsigned int var)        设置尾部视图的高度
void setSeparatorColor(CAColor4B var)        设置cell分割线的颜色
void setSeparatorViewHeight(unsigned int var)        设置cell分割先的高度
void setAllowsSelection(bool var)        是否开启cell选择
void setAllowsMultipleSelection(bool var)        是否可以多选cell
Void setTableViewDelegate(CATableViewDelegate* var)        添加交互代理
Void setTableViewDataSource(CATableViewDataSource* var)        添加数据代理
void reloadViewSizeData()        刷新CATableView
void reloadData()        刷新CATableView的数据
void setSelectAtIndex(unsigned int index)        根据索引设置cell为选中状态
CATableViewCell* dequeueReusableCellWithIdentifier(const char* reuseIdentifier)        从复用队列中寻找指定标识符的cell
CATableViewCell:
函数        说明
static CATableViewCell* create(const std::string& reuseIdentifier)        根据重用标示符来创建一个CAListViewCell
void setBackGroundViewForState(CAControlState controlState, CAView *var)        设置背景
virtual void normaTableViewCell()        正常状态下调用
virtual void highlightedTableViewCell()        高亮状态下调用
virtual void selectedListViewCell()        选择状态下调用
virtual void disabledTableViewCell()        禁用状态下调用
virtual void recoveryTableViewCell()        恢复状态下调用
我们再了解一下CATableViewDelegate:
函数        说明
virtual void tableViewDidSelectRowAtIndexPath (CATableView* table, unsigned int section, unsigned int row)        选中cell时调用
virtual void tableViewDidDeselectRowAtIndexPath (CATableView* table, unsigned int section, unsigned int row)        取消选择cell时调用
CATableViewDataSource:
函数        说明
virtual CATableViewCell* tableCellAtIndex(CATableView* table, const CCSize& cellSize, unsigned int section,unsigned int row)        获取指定cell
virtual unsigned int numberOfRowsInSection(CATableView *table, unsigned int section)        获取对应的section所包含的cell个数
virtual unsigned int numberOfSections(CATableView *table)        获取tableview包含的section个数
virtual unsigned int tableViewHeightForRowAtIndexPath(CATableView* table,unsigned int section, unsigned int row)        获取指定的cell高度
virtual unsigned int tableViewHeightForHeaderInSection(CATableView* table,unsigned int section)        获取指定的section的header view的高度
virtual unsigned int tableViewHeightForFooterInSection(CATableView* table,unsigned int section)        获取指定的section的footer view的高度
我们本节也使用CATableView来实现一个简单的表单视图,首先我们需要新建一个Class,命名为:MyTableViewCell并继承CATableViewCell。代码示例如下:
文件CATableViewCell.h
  1. #ifndef _My_TableViewCell_h_
  2. #define _My_TableViewCell_h_

  3. #include <iostream>
  4. #include "CrossApp.h"

  5. USING_NS_CC;

  6. class MyTableViewCell:public CATableViewCell
  7. {
  8. public:
  9.         MyTableViewCell();
  10.         virtual ~MyTableViewCell();
  11.         //创建MyTableViewCell
  12.         static MyTableViewCell* create(const std::string& identifier, const CADipRect& _rect = CADipRectZero);

  13. public:
  14.         //初始化
  15.         void initWithCell();
  16.         //按钮的回调函数
  17.         void cellBtnCallback(CAControl* btn, CCPoint point);

  18. protected:
  19.         //正常状态下调用
  20.         virtual void normalTableViewCell();
  21.         //高亮状态下调用
  22.         virtual void highlightedTableViewCell();
  23.         //选择状态下调用
  24.         virtual void selectedTableViewCell();
  25.         //禁用状态下调用
  26.         virtual void disabledTableViewCell();
  27.         //恢复状态下调用
  28.         virtual void recoveryTableViewCell();
  29. };

  30. #endif
复制代码
文件CATableViewCell.cpp
  1. #include "MyTableViewCell.h"

  2. MyTableViewCell::MyTableViewCell()
  3. {

  4. }

  5. MyTableViewCell::~MyTableViewCell()
  6. {

  7. }

  8. MyTableViewCell* MyTableViewCell::create(const std::string& identifier, const CADipRect& _rect)
  9. {
  10.         //创建
  11.         MyTableViewCell* tableViewCell = new MyTableViewCell();
  12.         if(tableViewCell&&tableViewCell->initWithReuseIdentifier(identifier))
  13.         {
  14.                 tableViewCell->setFrame(_rect);
  15.                 tableViewCell->autorelease();
  16.                 return tableViewCell;
  17.         }
  18.         CC_SAFE_DELETE(tableViewCell);
  19.         return NULL;
  20. }

  21. void MyTableViewCell::initWithCell()
  22. {
  23.         //Cell的大小
  24.         CADipSize m_size = this->getFrame().size;
  25.         //创建CALabel
  26.         CALabel* cellText = CALabel::createWithCenter(CADipRect(m_size.width*0.1, m_size.height*0.5, m_size.width*0.3, m_size.height*0.8));
  27.         //设置tag
  28.         cellText->setTag(100);
  29.         //设置字体大小
  30.         cellText->setFontSize(_px(30));
  31.         //设置中心对齐
  32.         cellText->setTextAlignment(CATextAlignmentCenter);
  33.         cellText->setVerticalTextAlignmet(CAVerticalTextAlignmentCenter);
  34.         //添加到当前cell
  35.         this->addSubview(cellText);

  36.         //创建CAButton
  37.         CAButton* btnOnCell = CAButton::createWithCenter(CADipRect(m_size.width*0.85, m_size.height*0.5, m_size.width*0.2, m_size.height*0.7), CAButtonTypeRoundedRect);
  38.         //设置tag
  39.         btnOnCell->setTag(102);
  40.         //设置显示文本
  41.         btnOnCell->setTitleForState(CAControlStateAll, "Touch");
  42.         //添加回调监听
  43.         btnOnCell->addTarget(this, CAControl_selector(MyTableViewCell::cellBtnCallback), CAControlEventTouchUpInSide);
  44.         //添加到cell
  45.         this->addSubview(btnOnCell);
  46. }

  47. void MyTableViewCell::cellBtnCallback(CAControl* btn, CCPoint point)
  48. {
  49.         //按钮被点击时打印log
  50.         CCLog("MyTableViewCell::cellBtnCallback-->");
  51. }

  52. void MyTableViewCell::normalTableViewCell()
  53. {
  54.         //改变背景颜色
  55.         this->setBackgroundView(CAView::createWithColor(CAColor_white));
  56. }

  57. void MyTableViewCell::highlightedTableViewCell()
  58. {
  59.         //改变背景颜色
  60.         this->setBackgroundView(CAView::createWithColor(CAColor_gray));
  61. }

  62. void MyTableViewCell::selectedTableViewCell()
  63. {
  64.         //改变背景颜色
  65.         this->setBackgroundView(CAView::createWithColor(CAColor_orange));
  66. }

  67. void MyTableViewCell::disabledTableViewCell()
  68. {
  69.         //改变背景颜色
  70.         this->setBackgroundView(CAView::createWithColor(CAColor_black));
  71. }

  72. void MyTableViewCell::recoveryTableViewCell()
  73. {
  74.         //改变背景颜色
  75.         this->setBackgroundView(CAView::createWithColor(CAColor_blue));
  76. }
复制代码
我们创建了cell之后,就在FirstViewController实现CATableViewDelegate和CATableViewDataSource这两个代理,那么FirstViewController.h的内容如下:
  1. #ifndef __HelloCpp__ViewController__
  2. #define __HelloCpp__ViewController__

  3. #include <iostream>
  4. #include "CrossApp.h"
  5. #include "MyTableViewCell.h"
  6. USING_NS_CC;

  7. class FirstViewController: public CAViewController , public CATableViewDataSource ,public CATableViewDelegate
  8. {
  9.    
  10. public:

  11.         FirstViewController();
  12.    
  13.         virtual ~FirstViewController();
  14. public:
  15.         //选中cell时触发
  16.         virtual void tableViewDidSelectRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row);
  17.         //取消选中cell时触发
  18.         virtual void tableViewDidDeselectRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row);

  19.         //获取对应的section所包含的cell个数
  20.         virtual unsigned int numberOfRowsInSection(CATableView *table, unsigned int section);
  21.         //获取tableview包含的section个数
  22.         virtual unsigned int numberOfSections(CATableView *table);
  23.         //获得指定cell
  24.         virtual CATableViewCell* tableCellAtIndex(CATableView* table, const CCSize& cellSize, unsigned int section, unsigned int row);
  25.         //设置section的头部
  26.         virtual CAView* tableViewSectionViewForHeaderInSection(CATableView* table, const CCSize& viewSize, unsigned int section);
  27.         //设置section的尾部
  28.         virtual CAView* tableViewSectionViewForFooterInSection(CATableView* table, const CCSize& viewSize, unsigned int section);
  29.         //获取指定的cell高度
  30.         virtual unsigned int tableViewHeightForRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row);
  31.         //获得指定的section的header vier的高度
  32.         virtual unsigned int tableViewHeightForHeaderInSection(CATableView* table, unsigned int section);
  33.         //获得指定的section的footer view的高度
  34.         virtual unsigned int tableViewHeightForFooterInSection(CATableView* table, unsigned int section);
  35.    
  36. protected:
  37.    
  38.     void viewDidLoad();
  39.    
  40.     void viewDidUnload();
  41.    
  42. };


  43. #endif /* defined(__HelloCpp__ViewController__) */
复制代码
然后我们在FirstViewController.cpp中实现表格视图如下:
  1. #include "FirstViewController.h"

  2. FirstViewController::FirstViewController()
  3. {

  4. }

  5. FirstViewController::~FirstViewController()
  6. {

  7. }

  8. void FirstViewController::viewDidLoad()
  9. {
  10.         CCSize size = this->getView()->getBounds().size;

  11.         CATableView* p_TableView = CATableView::createWithCenter(CADipRect(size.width*0.5, size.height*0.5, size.width, size.height));
  12.         p_TableView->setTableViewDataSource(this);
  13.         p_TableView->setTableViewDelegate(this);
  14.         p_TableView->setAllowsSelection(true);
  15.         p_TableView->setAllowsMultipleSelection(true);
  16.         p_TableView->setSeparatorColor(CAColor_clear);
  17.         this->getView()->addSubview(p_TableView);

  18. }

  19. void FirstViewController::viewDidUnload()
  20. {
  21.     // Release any retained subviews of the main view.
  22.     // e.g. self.myOutlet = nil;
  23. }

  24. void FirstViewController::tableViewDidSelectRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row)
  25. {

  26. }

  27. void FirstViewController::tableViewDidDeselectRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row)
  28. {

  29. }

  30. CATableViewCell* FirstViewController::tableCellAtIndex(CATableView* table, const CCSize& cellSize, unsigned int section, unsigned int row)
  31. {

  32.         CADipSize _size = cellSize;
  33.         //根据标识获得cell
  34.         MyTableViewCell* cell = dynamic_cast<MyTableViewCell*>(table->dequeueReusableCellWithIdentifier("CrossApp"));
  35.         //如果没有找到cell
  36.         if (cell == NULL)
  37.         {
  38.                 //创建一个
  39.                 cell = MyTableViewCell::create("CrossApp", CADipRect(0, 0, _size.width, _size.height));
  40.                 //调用cell的初始化
  41.                 cell->initWithCell();
  42.         }
  43.         //如果是section为1的情况
  44.         if (section == 1)
  45.         {
  46.                 //根据tag获得CAButton
  47.                 CAButton* cellBtn = (CAButton*)cell->getSubviewByTag(102);
  48.                 //隐藏按钮
  49.                 cellBtn->setVisible(false);
  50.         }
  51.         else
  52.         {
  53.                 //根据tag获得CAButton
  54.                 CAButton* cellBtn = (CAButton*)cell->getSubviewByTag(102);
  55.                 //显示按钮
  56.                 cellBtn->setVisible(true);
  57.         }
  58.         CCString* order = CCString::createWithFormat("Cell-%d",row);
  59.         //根据tag获得CALabel
  60.         CALabel* cellText = (CALabel*)cell->getSubviewByTag(100);
  61.         //设置文本显示
  62.         cellText->setText(order->getCString());

  63.         return cell;

  64. }

  65. CAView* FirstViewController::tableViewSectionViewForHeaderInSection(CATableView* table, const CCSize& viewSize, unsigned int section)
  66. {
  67.         CCLog("Header-->");
  68.         CCString* head = CCString::createWithFormat("Selection-%d", section);
  69.         //创建Section头部视图
  70.         CAView* view = CAView::createWithColor(CAColor_gray);
  71.         CADipSize _size = viewSize;
  72.         CALabel* header = CALabel::createWithCenter(CADipRect(_size.width*0.5, _size.height*0.5, _size.width*0.8, _size.height));
  73.         header->setText(head->getCString());
  74.         header->setFontSize(_px(30));
  75.         header->setColor(CAColor_white);
  76.         header->setTextAlignment(CATextAlignmentCenter);
  77.         header->setVerticalTextAlignmet(CAVerticalTextAlignmentCenter);
  78.         view->addSubview(header);

  79.         return view;
  80. }

  81. CAView* FirstViewController::tableViewSectionViewForFooterInSection(CATableView* table, const CCSize& viewSize, unsigned int section)
  82. {
  83.         CCLog("Footer-->");
  84.         CAView* view = CAView::createWithColor(CAColor_white);
  85.         return view;
  86. }

  87. unsigned int FirstViewController::numberOfRowsInSection(CATableView *table, unsigned int section)
  88. {
  89.         //cell数,从0计算。10表示0-9
  90.         return 10;
  91. }

  92. unsigned int FirstViewController::numberOfSections(CATableView *table)
  93. {
  94.         //表格数,从0开始计算。4则表示0-3
  95.         return 4;
  96. }

  97. unsigned int FirstViewController::tableViewHeightForRowAtIndexPath(CATableView* table, unsigned int section, unsigned int row)
  98. {
  99.         //高度
  100.         return _px(130);
  101. }

  102. unsigned int FirstViewController::tableViewHeightForHeaderInSection(CATableView* table, unsigned int section)
  103. {
  104.         //高度
  105.         return _px(50);
  106. }

  107. unsigned int FirstViewController::tableViewHeightForFooterInSection(CATableView* table, unsigned int section)
  108. {
  109.         return 1;
  110. }
复制代码
这样我们就构建了一个表格视图,大家可以自己尝试这用CATableVIew去实现一个微信的通信录列表。
最佳答案
0 
23234234234 发表于 2015-7-20 11:45:55 | 显示全部楼层
真的非常棒!我一直默默的支持楼主
最佳答案
0 
23234234234 发表于 2015-7-30 20:29:34 | 显示全部楼层
很给力的资源啊!!!!!!!!!!!!!!!
最佳答案
0 
23234234234 发表于 2015-8-10 15:36:06 | 显示全部楼层
真给力的资源啊!!!!!!!!!!!!!!
最佳答案
0 
dantes2014 发表于 2015-9-18 20:03:30 | 显示全部楼层
支持,挺不错的
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表