メインコンテンツまでスキップ

チュートリアルLabelクラス

📚 Source Page

このチュートリアルではLabelクラスは、テキストを表示するためのコンポーネントです。ALabelコンポーネントは編集可能にも設定できるので、テキストの表示や簡単なテキスト入力にとても便利です。

レベル初心者

プラットフォーム：Windows, macOS, Linux, iOS, Android

クラス： Label,TextEditor,Font,Colours

スタート​

このチュートリアルのデモ・プロジェクトのダウンロードはこちらから：PIP|ZIP.プロジェクトを解凍し、最初のヘッダーファイルをProjucerで開く。

このステップにヘルプが必要な場合は、以下を参照してください。Tutorial: Projucer Part 1: Getting started with the Projucer.

デモ・プロジェクト​

デモ・プロジェクトには多くのラベルが含まれている。そのうちのいくつかはテキストを表示するためのものですが、1つはテキストを入力するためのものです。デモ・プロジェクトを実行すると、次のスクリーンショットのようになるはずです：

アプリケーションの初登場
アプリケーションの初登場

白い背景のラベルをクリックすると編集可能になり、ラベルに微妙なボーダーが表示され、キャレットが表示される。これを次のスクリーンショットに示す。

テキスト入力ラベルがフォーカスされたアプリケーション
テキスト入力ラベルがフォーカスされたアプリケーション

このラベルには、以下のようにテキストを入力することができる：

テキスト入力ラベルにテキストを入力する
テキスト入力ラベルにテキストを入力する

リターンキーを押すか、ラベルから離れるようにクリックすると、編集可能な状態から外れます。これはリスナーにブロードキャストされる変更をコミットします。この場合、テキストを大文字に変換し、別のラベルに表示します：

テキストは大文字に変換され、別のラベルに表示されます。
テキストは大文字に変換され、別のラベルに表示されます。

これは、いくつかの異なる使い方を示している。Labelクラスは、テキストの表示と入力の両方に使用される。ここには5つのラベルがあり、それぞれ微妙に異なる方法で使われている：

  • 見出しとして使われる上部の緑色のラベル
  • 他の固定テキストを表示するために使用される2つのオレンジ色のラベル
  • 動的に変化するテキストを表示するために使用される2つの長方形のボックス（そのうちの1つは、ユーザーからのテキスト入力を許可するためのもの）

長方形のボックスの2つ目は、テキスト入力ボックスと区別するため、ごくわずかにグレーアウトされている。

テキストの表示​

