问题
前段时间在使用Button的时候遇到一个问题：
在代码中创建了Button并设置了其setPressedActionEnabled为true，然后给Button添加了一个Label。在点击Button时，Button正常的进行缩放，但是其子节点Label并没有跟随进行缩放。
看源码
打开UIButton.h可以看到：
这里有三个成员变量，分别对应的是Normal、Clicled、DIsable三个状态的Node。从这里可以知道，Button的三张图片其实是加载不同的子节点上的，而不是Button本身。
protected:
Node* _buttonNormalRenderer;
Node* _buttonClickedRenderer;
Node* _buttonDisableRenderer;
打开UIButton.cpp可以看到:
打开onPressStateChangedToPressed，即在按钮按下时的处理。这里可以看到在_pressedActionEnabled为true时，这边隐藏了Normal、Disable的节点，显示了Clicked的节点，并且对Clicked节点进行了缩放。
void Button::onPressStateChangedToPressed()
{
if (_pressedTextureLoaded)
{
_buttonNormalRenderer->setVisible(false);
_buttonClickedRenderer->setVisible(true);
_buttonDisableRenderer->setVisible(false);
if (_pressedActionEnabled)
{
_buttonNormalRenderer->stopAllActions();
_buttonClickedRenderer->stopAllActions();
Action *zoomAction = ScaleTo::create(0.05f, _pressedTextureScaleXInSize + 0.1f, _pressedTextureScaleYInSize + 0.1f);
_buttonClickedRenderer->runAction(zoomAction);
_buttonNormalRenderer->setScale(_pressedTextureScaleXInSize + 0.1f, _pressedTextureScaleYInSize + 0.1f);
}
}
else
{
_buttonNormalRenderer->setVisible(true);
_buttonClickedRenderer->setVisible(true);
_buttonDisableRenderer->setVisible(false);
if (_scale9Enabled)
{
_buttonNormalRenderer->setColor(Color3B::GRAY);
}
else
{
_buttonNormalRenderer->stopAllActions();
_buttonNormalRenderer->setScale(_normalTextureScaleXInSize + 0.1f, _normalTextureScaleYInSize + 0.1f);
}
}
}
修改源码
这里采用了一种解决方式：修改Button源码。在按下或放开时，不去缩放Normal、Clicked、Disable这几个子节点，而是缩放Button本身的节点。
void Button::onPressStateChangedToNormal()
{
_buttonNormalRenderer->setVisible(true);
_buttonClickedRenderer->setVisible(false);
_buttonDisableRenderer->setVisible(false);
if (_pressedTextureLoaded)
{
if (_pressedActionEnabled)
{
//改为this执行action
/*
_buttonNormalRenderer->stopAllActions();
_buttonClickedRenderer->stopAllActions();
Action *zoomAction = ScaleTo::create(0.05f, _normalTextureScaleXInSize, _normalTextureScaleYInSize);
_buttonNormalRenderer->runAction(zoomAction);
_buttonClickedRenderer->setScale(_pressedTextureScaleXInSize, _pressedTextureScaleYInSize);
*/
this->stopAllActions();
Action *zoomAction = ScaleTo::create(0.05f, _originalScaleRatioX, _originalScaleRatioY);
_buttonNormalRenderer->runAction(zoomAction);
}
}
else
{
if (_scale9Enabled)
{
updateTexturesRGBA();
}
else
{
//改为this缩放
/*
_buttonNormalRenderer->stopAllActions();
_buttonNormalRenderer->setScale(_normalTextureScaleXInSize, _normalTextureScaleYInSize);
*/
this->stopAllActions();
this->setScale(_originalScaleRatioX, _originalScaleRatioY);
}
}
}
void Button::onPressStateChangedToPressed()
{
if (_pressedTextureLoaded)
{
_buttonNormalRenderer->setVisible(false);
_buttonClickedRenderer->setVisible(true);
_buttonDisableRenderer->setVisible(false);
if (_pressedActionEnabled)
{
//改为this执行action
/*
_buttonNormalRenderer->stopAllActions();
_buttonClickedRenderer->stopAllActions();
Action *zoomAction = ScaleTo::create(0.05f, _pressedTextureScaleXInSize + 0.1f, _pressedTextureScaleYInSize + 0.1f);
_buttonClickedRenderer->runAction(zoomAction);
_buttonNormalRenderer->setScale(_pressedTextureScaleXInSize + 0.1f, _pressedTextureScaleYInSize + 0.1f);
*/
this->stopAllActions();
Action *zoomAction = ScaleTo::create(0.05f, _originalScaleRatioX + 0.1f, _originalScaleRatioY + 0.1f);
this->runAction(zoomAction);
}
}
else
{
_buttonNormalRenderer->setVisible(true);
_buttonClickedRenderer->setVisible(true);
_buttonDisableRenderer->setVisible(false);
if (_scale9Enabled)
{
_buttonNormalRenderer->setColor(Color3B::GRAY);
}
else
{
//改为this缩放
/*
_buttonNormalRenderer->stopAllActions();
_buttonNormalRenderer->setScale(_normalTextureScaleXInSize + 0.1f, _normalTextureScaleYInSize + 0.1f);
*/
this->stopAllActions();
this->setScale(_originalScaleRatioX + 0.1f, _originalScaleRatioY + 0.1f);
}
}
}
这里就导致了一个问题：按下时，使用this->setScale()对Button进行了缩放，在放开时怎样将Button缩放回来？
这里就需要添加2个成员变量：
···
float _originalScaleRatioX; //X原始缩放比例
float _originalScaleRatioY; //Y原始缩放比例
···
保存了原始缩放比例，那松开按钮时再缩放回去就很简单了。
这里又出现了另外一个问题：何时去保存原始比例呢？在每次setScale()的时候肯定不行，因为按钮按下时使用的就是这个函数。
所以这里需要添加一组成员函数，用于模仿setScale的操作，而且同时保存原始缩放比例:
//添加函数，用于缩放Button，这里会改变记录原始缩放比例的成员变量
void Button::setButtonScaleX(float scaleX)
{
_originalScaleRatioX = scaleX;
this->setScaleX(scaleX);
}
void Button::setButtonScaleY(float scaleY)
{
_originalScaleRatioY = scaleY;
this->setScaleY(scaleY);
}
void Button::setButtonScale(float scale)
{
_originalScaleRatioX = scale;
_originalScaleRatioY = scale;
this->setScale(scale);
}
void Button::setButtonScale(float scaleX, float scaleY)
{
_originalScaleRatioX = scaleX;
_originalScaleRatioY = scaleY;
this->setScale(scaleX, scaleY);
}
这样就可以实现：
在按下按钮时，按钮放大，其子节点跟随按钮一起放大
在松开按钮时，按钮恢复原大小，其子节点跟随按钮一起恢复
这里有一点需要注意的是：当我们添加按钮后，希望对按钮进行缩放操作时，需要使用setButtonScale()函数，因为使用setScale()时，不会保存原始大小，导致按下松开按钮后，按钮会恢复到1.0倍大小。
如果有什么bug，或者更好的实现方式，请在评论区留言分享你的想法~~
