CCScrollView 和 CCLabelTTF 组成CCScrollLabel

点击打开链接

分类： cocos2d/cocos2s-x 2013-01-31 13:47  4707人阅读  评论(15)  收藏  举报

在一些项目中，经常会遇到文本很长，但是美术设计的对话框又不够大，以至于文本溢出对话框（如任务描述文字等）。为解决这个创建问题，本人写了一个CCScrollLabel，此类实现一个可以滚动查看文本的窗口。CCScrollLabel是基于cocos2d-x-2.0.4版本的。另外特别注意：cocos2d-x-2.0.3版本的CCScrollView有很大缺陷，建议基于该版本的游戏项目不要使用该CCScrollView。或者将项目中CCScrollView替换成至少2.0.4版本的。

其实这个功能实现起来应该说是很容易的，但是网上CCScrollView的资料手册不多。这里比较详细的说明一下2.0.4版本下的CCScrollView的各项特性：

1. CCScrollView拥有两个重要属性，一个是View（可视区域）。一个是Container（容器区域）。
2. View就是CCScrollView可以显示的区域，同时也是可以接受触摸消息的区域，即玩家可以滚动的大小。
3. Container是CCScrollView的直接子节点。其大小即可以滚动的内容面板大小。举个常见的例子：如果View大小是(200,200），Container大小是（200,800)，那么我们就可以滚动Container以显示其不同区域。
4. CCScrollView创建后，默认将Container的左下角于自身的左下角对齐，即从Container的底部区域开始显示。例如：上面的例子，CCScrollView中显示的是Container最下方的(200,200)区域，而不是顶部的(200,200)区域。所以这个特性加大我们CCScrollLabel的难度，因为我们一般希望文本顶格显示。
5. Container的初始位置可以进行调用setContentOffset()进行偏移，这样就可以让Container的顶部作为一开始的显示区域。
6. 调用CCScrollView::addChild的节点，都会被CCScrollView更改锚点和坐标。新的锚点值和坐标值都将是(0,0)。这也是为什么Container一开始会在CCScrollView的左下角的原因，如果CCScrollView有了Container（无论是你提供的，还是默认创建的），那么addChild( A )，会将A节点作为Container的直接子节点。
7. 当Container的大小小于CCScrollView的大小的时候，CCScrollView一旦被滚动，就会试图将Container位置重置为创建时的位置，也就是将Container放在CCScrollView的左下角。这个也会加大我们创建CCScrollLabel的难度，因为当我们的文本很少时，我们无法将其顶格显示，因为只要滚动，文本即使一开始位于CCScrollView顶部，也会被CCScrollView强制拉回到最下角。

那么CCLabelTTF有什么特性呢？看一下几个重要的地方：

1. CCLabelTTF可以设定字符串贴图的宽度，及字符串显示的宽度。例如：你有100个中文字符，我们可以设置CCLabelTTF的宽度为300，CCLabelTTF为我们生成的字符串texture，会保证其宽度为用户制定的宽度。高度是取max（用户制定的宽度，为了容纳字符串所需的最小高度）。所以我们可以在创建CCLabelTTF是将CCSizeMake( width, 0 )传给Dimension参数。
   
2. CCLabelTTF的文本贴图（texture)大小，我们可以通过getTexture()->getContentSize()或者直接getContentSize()。但千万别使用getDimensions()。

通过以上对CCScrollView和CCLabelTTF特性的分析，我们能得出这样的结论：我们不能将我们的CCLabelTTF作为CCScrollView的Container！

因为当我们的文本不够大的时候，即使我们将文本强制设置到的CCScrollView的左上角，但是只要玩家一拖动，我们的文本还是会被CCScrollView设置到左下角。如何解决这个问题呢？解决方法就是：我们要保证Container的大小至少和CCScrollView（或者称为View）的大小一样大。这样就可以确保Container在被拖动时，不会因为自己太小而被CCScrollView强制拉回左下角，以至于出现诡异的现象。

如何确保Container的大小不比View小呢？那就是让CCScrollView默认创建一个Container（是一个CCLayer，大小为屏幕大小），然后我们在根据需求改变Container的大小（因为如果Container的大小为屏幕大小时，我们将会有一大片无用的区域可被玩家拖动，这是谁都不想看到的）。然后在将CCLabelTTF作为Container的子节点，并将其对齐到Container的左上角。之后，我们只需要确保Container一开始的时候顶格显示，就能保证我们的CCLabelTTF顶格显示了。

下面附带个人代码， 仅供大家学习交流。任何因使用本人代码而造成的项目损失或者间接损失，本人不负任何责任。

