Cocos2D-X ButtonLabel

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

有时候，虽然只是几行代码，却极大的提高了开发效率。
有时候，虽然只是一点好奇，却可以让你窥见真知。
有时候，不妨挖几个脑洞，自己填填坑吧，说不定就有意想不到的收获了。