[CloudBox] 基于跨平台框架的愤怒鸟滑动按钮范例

决定把CloudBox开源了！

分享给大家，CloudBox是iOS/Android的跨平台框架。

这个范例显示了愤怒鸟中，那种可滑动收纳按钮的元件

请用xcode或eclipse编译程式代码

/*
 *  CBSlideBar.h
 *  CloudBox Cross-Platform Framework Project
 *
 *  Created by Cloud on 2012/4/8.
 *  Copyright 2012 Orz. All rights reserved.
 *
 */

#include "CBView.h"
#include "CBAction.h"

#ifdef __CBIOS__
#define OPTION_NAME "button_options.png"
#define OPTION_BG_NAME "options_bg.png"
#define OPTION_MUSIC_ON_NAME "button_music_on.png"
#define OPTION_MUSIC_OFF_NAME "button_music_off.png"
#define OPTION_INFO_NAME "button_info.png"
#define OPTION_HELP_NAME "button_help.png"
#define OPTION_CLOSE_NAME "button_close.png"
#else
#define OPTION_NAME "system/button_options.png"
#define OPTION_BG_NAME "system/options_bg.png"
#define OPTION_MUSIC_ON_NAME "system/button_music_on.png"
#define OPTION_MUSIC_OFF_NAME "system/button_music_off.png"
#define OPTION_CLOSE_NAME "system/button_close.png"
#define OPTION_INFO_NAME "system/button_info.png"
#define OPTION_HELP_NAME "system/button_help.png"
#define OPTION_CLOSE_NAME "system/button_close.png"
#endif

enum SlideBarStatus
{
        SlideBarHide = 0,
        SlideBarShow = 1
};

enum DefaultSlideBar
{
        DefaultSlideBar1 = 1
};

class CBSlideBar : public CBView
{
private:
        SlideBarStatus m_status;
        
        CBView* m_optionButton;
        CBView* m_optionBar;
        
        CBDelegate<void(int)>* m_click;
        vector<CBView* > m_options;
        CBAction* m_optionButtonShowClick;
        CBAction* m_optionButtonHideClick;
        CBAction* m_optionBarShow;
        CBAction* m_optionBarHide;
        
        void onClickOption();
        void onBarAnimationScrolling(CBView* target);
        void onBarAnimationFinish(CBView* target);
        
        void setDefaultBar1();
        
protected:
        void draw();
public:
        CBSlideBar();
        CBSlideBar(DefaultSlideBar defaultType);
        ~CBSlideBar();
        
        inline void setShowButtonAction(CBAction* action) { m_optionButtonShowClick = action; }
        inline void setHideButtonAction(CBAction* action) { m_optionButtonHideClick = action; }
        inline void setShowBarAction(CBAction* action) { m_optionBarShow = action; }
        inline void setHideBarAction(CBAction* action) { m_optionBarHide = action; }
        
        void onClick(float x,float y);
        
        void setOptionButton(const string& imageName);
        void setOptionBar(const string& imageName);
        
        void addButton(const string& imageName);
        void addSwitchButton(const string& imageName1,const string& imageName2);
};

/*
 *  CBSlideBar.cpp
 *  CloudBox Cross-Platform Framework Project
 *
 *  Created by Cloud on 2012/4/8.
 *  Copyright 2012 Orz. All rights reserved.
 *
 */

#include "CBSlideBar.h"
#include "CBImage.h"
#include "CBRotateAction.h"
#include "CBPropertyAction.h"

CBSlideBar::CBSlideBar()
: m_optionButton(NULL), m_optionBar(NULL), m_status(SlideBarHide),
m_optionButtonShowClick(NULL), m_optionButtonHideClick(NULL),
m_optionBarShow(NULL), m_optionBarHide(NULL)
{
        registerClickEvent();
}

CBSlideBar::CBSlideBar(DefaultSlideBar defaultType)
: m_optionButton(NULL), m_optionBar(NULL), m_status(SlideBarHide),
m_optionButtonShowClick(NULL), m_optionButtonHideClick(NULL),
m_optionBarShow(NULL), m_optionBarHide(NULL)
{
        registerClickEvent();
        setDefaultBar1();
}

CBSlideBar::~CBSlideBar()
{
        DELETE(m_optionButton);
        DELETE(m_optionBar);
        for(int i = 0 ; i < m_options.size() ; i++)
        {
                DELETE(m_options[i]);
        }
        m_options.clear();
}

