チュートリアルLabelクラス
This tutorial introduces the ラベル class, which is a component for displaying text. A ラベル component can also be set to be editable so it's really useful for displaying text and simple text entry.
レベル：初級
プラットフォーム：Windows, macOS, Linux, iOS, Android
クラス： ラベル, テキストエディター, フォント, カラー
はじめる
Download the demo project for this tutorial here: ピップ | ジップ. Unzip the project and open the first header file in the Projucer.
If you need help with this step, see チュートリアルProjucerパート1：Projucerを始める.
The demo project
デモ・プロジェクトには多くのラベルが含まれている。そのうちのいくつかはテキストを表示するためのものですが、1つはテキストを入力するためのものです。デモ・プロジェクトを実行すると、次のスクリーンショットのようになるはずです：
白い背景のラベルをクリックすると編集可能になり、ラベルに微妙なボーダーが表示され、キャレットが表示される。これを次のスクリーンショットに示す。
このラベルには、以下のようにテキストを入力することができる：
リターンキーを押すか、ラベルから離れるようにクリックすると、編集可能な状態から外れます。これはリスナーにブロードキャストされる変更をコミットします。この場合、テキストを大文字に変換し、別のラベルに表示します：
This illustrates several different uses of the ラベル class for both displaying and entering text. There are actually five labels here that are used in slightly different ways:
- 見出しとして使われる上部の緑色のラベル。
- 他の固定テキストを表示するために使用される2つのオレンジ色のラベル。
- 動的に変化するテキストを表示するために使用される2つの長方形のボックス（そのうちの1つは、ユーザーからのテキスト入力を許可するためのもの）。
長方形のボックスの2つ目は、テキスト入力ボックスと区別するため、ごくわずかにグレーアウトされている。
Displaying text
This tutorial covers most of the main features of the ラベル class. The most fundamental feature of a label is that it displays some text! While you can draw your own text in your component's ペイント function (see チュートリアルGraphicsクラス) it is usually much more convenient to manage the layout of text using ラベル objects (or テキストエディター objects in some cases).
As you would expect, the text within a ラベル object can be displayed in any font, font size, bold, italics, and so on. The text can also be justified (aligned) within the component bounds to the left, right, centre, top, bottom, and using various other options.
The ラベル class can only contain a single run of text in the same font, size, and justification. To display multiple runs of text in different styles (as you would find in a word processor application) see the テキストエディター class. The テキストエディター class can also include horizontal and vertical scroll bars to display large amounts of text.
If the bounds of the component are too small to display all of the text requested then the ラベル class will try a few things to make the text fit. First, it will make the glyphs of the font a little narrower. If the glyphs are too narrow then the text will be unreadable, so beyond a certain point it gives up. In this case it truncates the text showing an ellipsis (...) at the end to show that this has been done. You can try this now by typing in the text "The quick brown fox jumps over the lazy dog" in the text entry label. In fact you can copy the text ("CMD-C" to copy on Mac OS X or "Ctrl-C" on Windows) from this page and paste it into the label using keyboard shortcuts ("CMD-V" to paste on Mac OS X or "Ctrl-V" on Windows). This capability is built in without you needing to add any code!
結果はこのようになるはずだ：
The original text just about fits but it is slightly squashed in the horizontal axis. The uppercase version is going to be a little wider since uppercase glyphs are usually wider than lowercase glyphs. The ラベル class decided that the uppercase version is too wide for it to squash the text in the horizontal axis and keep it readable. In this case it has truncated the text at the "L" in "LAZY" and added the ellipsis.
You can change the amount by which the text will be scaled using the Label::setMinimumHorizontalScale() function for each ラベル object. Using a value of 1.0f will disable the scaling. You can measure the height required for a single line in a particular font using the フォント::getHeight() function. To measure the width that an entire string would require to fit on a single line you can use the フォント::getStringWidth() function.
Basic label configuration
In the メインコンテンツコンポーネント constructor each of the labels in our application is configured. First we set up the title with a 16-point bold font, the text it should contain, the colour of the text, and we justify the text to the centre.
親コンポーネントにラベルを追加する：
ラベルのフォントを設定する：
ラベル内に表示するテキストを設定する：
ラベルテキストの色を設定する：
ラベルテキストの表示を正当化する：
The ジャスティフィケーション::中央揃え value centres the text in both vertical and horizontal axes. Have a look at the 正当化 class for more options.
Attaching a label to another component
As its name suggests, a ラベル component is often used as a label for another component. In this case a ラ ベル object can be 付属 to another component. Once a label is attached only the 所有者 component needs to be positioned. The attached label will follow its owner around the parent component. In our case we want the 入力ラベル object (that displays the text テキスト入力：) to be attached to the 入力テキスト object. The second argument to the [ラベル::attachToComponent()](classLabel.html#a3c2397c0da1249f9e27e2279e0f2d4eb "Makes this label "stick to" another component.") function states whether the label should be attached to the left or above the owner. The 真の argument means that it should be attached to the left:
addAndMakeVisible (inputLabel)；
inputLabel.setText ("テキスト入力:", juce::dontSendNotification)；
inputLabel.attachToComponent (&inputText, true)；
inputLabel.setColour (juce::Label::textColourId, juce::Colours::orange)；
inputLabel.setJustificationType (juce::Justification::right)；
大文字のテキストを表示するラベルも同様に設定する：
addAndMakeVisible (uppercaseLabel)；
uppercaseLabel.setText ("Uppercase:", juce::dontSendNotification)；
uppercaseLabel.attachToComponent (&uppercaseText, true)；
uppercaseLabel.setColour (juce::Label::textColourId, juce::Colours::orange)；
uppercaseLabel.setJustificationType (juce::Justification::right)；
addAndMakeVisible (uppercaseText)；
uppercaseText.setColour (juce::Label::backgroundColourId, juce::Colours::darkblue)；
In the リサイズ function we need to position only three of our five labels:
void resized() override
{
titleLabel .setBounds (10, 10, getWidth() - 20, 30)；
inputText .setBounds (100, 50, getWidth() - 110, 20)；
uppercaseText.setBounds (100, 80, getWidth() - 110, 20)；
}
Making a label editable
The final label that we set up in the メインコンテンツコンポーネント constructor is the editable text field.
addAndMakeVisible (inputText)；
inputText.setEditable (true)；
inputText.setColour (juce::Label::backgroundColourId, juce::Colours::darkblue)；
inputText.onTextChange = [this] { uppercaseText.setText (inputText.getText().toUpperCase(), juce::dontSendNotification); }；
The default behaviour when setting the label to editable using the Label::setEditable() function is to show the editor on a single click. The label can be set up to be editable on a double-click instead. If the user clicks off the label after entering some text then this will be confirmed even if the user doesn't hit the "Return" key. You can also changes this to make sure that users must hit the "Return" key to confirm data entry, if you prefer. See the API reference for this function for more information.
Add a button to the interface and use this to clear the text entry label. (See チュートリアルリスナーとブロードキャスター.)
Responding to changes
The lambda function is the callback for the Label::onTextChange helper object. Here we get the entered text, convert it to uppercase using the ストリング class, and set the text of the 大文字テキスト label.
inputText.onTextChange = [this] { uppercaseText.setText (inputText.getText().toUpperCase(), dontSendNotification); }；
dontSendNotification@dontSendNotification通知メッセージは送信されるべきではありません定義 juce_NotificationType.h:36
We can use 送信通知 instead of 通知を送信しない when calling Label::setText(). This will cause a label's listeners to be notified of the change (if the text is different from its current contents) in addition to the user changing the text from the user interface.
入力されたテキストを小文字で表示する別のラベルを追加する。
Other customisations
他にもいくつかカスタマイズが可能です。特にラベルは複数行のテキストを表示することができます。また、編集可能なラベル用にエディターをカスタマイズすることもできます。
Displaying multiline text
While the テキストエディター class is more flexible for large amounts of text, the ラベル class can display multiple lines of text. To do this, you just need to ensure that the height of the component is large enough to display more than one line of text.
To illustrate this, add the following member to the メインコンテンツコンポーネント class:
juce::Label infoLabel；
And add the following code to the メインコンテンツコンポーネント constructor:
addAndMakeVisible (infoLabel)；
juce::String infoText；
infoText << "このシンプルなアプリケーションは、ユーザーからテキスト入力を受け取り、"；
infoText << "大文字に変換し、別のラベルに表示します。";
infoText << "このアプリケーションは、Labelクラスのいくつかの便利な機能を示しています；
infoLabel.setText (infoText, juce::dontSendNotification)；
infoLabel.setColour (juce::Label::backgroundColourId, juce::Colours::darkblue)；
Finally, set the bounds of the 情報ラベル component in the リサイズ function:
infoLabel.setBounds (10, 110, getWidth() - 20, getHeight() - 120)；
先の練習問題でボタンと別のラベルを追加した場合は、境界を少し調整する必要があるかもしれません。
アプリケーションを実行すると、次のようになるはずです：
Changing the editor appearance
Some of the editor features can be set via the ラベル class itself. When the editor is created the ラベル class copies the font style and colours to the editor. Some of the Label::ColourIds values relate to the editor. For example, to change the border around the label when it is being edited you can use the Label::outlineWhenEditingColourId value for the Component::setColour() function:
addAndMakeVisible (inputText)；
inputText.setEditable (true)；
inputText.setColour (juce::Label::backgroundColourId, juce::Colours::darkblue)；
inputText.setColour (juce::Label::outlineWhenEditingColourId, juce::Colours::orangered)；
Other customisations can be achieved by implementing the Label::onEditorShow helper object. For example, you could make the text italic when being edited like this:
inputText.onEditorShow = [this].
{
auto* editor = inputText.getCurrentTextEditor()；
auto editorFont = editor->getFont()；
editorFont.setItalic (true)；
editor->setFont (editorFont)；
};
In practice — especially for large-scale applications — you would probably use the ルックアンドフィール class to customise the appearance of all of your components for consistency across your application.
概要
This tutorial has examined the ラベル class. While it is very easy to use, there are a number of useful features that make it powerful. We have covered:
- ラベルに表示されるテキストのフォントを変更する。
- ラベルに表示されるテキストの色を変更する。
- ラベルをシンプルなテキストエディタとして使用し、その外観をカスタマイズする。
- 複数行のテキストを表示する