Preface
在Cocos2D-X的GUI世界里，Label（标签）是最常用的UI控件之一，UIButton（按钮）亦然。但是仔细看，其实UIButton是Button和Label的组合体。今天，我们就来讨论一下二者之间微妙的合作关系。
ButtonLabel
在3.0之前，如果我没记错的话，默认的，UIButton都会有一个Label（这里就简称为ButtonLabel)，其内容称之为TitleText（按钮标签）。我们可以通过getTitleRenderer获得这个ButtonLabel：
Label* Button::getTitleRenderer()const
{
return _titleRenderer;
}
所有对TitleText的操作都基于这个ButtonLabel，比如：
void Button::setTitleText(const std::string& text)void Button::setTitleColor(const Color3B& color)void Button::setTitleFontName(const std::string& fontName)etc ...
值得一提的是，到了3.x之后，官方做了点优化，把ButtonLabel单独拆出来，这样初始化的时候就不会创建多余的Label了（这样做的好处是，在某些不需要ButtonLabel的情况下，可以节省掉创建它的开销）。当然，如果需要对ButtonLabel进行操作，UIButton会自动创建出一个Label。我们看代码就清楚了：
//初始化时_titleRenderer是null值
void Button::setTitleText(const std::string& text)
{
if (text == getTitleText())
{
//如果文本相同，则不设置
return;
}
if(nullptr == _titleRenderer)
{
//如果未创建_titleRenderer，则调用createTitleRenderer创建之
this->createTitleRenderer();
}
_titleRenderer->setString(text);
updateContentSize();
}
//创建UIButton的标签文本
void Button::createTitleRenderer()
{
_titleRenderer = Label::create(); //ButtonLabel本质是cc.Label
_titleRenderer->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
addProtectedChild(_titleRenderer, TITLE_RENDERER_Z, -1);
}
Extension
下面要说的是在UIButton使用过程中遇到的一点问题和经验总结，附带几个对ButtonLabel的方法扩展，有兴趣的可以瞅瞅，有意见的也可以提出（评论区欢迎你）。
别忘了ButtonLabel的本质是cc.Label
从上面关于ButtonLabel的解释中，我们知道，ButtonLabel的本质是cc.Label，也就是说cc.Label能干的事ButtonLabel也能干，包括上面提到的几个方法:
void Button::setTitleText(const std::string& text)
void Button::setTitleColor(const Color3B& color)
void Button::setTitleFontName(const std::string& fontName)
如果我们看源码，不难看出，这几个方法其实就是对cc.Label的简单封装而已，只不过前面加了个UIButton的标签，比如：
void Button::setTitleColor(const Color3B& color)
{
if(nullptr == _titleRenderer)
{
//如果不存在ButtonLabel，则创建之
this->createTitleRenderer();
}
//cc.Label:setTextColor(Color4B(color));
_titleRenderer->setTextColor(Color4B(color));
}
了解到这层原理后，我们就可以对ButtonLabel进行一些扩展了。
我们看UIButton.h文件，可以很清楚的看出，官方对ButtonLabel只封装了几个常用的方法，按照之前的理解，我们还可以把描边、阴影、旋转、缩放等加上，这样就可以更充分地利用ButtonLabel了。
但！！！个人不建议做这些重复的工作，因为我们已经掌握最强大的武器--原理，那么进一步的封装也就然并卵了。
其实不大理解为什么官方要提供好几个操作ButtonLabel的API（可能为了方便，但方便之余，反而隐藏了ButtonLabel是一个cc.Label的特性）。在我看来，只要保留getTitleRenderer()、setTitleText()、getTitleText()等几个常用的API基本就够用了，剩下的留给程序猿去获得ButtonLabel，再对ButtonLabel进行操作就OK了。
关于ButtonLabel奇怪的自动居中设定
有时候我们的按钮可能是奇形怪状的，我们不能保证策划或美术的眼光一定会保持ButtonLabel在按钮的中央。相反，它可能偏上、可能靠右、也可能需要左对齐，等等。
但是，我们通过对getTitleRenderer()获得的ButtonLabel进行setPosition()却惊奇地发现无论如何也无法满足修改位置的需求，仿佛setPosition()失效了一般。
这是为什么？难道我们理解的原理是错误的吗？
于是，想不通的你只好换个方案：把ButtonLabel隐藏掉，然后手动创建一个Label添加到Button上，再对它进行位置操作。
对吗？你曾经这样做过吗？哪怕一次？
但事实证明：原理一直都在那儿，不多不少，不偏不倚，从未改变！
我们来看下面的几个API就能窥见其中的根由了：
// 1、更新ButtonLabel的位置
void Button::updateTitleLocation()
{
_titleRenderer->setPosition(_contentSize.width * 0.5f, _contentSize.height * 0.5f);
}
// 2、UIButton发生变化时会调用updateTitleLocation()
void Button::onSizeChanged()
{
Widget::onSizeChanged();
if(nullptr != _titleRenderer)
{
updateTitleLocation();
}
_normalTextureAdaptDirty = true;
_pressedTextureAdaptDirty = true;
_disabledTextureAdaptDirty = true;
}
// 3、更新UIButton的ContentSize会调用onSizeChanged()
void Button::updateContentSize()
{
if (_unifySize)
{
if (_scale9Enabled)
{
ProtectedNode::setContentSize(_customSize);
}
else
{
Size s = getNormalSize();
ProtectedNode::setContentSize(s);
}
onSizeChanged();
return;
}
if (_ignoreSize)
{
this->setContentSize(getVirtualRendererSize());
}
}
我们搜索下调用updateContentSize()的地方，就会惊奇地发现，几乎对ButtonLabel操作的最后都会调用updateContentSize()！难怪尽管我们把ButtonLabel的position属性设置到了十万八千里，ButtonLabel依然盘踞中原，风雨不动安如山！因为系统把它自动居中了，只要它有些许变化，系统就会把它自动居中，自动居中了啊！
对此奇葩的设定，我只想说：这！TM！太！不！科！学！了！
这下我们知道这是系统搞的鬼了，那么有什么办法解决这个问题呢？答案当然是肯定的。
既然updateContentSize()就免不了updateTitleLocation()，那么只要修改ButtonLabel最后的位置不就万事大吉了吗？
为达此目的，我们需要耍点手段，叫做中心偏移量。我们把中心偏移量分为两个部分，分别是相对x轴的偏移_titleOffsetX和相对y轴的偏移_titleOffsetY，并把他们设置为UIButton的固有属性。当然，它们的初始值应该都是0。
Notes:
_titleOffsetX和_titleOffsetY是相对按钮中点位置的偏移量。
这样，当我们需要更新ButtonLabel位置的时候，它们就可以发挥作用了。于是updateTitleLocation()就可以改成这样：
void Button::updateTitleLocation()
{
_titleRenderer->setPosition(_contentSize.width * 0.5f + _titleOffsetX, _contentSize.height * 0.5f + _titleOffsetY);
}
嗯，这样开头和结尾我们都完成了，那么只剩下操作过程中的偏移修改了。我们创建一个新的接口，就叫setTitleOffset()吧，对，它应该能接收x、y轴两个偏移量作为输入参数，然后赋值给_titleOffsetX和_titleOffsetY，最后再更新一下ButtonLabel的位置，基本就大功告成了。嗯，它的最终模样可能是这样的：
void Button::setTitleOffset(float offsetX, float offsetX){
_titleOffsetX = offsetX;
_titleOffsetY = offsetX;
updateTitleLocation();
}
当然，除此之外，你还可以根据自己的理解进行改良和扩展。比如，我希望能够通过setPosition()直接对ButtonLabel起作用，我就可以这样做：
void Button::setTitlePosition(float x, float y){
if(_titleRenderer == nullptr){
return;
}
Vec2 vec = _titleRenderer->getPosition();
_titleOffsetX = x - vec.x;
_titleOffsetY = y - vec.y;
updateTitleLocation();
}
怎么样？是不是很简单？接下来，感兴趣的同学不妨动手试试扩展ButtonLabel使其支持左对齐、右对齐吧。
用lua作为主要开发语言的同学还可以把上面完成的两个接口绑定到lua，这样就更方便使用啦！
Conclusion
有时候，虽然只是几行代码，却极大的提高了开发效率。
有时候，虽然只是一点好奇，却可以让你窥见真知。
有时候，不妨挖几个脑洞，自己填填坑吧，说不定就有意想不到的收获了。
