Custom LookAndFeel for GroupComponent

1

I’ve created a custom LookAndFeel Class for my GroupComponents, I really don’t want to do that much, just customize the colours and stuff.

class GroupLookAndFeel : public juce::LookAndFeel_V4
{
public:
    // Constructor
    //////////////
    GroupLookAndFeel()
    {
        setColour(juce::GroupComponent::outlineColourId, juce::Colours::orange);
    }

    void GroupLookAndFeel::paint(juce::Graphics& g)
    {
        g.fillAll(juce::Colours::silver);
    }
};

And I just use the following to set it on my Group:

filterGroup.setLookAndFeel(&groupLookAndFeel);

The problem is that the outline is going Orange (Great!) but nothing is happening to the background colour?

The original GroupComponent Class doesn’t appear to do much, just:

void GroupComponent::paint (Graphics& g)
{
    getLookAndFeel().drawGroupComponentOutline (g, getWidth(), getHeight(),
                                                text, justification, *this);
}

The outline is still getting drawn so I guess my new paint function is not getting applied, could someone be so kind as to point me in the right direction?

2

This is not a thing, there is no paint() in a look-and-feel class. You need to override the drawGroupComponentOutline() function in your GroupLookAndFeel class.

3

Thanks, yep, I forgot that the drawGroupComponentOutline() is actually defined in LookAndFeelV2:

So you can do this:

class GroupLookAndFeel : public juce::LookAndFeel_V4
{
public:
    // Constructor
    //////////////
    GroupLookAndFeel()
    {
        setColour(juce::GroupComponent::outlineColourId, juce::Colours::orange);
        setColour(juce::GroupComponent::textColourId, juce::Colours::white);
    }

    void GroupLookAndFeel::drawGroupComponentOutline(juce::Graphics& g, int width, int height,
        const juce::String& text, const juce::Justification& position,
        juce::GroupComponent& group)
    {
        const float textH = 15.0f;
        const float indent = 3.0f;
        const float textEdgeGap = 4.0f;
        auto cs = 5.0f;

        juce::Font f(textH);

        juce::Path p;
        auto x = indent;
        auto y = f.getAscent() - 3.0f;
        auto w = juce::jmax(0.0f, width - x * 2.0f);
        auto h = juce::jmax(0.0f, height - y - indent);
        cs = juce::jmin(cs, w * 0.5f, h * 0.5f);
        auto cs2 = 2.0f * cs;

        // Draw a Background Colour
        ///////////////////////////
        g.setColour(juce::Colours::silver);
        g.fillRoundedRectangle(x, y, w, h, 4);

        auto textW = text.isEmpty() ? 0 : juce::jlimit(0.0f, juce::jmax(0.0f, w - cs2 - textEdgeGap * 2), f.getStringWidth(text) + textEdgeGap * 2.0f);
        auto textX = cs + textEdgeGap;

        if (position.testFlags(juce::Justification::horizontallyCentred))
            textX = cs + (w - cs2 - textW) * 0.5f;
        else if (position.testFlags(juce::Justification::right))
            textX = w - cs - textW - textEdgeGap;

        p.startNewSubPath(x + textX + textW, y);
        p.lineTo(x + w - cs, y);

        p.addArc(x + w - cs2, y, cs2, cs2, 0, juce::MathConstants<float>::halfPi);
        p.lineTo(x + w, y + h - cs);

        p.addArc(x + w - cs2, y + h - cs2, cs2, cs2, juce::MathConstants<float>::halfPi, juce::MathConstants<float>::pi);
        p.lineTo(x + cs, y + h);

        p.addArc(x, y + h - cs2, cs2, cs2, juce::MathConstants<float>::pi, juce::MathConstants<float>::pi * 1.5f);
        p.lineTo(x, y + cs);

        p.addArc(x, y, cs2, cs2, juce::MathConstants<float>::pi * 1.5f, juce::MathConstants<float>::twoPi);
        p.lineTo(x + textX, y);

        auto alpha = group.isEnabled() ? 1.0f : 0.5f;

        g.setColour(group.findColour(juce::GroupComponent::outlineColourId)
            .withMultipliedAlpha(alpha));

        g.strokePath(p, juce::PathStrokeType(2.0f));

        g.setColour(group.findColour(juce::GroupComponent::textColourId)
            .withMultipliedAlpha(alpha));
        g.setFont(f);
        g.drawText(text,
            juce::roundToInt(x + textX), 0,
            juce::roundToInt(textW),
            juce::roundToInt(textH),
            juce::Justification::centred, true);
    }
};

The Background Colour can be set with this bit of added code:

        // Draw a Background Colour
        ///////////////////////////
        g.setColour(juce::Colours::silver);
        g.fillRoundedRectangle(x, y, w, h, 4);

This kinda chops the Text in half though, so then maybe you might want to play with the Text Position as well?