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

ラジオボタンとチェックボックス

📚 Source Page

ラジオボタンとチェックボックスを使用して、アプリケーションに選択可能なオプションを追加します。

レベル初心者

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

クラス： ToggleButton,Button,Label,String

スタート​

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

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

デモ・プロジェクト​

このデモ・プロジェクトは、JUCEにおけるラジオ・ボタンとチェック・ボックスの使い方を説明しています。これらは通常ToggleButtonクラスでは、どのJUCEButtonコンポーネントは、個別のトグル・ボタンとしても、「ラジオ・グループ」の一部としても使用できます。デモ・アプリケーションでは、いくつかの見出しを表示しています。Labelクラス）とToggleButtonコンポーネントを使用している：

デモ・アプリケーション
デモ・アプリケーション

ラジオボタンとチェックボックス​

このチュートリアルではButtonクラスを使用します。通常はToggleButtonクラスを使うことができるが、前述のように、どんなボタンでもトグル・タイプのボタンに設定できる。標準のToggleButtonコンポーネントは、テキストとテキストの左側にある "バブル "で構成され、このバブルには目盛りが入っているか、入っていないかのどちらかである。(この外観は、必要に応じてLookAndFeelクラス)。この2つの状態は、前のセクションのスクリーンショットで見ることができる。

の中でMainContentComponentのコンストラクタでは、"male "と "female "のボタンは以下のように設定される：

        addAndMakeVisible (maleButton);
        addAndMakeVisible (femaleButton);
        maleButton  .onClick = [this] { updateToggleState (&maleButton,   "Male");   };
        femaleButton.onClick = [this] { updateToggleState (&femaleButton, "Female"); };

ここではToggleButtonオブジェクトはTextButtonオブジェクトがあります。Tutorial: Listeners and Broadcasters).この2つのトグルボタンを相互に排他的にするには、同じ「ラジオグループ」に追加する必要がある。こうすることで、一度にトグルできるのはどちらか一方だけになります（もう一方のボタンをオンにすると、今度はもう一方のボタンがオフになります）。A無線グループIDはゼロ以外の整数で、相互に排他的でなければならないボタンのグループを識別するために使用される。これに加えて、同じ無線グループIDが同じ親コンポーネントの子コンポーネントでなければ動作しません。(ボタンが異なる親コンポーネントや異なるウィンドウ内にある場合は、この相互排他的な動作を自分で実装する必要があります)。

列挙値 (GenderButtons)を私たちの無線グループIDこの例では

    enum RadioButtonIds
    {
        GenderButtons = 1001
    };

そしてButton::setRadioGroupId()関数を使用して無線グループID.

        maleButton  .setRadioGroupId (GenderButtons);
        femaleButton.setRadioGroupId (GenderButtons);
注記

に注目してほしい。setRadioGroupId()関数はButtonクラスだけでなくToggleButtonクラスに追加できます。どのようなボタンでもラジオグループの一部にできますが、それはおそらく、そのボタンが（単にクリックイベントをインターセプトするのではなく）オンとオフの切り替えを期待するように設定されている場合にのみ意味があります。

他の3人ToggleButtonオブジェクトは、無線グループに追加することなく設定される：

        addAndMakeVisible (sportButton);
        addAndMakeVisible (artButton);
        addAndMakeVisible (filmButton);
        sportButton.onClick = [this] { updateToggleState (&sportButton, "Sport"); };
        artButton  .onClick = [this] { updateToggleState (&artButton,   "Art");   };
        filmButton .onClick = [this] { updateToggleState (&filmButton,  "Film");  };
注記

Buttonオブジェクトを無線グループから削除するにはButton::setRadioGroupId()関数の引数をゼロにする。

トグル状態の変化への対応​

オン・オフを切り替えられるボタンへの反応は、通常のボタンクリックへの反応と似ている。ボタンがトグルされたときに呼び出したい関数を指定する必要があります。Button::onClickヘルパー・オブジェクト（上のコード・スニペットでわかる）。