このチュートリアルではLabelクラスがあります。ラベルの最も基本的な機能は、テキストを表示することです！コンポーネントのpaint()関数 (Tutorial: The Graphics classを使用してテキストのレイアウトを管理する方がはるかに便利です。Labelオブジェクト（またはTextEditorオブジェクトの場合もある）。

ご想像の通りLabelオブジェクトは、任意のフォント、フォントサイズ、太字、斜体などで表示することができます。また、テキストはコンポーネントの境界内で左、右、中央、上、下、その他様々なオプションを使ってジャスティファイ（整列）させることができます。

注記

についてLabelクラスは、同じフォント、サイズ、ジャスティフィケーションを持つ単一のテキストのみを含むことができます。ワープロ・アプリケーションで見られるような）異なるスタイルで複数のテキストを表示するにはTextEditorクラスである。そのTextEditorクラスには、大量のテキストを表示するための水平および垂直スクロールバーを含めることもできます。

コンポーネントの境界が小さすぎて、要求されたテキストをすべて表示できない場合はLabelクラスはテキストをフィットさせるためにいくつかのことを試みます。まず、フォントのグリフを少し狭くします。グリフが狭すぎるとテキストが読めなくなるので、ある点を超えるとあきらめます。この場合、テキストは切り捨てられ、最後に省略記号 (...) が表示される。テキスト入力ラベルに "The quick brown fox jumps over the lazy dog "と入力して試してみてください。実際、このページからテキストをコピーし（Mac OS Xでは "CMD-C "でコピー、Windowsでは "Ctrl-C "でコピー）、キーボードショートカット（Mac OS Xでは "CMD-V "で貼り付け、Windowsでは "Ctrl-V "で貼り付け）を使ってラベルに貼り付けることができる。この機能は、コードを追加することなく組み込まれています！

結果はこのようになるはずだ：

Labelクラスが多すぎるテキストに対処する2つの方法
Labelクラスが多すぎるテキストに対処する2つの方法

元のテキストはぎりぎり収まるが、横軸が少しつぶれている。大文字のグリフは小文字のグリフよりも幅が広いのが普通なので、大文字のバージョンは少し幅が広くなる。そのLabelクラスは、横軸のテキストをつぶして読みやすくするためには、大文字のバージョンは幅が広すぎると判断した。この場合、"LAZY "の "L "でテキストを切り捨て、省略記号を追加した。

注記

テキストを拡大縮小する量はLabel::setMinimumHorizontalScale()関数を使用する。Labelオブジェクトを使用する。の値を使用する。1.0fはスケーリングを無効にします。特定のフォントの1行に必要な高さはFont::getHeight()関数を使います。文字列全体が1行に収まる幅を測定するにはFont::getStringWidth()関数である。

ラベルの基本構成​

の中でMainContentComponentコンストラクタで、アプリケーションの各ラベルを設定します。まず、タイトルを16ポイントの太字フォントで設定し、そこに含まれるテキスト、テキストの色を設定し、テキストを中央揃えにしている。

親コンポーネントにラベルを追加する：

        addAndMakeVisible (titleLabel);

ラベルのフォントを設定する：

        titleLabel.setFont (juce::Font (16.0f, juce::Font::bold));

ラベル内に表示するテキストを設定する：

        titleLabel.setText ("Click in the white box to enter some text...", juce::dontSendNotification);

ラベルテキストの色を設定する：

        titleLabel.setColour (juce::Label::textColourId, juce::Colours::lightgreen);

ラベルテキストの表示を正当化する：

        titleLabel.setJustificationType (juce::Justification::centred);
注記

についてJustification::centred値は、縦軸と横軸の両方でテキストを中央に配置します。をご覧ください。Justificationクラスは、より多くのオプションを提供する。

別のコンポーネントにラベルを貼り付ける​

その名の通りLabelコンポーネントは別のコンポーネントのラベルとして使われることが多い。この場合Labelオブジェクトは付属を別のコンポーネントに貼り付けることができる。ラベルが貼られると所有者コンポーネントを配置する必要があります。添付されたラベルは、親コンポーネントの周りにその所有者に従います。私たちの場合はinputLabelオブジェクト（テキストを表示するテキスト入力：)に取り付けられる。inputTextオブジェクトの第2引数。の第2引数はLabel::attachToComponent()関数は、ラベルをオーナーの左側に付けるか、上側に付けるかを指定する。この関数はtrue引数は、左側に付けることを意味する：

        addAndMakeVisible (inputLabel);
        inputLabel.setText ("Text input:", 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);

の中でresized()関数では、5つのラベルのうち3つだけを配置する必要がある：

    void resized() override
    {
        titleLabel   .setBounds (10,  10, getWidth() - 20,  30);
        inputText    .setBounds (100, 50, getWidth() - 110, 20);
        uppercaseText.setBounds (100, 80, getWidth() - 110, 20);
    }

ラベルを編集可能にする​

最後のラベルはMainContentComponentコンストラクタは編集可能なテキスト・フィールドである。

        addAndMakeVisible (inputText);
        inputText.setEditable (true);
        inputText.setColour (juce::Label::backgroundColourId, juce::Colours::darkblue);
        inputText.onTextChange = [this] { uppercaseText.setText (inputText.getText().toUpperCase(), juce::dontSendNotification); };
注記

を使用してラベルを編集可能に設定した場合のデフォルトの動作は次のとおりです。Label::setEditable()の機能はシングルクリックでエディターを表示することです。ラベルはダブルクリックで編集できるように設定できます。ユーザーがテキストを入力した後にラベルをクリックすると、"Return "キーを押さなくても確定されます。ユーザーがデータ入力を確定するために "Return "キーを押さなければならないように変更することもできます。詳細については、この関数のAPIリファレンスを参照してください。

