JUCE学习笔记04-LookAndFeel类自定义Slider颜色

JUCE学习笔记04——LookAndFeel类自定义Slider颜色

知识点：

1.自定义旋钮式Slider的颜色
2.LookAndFeel类基础用法

目标：

使用默认LookAndFeel设置Slider各部分的颜色，自定义LookAndFeel创建Slider的颜色

内容：

一、使用默认LookAndFeel设置Slider的颜色

1.创建两个旋钮样式的Slider，添加到主组件，设置基本属性及位置

private:
	Slider dial1;
	Slider dial2;

  MainComponent::MainComponent()
{
    setSize (600, 400);
	
	addAndMakeVisible(dial1);
	dial1.setSliderStyle(Slider::SliderStyle::Rotary);	//设置Slider样式
	dial1.setTextBoxStyle(Slider::TextBoxBelow, true, 50, 20); //设置文本框
	dial1.setRange(0, 100, 1);				//设置值范围
	dial1.setValue(80);					//设置默认值

	addAndMakeVisible(dial2);
	dial2.setSliderStyle(Slider::SliderStyle::Rotary);   
	dial2.setTextBoxStyle(Slider::TextBoxBelow, true, 50, 20);
	dial2.setRange(-63, 64, 1);
	dial2.setValue(0);
}

{
	//设置Slider显示位置
	int marginX = getWidth() / 20;
	const int marginY = 30;
	int dialWidth = (getWidth() - marginX) / 2;
	int dialHeight = (getWidth() - marginX) / 2;

	dial1.setBounds(marginX, marginY, dialWidth, dialHeight);
	dial2.setBounds(marginX + dialWidth, marginY, dialWidth, dialHeight);
}

运行效果：

2.使用默认LookAndFeel设置旋钮式Slider手柄（thumb）、背景、填充的颜色

getLookAndFeel().setColour(Slider::thumbColourId, Colours::blue); //设置手柄颜色
getLookAndFeel().setColour(Slider::rotarySliderOutlineColourId, Colours::grey);//设置旋钮数值条背景颜色
getLookAndFeel().setColour(Slider::rotarySliderFillColourId, Colours::yellow);  //设置旋钮填充色

运行效果：

二、自定义LookAndFeel类设置Slider的颜色

1.新建LookAndFeel类，继承自LookAndFeel_V4，同样设置手柄、旋钮内外部颜色

class MyLookAndFeel :public LookAndFeel_V4
{
public :
	MyLookAndFeel()
	{
		setColour(Slider::thumbColourId, Colours::white);
		setColour(Slider::rotarySliderOutlineColourId, Colours::grey);
		setColour(Slider::rotarySliderFillColourId, Colours::red);
	}
};

2.创建自定义的LookAndFeel类对象，应用与其中一个Slider旋钮

MyLookAndFeel myLookAndFeel;

dial1.setLookAndFeel(&myLookAndFeel); 

运行效果：（左边为自定义LookAndFeel类的样式，右边默认样式）

3.注意点：由于自定义的LookAndFeel类对象在父组件删除时不会自动删除，需手动管理，否则关闭应用程序时会产生断点，因此需在组件的析构函数中添加：

MainComponent::~MainComponent()
{
	dial1.setLookAndFeel(nullptr);
}

完整代码：

//MainComponent.h
#pragma once

#include "../JuceLibraryCode/JuceHeader.h"

//==============================================================================
/*
    This component lives inside our window, and this is where you should put all
    your controls and content.
*/
class MyLookAndFeel :public LookAndFeel_V4
{
public :
	MyLookAndFeel()
	{
		setColour(Slider::thumbColourId, Colours::white);
		setColour(Slider::rotarySliderOutlineColourId, Colours::grey);
		setColour(Slider::rotarySliderFillColourId, Colours::red);
	}
};

class MainComponent   : public Component
{
public:
    //==============================================================================
    MainComponent();
    ~MainComponent();
    //==============================================================================
    void paint (Graphics&) override;
    void resized() override;

private:
	Slider dial1;
	Slider dial2;
    MyLookAndFeel myLookAndFeel;

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};

//MainComponent.cpp
#include "MainComponent.h"

//==============================================================================
MainComponent::MainComponent()
{
    setSize (600, 400);
	
	addAndMakeVisible(dial1);
	dial1.setSliderStyle(Slider::SliderStyle::Rotary);			//设置Slider样式
	dial1.setTextBoxStyle(Slider::TextBoxBelow, true, 50, 20);  //设置文本框
	dial1.setRange(0, 100, 1);									//设置值范围
	dial1.setValue(80);											//设置默认值

	addAndMakeVisible(dial2);
	dial2.setSliderStyle(Slider::SliderStyle::Rotary);   
	dial2.setTextBoxStyle(Slider::TextBoxBelow, true, 50, 20);
	dial2.setRange(-63, 64, 1);
	dial2.setValue(0);

	dial1.setLookAndFeel(&myLookAndFeel);

	/*
	getLookAndFeel().setColour(Slider::thumbColourId, Colours::blue); //设置手柄颜色
	getLookAndFeel().setColour(Slider::rotarySliderOutlineColourId, Colours::grey);//设置旋钮数值条背景颜色
	getLookAndFeel().setColour(Slider::rotarySliderFillColourId, Colours::yellow);  //设置旋钮填充色
	*/
}

MainComponent::~MainComponent()
{
	dial1.setLookAndFeel(nullptr);
}

//==============================================================================
void MainComponent::paint (Graphics& g)
{

}

void MainComponent::resized()
{
	//设置Slider显示位置
	int marginX = getWidth() / 20;
	const int marginY = 30;
	int dialWidth = (getWidth() - marginX) / 2;
	int dialHeight = (getWidth() - marginX) / 2;

	dial1.setBounds(marginX, marginY, dialWidth, dialHeight);
	dial2.setBounds(marginX + dialWidth, marginY, dialWidth, dialHeight);
}