void CBSlideBar::setDefaultBar1()
{
        // template in CloudBox
        setOptionButton(OPTION_NAME);
        setOptionBar(OPTION_BG_NAME);
        m_optionButtonShowClick = 
                new CBPropertyAction(Property(ActionPropertyAngle,0,360,10, PropertyFromCurrent),
                                                 0.015, ActionManualRelease);
        m_optionButtonHideClick = 
                new CBPropertyAction(Property(ActionPropertyAngle,360,0,10, PropertyFromCurrent),
                                                 0.015, ActionManualRelease);
        
        m_optionBarShow =
                new CBPropertyAction(
                                Property(ActionPropertyWidth,m_optionButton->getWidth(),m_optionBar->getWidth(),10, PropertyFromCurrent),
                                0.025, ActionManualRelease);
        m_optionBarShow->addTriggerEvent(this,&CBSlideBar::onBarAnimationScrolling);
        
        m_optionBarHide =
                new CBPropertyAction(
                                Property(ActionPropertyWidth,m_optionBar->getWidth(),m_optionButton->getWidth(),-10, PropertyFromCurrent),
                                0.025, ActionManualRelease);
        m_optionBarHide->addTriggerEvent(this,&CBSlideBar::onBarAnimationScrolling);
        m_optionBarHide->addFinishEvent(this,&CBSlideBar::onBarAnimationFinish);
        m_optionBar->setWidth(m_optionButton->getWidth());
        addButton(OPTION_INFO_NAME);
        addButton(OPTION_HELP_NAME);
        addButton(OPTION_CLOSE_NAME);
}

void CBSlideBar::onBarAnimationScrolling(CBView* target)
{
        int x = target->getX() + target->getWidth();
        for(int i = 0 ; i < m_options.size() ; i++)
        {
                if(m_status == SlideBarShow)
                {
                        if((m_options[i]->getX() + m_options[i]->getWidth()) < x)
                        {
                                m_options[i]->show();
                        }
                }
                else if(m_status == SlideBarHide)
                {
                        if((m_options[i]->getX() + m_options[i]->getWidth()) > x)
                        {
                                m_options[i]->hide();
                        }
                }
        }
}

void CBSlideBar::onBarAnimationFinish(CBView* target)
{
        if(m_status == SlideBarHide)
        {
                target->hide();
        }
}

void CBSlideBar::setOptionButton(const string& imageName)
{
        DELETE(m_optionButton);
        m_optionButton = new CBImage(imageName);
}

void CBSlideBar::setOptionBar(const string& imageName)
{
        DELETE(m_optionBar);
        m_optionBar = new CBImage(imageName);
        m_optionBar->hide();
}

void CBSlideBar::addButton(const string& imageName)
{
        CBImage* image = new CBImage(imageName);
        image->hide();
        m_options.push_back(image);
}

void CBSlideBar::addSwitchButton(const string& imageName1,const string& imageName2)
{
}

void CBSlideBar::onClickOption()
{
        if(m_status == SlideBarShow)
        {
                m_status = SlideBarHide;
                m_optionButtonHideClick->stop();
                m_optionBarShow->stop();
                m_optionButtonHideClick->commit(m_optionButton);
                m_optionBarHide->commit(m_optionBar);
        }
        else
        {
                m_status = SlideBarShow;
                m_optionButtonHideClick->stop();
                m_optionBarHide->stop();
                m_optionButtonShowClick->commit(m_optionButton);
                m_optionBarShow->commit(m_optionBar);
                m_optionBar->show();
        }
}

void CBSlideBar::onClick(float x,float y)
{
        if(m_optionButton->isTrigger(x, y))
        {
                onClickOption();
        }
        if(m_status == SlideBarShow)
        {
        }
}
void CBSlideBar::draw()
{
        m_optionBar->moveToAbsolute(m_x, m_y);
        m_optionBar->visit();
        m_optionButton->moveToAbsolute(m_x, m_y);
        m_optionButton->visit();
        int width = 0;
        for(int i = 0 ; i < m_options.size() ; i++)
        {
                m_options[i]->moveToAbsolute(m_x + m_optionButton->getWidth() + width, m_y);
                m_options[i]->visit();
                width += m_options[i]->getWidth();
        }
}

由于CloudBox是一个基于opengles的绘图引擎，因此在设计时，暂时是基于UI元件皆是使用图片载入为主

至于这个CBSlideBar的设计概念

首先是基于分析，按下之后有两个动画，一个是按钮会旋转，另一个是收纳的bar会拉伸

已元件设计的观念来分析，目前至少就需要二个图形元件，二个动画控制

我将整个元件设为状态机，只有隐藏跟显示两种状态

来判断是否要显示收纳的按钮，收纳的按钮就用addButton加入即可

http://download.csdn.net/detail/cloudhsu/4212237

如何设定Eclipse Builder设定透过Eclipse建制项目