違いは、updateToggleState()関数でボタンのトグル状態をチェックする必要があることです。そのためにButton::getToggleState()関数のメンバーである。これもButtonクラスを返すので、これはどんなボタンにも有効です。falseその他の場合）。

    void updateToggleState (juce::Button* button, juce::String name)
    {
        auto state = button->getToggleState();

この例では、トグルの変更をロガーにポストしています：

        juce::String stateString = state ? "ON" : "OFF";
 
        juce::Logger::outputDebugString (name + " Button changed to " + stateString);
    }

特に、"男性 "か "女性 "のどちらかのボタンをオンにすると、もう一方のボタンは "オフ "になることに注意してください。そしてで報告されている。updateToggleState()関数である。

エクササイズ

さらにToggleButtonもちろん、趣味は簡単に追加できる。例えば、「言いたくない」とか「その他」とか。

他のボタンをトグルとして使う​

前述したとおりだ、いずれもボタンをトグル・ボタンとして使うことができる。説明のために、すべてのToggleButtonオブジェクトをTextButtonオブジェクトの型を変更する必要があります。ここで必要なのは、メンバー変数の型をTextButtonクラスである：

    juce::Label genderLabel         { {}, "I identify my gender as..."};
    juce::ToggleButton maleButton   { "Male" },
                       femaleButton { "Female" };
 
    juce::Label hobbiesLabel        { {}, "My hobbies are..." };
    juce::ToggleButton sportButton  { "Sport" },
                       artButton    { "Art" },
                       filmButton   { "Film"};
 
    //==============================================================================
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainContentComponent)
};

しかし、マウスクリックでボタンを切り替えられるようにするためにはButton::setClickingTogglesState()関数を使用する。これを行うには、以下のコードをMainContentComponentビルダー

        maleButton  .setClickingTogglesState (true);
        femaleButton.setClickingTogglesState (true);
        sportButton .setClickingTogglesState (true);
        artButton   .setClickingTogglesState (true);
        filmButton  .setClickingTogglesState (true);

このコードを実行すると、元のアプリケーションと同じように使えるが、外観が異なるものが出来上がる：

テキストボタンをトグルボタンとして使用する
テキストボタンをトグルボタンとして使用する
注記

参照Tutorial: Colours in JUCEテキストボタンのオンとオフの状態の色をカスタマイズするためのガイダンスを参照してください。

テキストを使用してボタンのトグル状態を表示する​

ボタンのトグル状態によって表示されるテキストを変えたい場合もあるだろう。これを行うには、単純にButton::setButtonText()関数を使用する。updateToggleState()関数を使います。これを試すにはupdateToggleState()関数は次のようになる：

    void updateToggleState (juce::Button* button, juce::String name)
    {
        auto state = button->getToggleState();
        juce::String stateString    = state ? "ON" : "OFF";
        juce::String selectedString = state ? " (selected)" : "";
 
        juce::Logger::outputDebugString (name + " Button changed to " + stateString);
        button->setButtonText (name + selectedString);
    }

この場合、ボタンがトグル・オンの状態であれば、通常のボタン・テキストに"(selected) "というテキストを追加するだけである。

注記

このテクニックはTextButtonこのようにToggleButtonコンポーネントを使用している。

これで我々のアプリケーションは以下のスクリーンショットのようになる：

トグルの状態に応じてボタンのテキストを変更する
トグルの状態に応じてボタンのテキストを変更する

概要​

このチュートリアルでは、チェックボックスとラジオボタン形式のコントロールの使い方を紹介しました。特に、自分のアプリケーションで以下のようなことができるようになるはずです：

  • 用途ToggleButtonオブジェクトの状態の変化に対応する。
  • 変更ToggleButtonオブジェクトのテキストは、その状態によって変わる。
  • グループToggleButtonオブジェクトを "ラジオ・グループ "を形成する。
  • その他Buttonコンポーネントをトグルとして使用する。

参照​