• .h
  
  [cpp]  view plain copy

  1. //  
  2. //  XJScrollLabel.h  
  3. //  
  4. //  Created by jason on 13-1-30.  
  5. //  
  6.   
  7. #ifndef __COG__XJScrollLabel__  
  8. #define __COG__XJScrollLabel__  
  9.   
  10. #include <iostream>  
  11. #include "cocos2d.h"  
  12. #include "cocos-ext.h"  
  13.   
  14. USING_NS_CC;  
  15. USING_NS_CC_EXT;  
  16.   
  17.   
  18. #define POINTER_OPERATION( pointer, operation ) \  
  19. do\  
  20. {\  
  21. if( pointer )\  
  22. {\  
  23. operation;\  
  24. }\  
  25. }while( 0 )  
  26.   
  27. //the anchor point of XJScrollLabel is the left-bottom corner.  
  28. class XJScrollLabel : public CCNode, public CCScrollViewDelegate  
  29. {  
  30. public://static functions  
  31.     static XJScrollLabel* create( const char* pszText, const char *fontName, float fontSize, CCTextAlignment hAlignment, CCSize ScrollViewSize );  
  32.       
  33. public:  
  34.     XJScrollLabel();  
  35.     ~XJScrollLabel();  
  36.     bool init( const char* pszText, const char *fontName, float fontSize, CCTextAlignment hAlignment, CCSize& ScrollViewSize );  
  37.       
  38.     void setTextColor(const ccColor3B& color3)  
  39.     { POINTER_OPERATION( m_pLabel, m_pLabel->setColor( color3 ) ); }  
  40.       
  41. public://scroll view delegate  
  42.     virtual void scrollViewDidScroll(CCScrollView* view){}  
  43.     virtual void scrollViewDidZoom(CCScrollView* view){}  
  44.       
  45. private:  
  46.     CCScrollView* m_pScrollView;  
  47.     CCLabelTTF* m_pLabel;  
  48. };  
  49.   
  50. #endif /* defined(__COG__CGScrollLabel__) */  
  
  
  
• .cpp
  
  [cpp]  view plain copy

  1. //  
  2. //  XJScrollLabel.cpp  
  3. //  
  4. //  Created by jason on 13-1-30.  
  5. //  
  6.   
  7. #include "XJScrollLabel.h"  
  8.   
  9. XJScrollLabel* XJScrollLabel::create(const char *pszText, const char *fontName, float fontSize, CCTextAlignment hAlignment, cocos2d::CCSize ScrollViewSize)  
  10. {  
  11.     XJScrollLabel* pScrollLabel = new XJScrollLabel;  
  12.     if( pScrollLabel && pScrollLabel->init( pszText, fontName, fontSize, hAlignment, ScrollViewSize ) )  
  13.     {  
  14.         pScrollLabel->autorelease();  
  15.         return pScrollLabel;  
  16.     }  
  17.     else  
  18.     {  
  19.         CC_SAFE_DELETE( pScrollLabel );  
  20.         return NULL;  
  21.     }  
  22. }  
  23.   
  24. XJScrollLabel::XJScrollLabel() :  
  25. m_pScrollView( NULL ),  
  26. m_pLabel( NULL )  
  27. {  
  28.       
  29. }  
  30.   
  31. XJScrollLabel::~XJScrollLabel()  
  32. {  
  33.     CC_SAFE_RELEASE_NULL( m_pLabel );  
  34.     CC_SAFE_RELEASE_NULL( m_pScrollView );  
  35. }  
  36.   
  37. bool XJScrollLabel::init(const char *pszText, const char *fontName, float fontSize, CCTextAlignment hAlignment, cocos2d::CCSize& ScrollViewSize)  
  38. {  
  39.     //object has been initialized.  
  40.     if( m_pScrollView || m_pLabel )  
  41.     {  
  42.         return false;  
  43.     }  
  44.       
  45.     //constraint the label's width, but not height.  
  46.     m_pLabel = CCLabelTTF::create( pszText, fontName, fontSize, CCSizeMake( ScrollViewSize.width, 0 ), hAlignment );  
  47.     m_pLabel->retain();  
  48.       
  49.     //get the texture size  
  50.     CCSize TextSize = m_pLabel->getTexture()->getContentSize();  
  51.       
  52.     //we have to invoke CCScrollView::create( ScrollViewSize ) instead of   
  53.     //CCScrollView::create( ScrollViewSize, m_pLabel ) to let the CCScrollView  
  54.     //create a default container for you.  
  55.       
  56.     //It's because that the label may smaller than the view of  
  57.     //CCScrollView. If that is the condition, the label will be positioned  
  58.     //at the bottom of the View by CCScrollView.   
  59.       
  60.     //Even though you can set the label at the top, but the behavior of  
  61.     //ScrollView always try to reposition it. So we must ensure the container  
  62.     //is larger than the View of CCScrollView.  
  63.     m_pScrollView = CCScrollView::create( ScrollViewSize );  
  64.     m_pScrollView->retain();  
  65.     m_pScrollView->setDelegate( this );  
  66.     m_pScrollView->setDirection( kCCScrollViewDirectionVertical );  
  67.       
  68.     //set the container size.  
  69.     //So we must ensure the conainer is larger than the View of CCScrollView.  
  70.     if( TextSize.height > ScrollViewSize.height )  
  71.     {  
  72.         m_pScrollView->setContentSize( TextSize );  
  73.         //make the left-top corner of container coincide with View's  
  74.         m_pScrollView->setContentOffset( ccp( 0, ScrollViewSize.height - TextSize.height ) );  
  75.     }  
  76.     else  
  77.     {  
  78.         m_pScrollView->setContentSize( ScrollViewSize );  
  79.     }  
  80.       
  81.     //put the label at the top of the container.  
  82.     m_pScrollView->addChild( m_pLabel );  
  83.     m_pLabel->ignoreAnchorPointForPosition( false );  
  84.     m_pLabel->setAnchorPoint( ccp( 0, 1 ) );  
  85.     m_pLabel->setPosition( ccp( 0, m_pScrollView->getContentSize().height ) );  
  86.       
  87.   
  88.     addChild( m_pScrollView );  
  89.     return true;  
  90. }  

PS:

• Cocos2d-x 2.0.4的CCScrollView有个bug，那就是必须要另外调用一次setContentSize()，才能完成滚动功能

关键代码我都做了有比较详尽的注释，就不对代码做过多解释。