エクササイズ

インターフェイスにボタンを追加し、これを使ってテキスト入力ラベルをクリアする。参照Tutorial: Listeners and Broadcasters.)

変化への対応​

ラムダ関数はLabel::onTextChangeヘルパー・オブジェクトを使います。ここでは入力されたテキストを取得し、大文字に変換するためにStringクラスのテキストを設定する。uppercaseTextのラベルが貼られている。

inputText.onTextChange = [this] { uppercaseText.setText (inputText.getText().toUpperCase(), dontSendNotification); };
dontSendNotification@ dontSendNotificationNo notification message should be sent.Definition juce_NotificationType.h:48
注記

を使うことができる。sendNotificationの代わりにdontSendNotificationを呼び出すとLabel::setText().これにより、ユーザーがユーザーインターフェイスからテキストを変更するだけでなく、ラベルのリスナーにも変更が通知されます（テキストが現在の内容と異なる場合）。

エクササイズ

入力されたテキストを小文字で表示する別のラベルを追加する。

その他のカスタマイズ​

他にもいくつかカスタマイズが可能です。特にラベルは複数行のテキストを表示することができます。また、編集可能なラベル用にエディターをカスタマイズすることもできます。

複数行テキストの表示​

一方TextEditorクラスは大量のテキストに対してより柔軟です。Labelクラスは複数行のテキストを表示することができます。これを行うには、コンポーネントの高さが1行以上のテキストを表示するのに十分な大きさであることを確認すればよい。

これを説明するために、以下のメンバーをMainContentComponentクラスである：

juce::Label infoLabel;

そして、以下のコードをMainContentComponentビルダー

addAndMakeVisible (infoLabel);
juce::String infoText;
infoText << "This simple application takes some text input from the user, ";
infoText << "converts it to uppercase, and displays this in another label. ";
infoText << "The application demonstrates a number of useful features of the Label class.";
infoLabel.setText (infoText, juce::dontSendNotification);
infoLabel.setColour (juce::Label::backgroundColourId, juce::Colours::darkblue);

最後にinfoLabelコンポーネントのresized()関数である：

infoLabel.setBounds (10, 110, getWidth() - 20, getHeight() - 120);
注記

先の練習問題でボタンと別のラベルを追加した場合は、境界を少し調整する必要があるかもしれません。

アプリケーションを実行すると、次のようになるはずです：

複数行テキストの表示
複数行テキストの表示

エディタの外観を変更する​

エディター機能の一部はLabelクラスそのものです。エディタが作成されるとLabelクラスはフォントのスタイルと色をエディタにコピーします。いくつかのLabel::ColourIds値はエディタに関連します。例えば、編集中のラベルの境界線を変更するにはLabel::outlineWhenEditingColourIdComponent::setColour() 関数の値：

addAndMakeVisible (inputText);
inputText.setEditable (true);
inputText.setColour (juce::Label::backgroundColourId, juce::Colours::darkblue);
inputText.setColour (juce::Label::outlineWhenEditingColourId, juce::Colours::orangered);

その他のカスタマイズはLabel::onEditorShowヘルパー・オブジェクトを使います。例えば、このように編集中のテキストを斜体にすることができる：

inputText.onEditorShow = [this]
{
    auto* editor = inputText.getCurrentTextEditor();
 
    auto editorFont = editor->getFont();
    editorFont.setItalic (true);
    editor->setFont (editorFont);
};
注記

実際には、特に大規模なアプリケーションでは、おそらくLookAndFeelクラスを使用して、アプリケーション全体の一貫性を保つために、すべてのコンポーネントの外観をカスタマイズすることができます。

概要​

このチュートリアルではLabelクラスである。使い方はとても簡単だが、強力な便利な機能がいくつもある。私たちはそれを取り上げてきた：

  • ラベルに表示されるテキストのフォントを変更する。
  • ラベルに表示されるテキストの色を変更する。
  • ラベルをシンプルなテキストエディタとして使用し、その外観をカスタマイズする。
  • 複数行のテキストを表示する

こちらも参照​