Main Content

このページの翻訳は最新ではありません。ここをクリックして、英語の最新版を参照してください。

カスタム UI コンポーネント作成の概要

カスタム UI と可視化を作成するために、複数のグラフィックス オブジェクトと UI オブジェクトを組み合わせたり、それらのプロパティを変更したり、追加の関数を呼び出したりすることができます。R2020a 以前のリリースでは、カスタマイズ コードを保存し他者と共有する一般的な方法は、スクリプトまたは関数の作成です。

R2020b 以降は、スクリプトや関数の代わりに、ComponentContainer 基底クラスのサブクラスを定義することで UI コンポーネントのクラス実装を作成することができます。クラスの作成には以下の利点があります。

  • カスタマイズが簡単 — ユーザーが UI コンポーネントの特性をカスタマイズする場合、コードの変更と再実行を行うことなしに、プロパティを設定することができます。ユーザーはコマンド ラインでプロパティを変更したり、プロパティ インスペクターでプロパティを確認できます。

  • カプセル化 — コードをこの方法で整理することで、ユーザーに対し実装の詳細を非表示にすることができます。計算を実行し、基となるグラフィックス オブジェクトを管理するメソッドを実装します。

UI コンポーネント クラスの構造

UI コンポーネント クラスには、いくつかの必須部分と、いくつかのオプション部分があります。

UI コンポーネント クラスの最初の行では、matlab.ui.componentcontainer.ComponentContainer クラスをスーパークラスとして指定します。たとえば、ColorSelector というクラスの最初の行は次のようになります。

classdef ColorSelector < matlab.ui.componentcontainer.ComponentContainer

スーパークラスの指定に加えて、以下のコンポーネントをユーザー クラス定義に含めます。いくつかのコンポーネントは必須で、他のコンポーネントは推奨またはオプションです。

コンポーネント説明

パブリック プロパティ ブロック
(推奨)

このブロックは、ユーザーがアクセスできるすべてのプロパティを定義します。これらのプロパティが一緒になって、UI コンポーネントのユーザー インターフェイスを構成します。

プライベート プロパティ ブロック
(推奨)

このブロックは、ユーザーがアクセスできない、基となるグラフィックス オブジェクトや他の実装詳細を定義します。

このブロックでは、以下の属性値が設定されます。

  • Access = private

  • Transient

  • NonCopyable

イベント ブロック
(オプション)

このブロックは、この UI コンポーネントがトリガーするイベントを定義します。

このブロックでは、以下の属性値が設定されます。

  • HasCallbackProperty

  • NotifyAccess = protected

HasCallbackProperty 属性が設定されると、MATLAB® はブロック内のイベントごとにパブリック プロパティを作成します。そのパブリック プロパティには、イベントが発生すると実行される、ユーザー指定のコールバックが保存されます。

setup メソッド
(必須)

このメソッドは、UI コンポーネントの初期状態を設定します。MATLAB がオブジェクトを作成すると 1 回実行されます。

保護されたブロック内でこのメソッドを定義して、ユーザー クラスでのみ実行できるようにします。

update メソッド
(必須)

このメソッドは、UI コンポーネント内の基となるオブジェクトを更新します。以下の条件で実行されます。

  • 次回の drawnow の実行中、ユーザーが 1 つ以上のプロパティ値を変更した後

  • ユーザーのグラフィックス環境の特性 (サイズなど) が変更されたとき

このメソッドは、setup メソッドと同じ保護されたブロック内で定義します。

コンストラクター メソッド

コンストラクターは ComponentContainer 基底クラスから継承されるため、ユーザー クラスにコンストラクター メソッドを作成する必要はありません。継承されたコンストラクターは、オプションの入力引数 (親コンテナーと、UI コンポーネントにプロパティを設定するための任意数の名前と値のペアの引数) を受け入れます。たとえば、パブリック プロパティ Value および ValueChangedFcn をもつ ColorSelector というクラスを定義する場合、次のコードを使用してユーザー クラスのインスタンスを作成できます。

f = uifigure; 
c = ColorSelector(f,'Value',[1 1 0],'ValueChangedFcn',@(o,e)disp('Changed'))

別の構文または別の動作をもつコンストラクターを指定する場合は、カスタム コンストラクター メソッドを定義できます。カスタム コンストラクターの例は、チャート クラスのコンストラクターの作成を参照してください。

パブリックおよびプライベートのプロパティ ブロック

ユーザー クラスのプロパティを、少なくとも 2 つのブロック間で分割します。

  • ユーザー向けインターフェイスのコンポーネントを保存するためのパブリック ブロック

  • 非表示にする実装の詳細を保存するためのプライベート ブロック

パブリック ブロックに収められるプロパティは、ユーザーの指定する入力値を保存します。たとえば、ユーザーがカラー値を選択できる UI コンポーネントでは、パブリック プロパティにカラー値が保存されている可能性があります。プロパティの名前と値のペアの引数は暗黙的なコンストラクター メソッドのオプション入力であるため、パブリック プロパティを既定値に初期化する方法が推奨されます。

プライベート ブロックに収められるプロパティには、保存するすべての計算値に加えて、UI コンポーネントを構成する基となるグラフィックス オブジェクトが保存されます。最終的に、ユーザー クラスはパブリック プロパティ内のデータを使用して、基となるオブジェクトを構成します。プライベート ブロックに Transient 属性と NonCopyable 属性を設定することで、ユーザーが UI コンポーネントのインスタンスのコピーや保存をする場合に、冗長な情報が保存されることを回避します。

たとえば、次に示すのは、ユーザーがカラー値を選択できる UI コンポーネントのプロパティ ブロックです。パブリック プロパティ ブロックには、ユーザーが制御できる値としてカラー値が保存されています。プライベート プロパティ ブロックには、グリッド レイアウト マネージャー、ボタン、編集フィールドの各オブジェクトが保存されています。

properties
    Value {validateattributes(Value, ...
        {'double'},{'<=',1,'>=',0,'size',[1 3]})} = [1 0 0];   
end

properties(Access = private,Transient,NonCopyable)
    Grid matlab.ui.container.GridLayout 
    Button matlab.ui.control.Button 
    EditField matlab.ui.control.EditField
end   

イベント ブロック

オプションとして、UI コンポーネントが発生させるイベント用に 3 番目のブロックを追加することができます。

HasCallbackProperty 属性を指定することにより、ブロック内に各イベントのパブリック プロパティを作成します。そのパブリック プロパティには、イベントが発生すると実行される、ユーザー指定のコールバックが保存されます。パブリック プロパティの名前は、イベント名に文字 Fcn を追加したものとなります。たとえば、ユーザーがカラー値を選択できる UI コンポーネントがイベント ValueChanged を定義するならば、これによって、対応するパブリック プロパティ ValueChangedFcn が生成されます。notify メソッドを使用してイベントを発生させ、プロパティ内のコールバックを実行します。

たとえば、ユーザーがカラー値を選択できる UI コンポーネントに対するイベント ブロックは、次のようになります。

events (HasCallbackProperty, NotifyAccess = protected) 
    ValueChanged 
end 
ユーザーがカラー値を選択すると、notify メソッドが呼び出されて ValueChanged イベントが発生し、ValueChangedFcn プロパティ内のコールバックが実行されます。
function getColorFromUser(obj)
    c = uisetcolor(obj.Value);
    if (isscalar(c) && (c == 0))
        return;
    end
    
    % Update the Value property
    oldValue = obj.Value;
    obj.Value = c;

    % Execute user callbacks and listeners
    notify(obj,'ValueChanged');
end
ユーザーが UI コンポーネントのインスタンスを作成する際には、生成されたパブリック プロパティを使用して、カラー値が変更されると実行されるコールバックを指定することができます。
f = uifigure; 
c = ColorSelector(f,'ValueChangedFcn',@(o,e)disp('Changed'))
プロパティに対するコールバックの指定の詳細については、プログラムによって作成されたアプリのコールバックの記述を参照してください。

setup メソッド

クラスに setup メソッドを定義します。setup メソッドは、MATLAB が UI コンポーネント オブジェクトを作成するときに一度実行されます。名前と値のペアの引数としてコンストラクター メソッドに渡されたプロパティ値は、このメソッドの実行後に割り当てられます。

次の場合に setup メソッドを使用します。

  • コンポーネントを構成するグラフィックス オブジェクトと UI オブジェクトを作成する。

  • オブジェクトをプライベート プロパティとしてコンポーネント オブジェクト上に保存する。

  • オブジェクトの配置と構成を行う。

  • コンポーネント内で有用な動作をするよう、オブジェクトを互いにつなげる。

自分の UI コンポーネント クラスのみが setup メソッドを実行できることを確実にするため、定義は保護されたブロック内で行います。

ほとんどの UI オブジェクト作成関数には、親を指定するためのオプションの入力引数があります。クラス メソッド内からこれらの関数を呼び出す際には、ターゲットの親を指定しなければなりません。setup メソッドは、設定されている UI コンポーネント オブジェクトのインスタンスを表す 1 つの引数を取ります。この引数を使用して、setup メソッド内からオブジェクト作成関数を呼び出す際のターゲットの親として、UI コンポーネントを指定します。

たとえば、次のプロパティをもつ UI コンポーネントについて考えます。

  • Value という 1 つのパブリック プロパティ

  • GridButton、および EditField というプライベート プロパティ

setup メソッドでは、UI コンポーネントのインスタンス (obj) をターゲットの親として指定し、関数 uigridlayoutuieditfielduibutton を呼び出して各プライベート プロパティの基となるグラフィックス オブジェクトを作成します。

function setup(obj) 
    % Create grid layout to manage building blocks 
    obj.Grid = uigridlayout(obj,[1 2],'ColumnWidth',{'1x',22},... 
        'RowHeight',{'fit'},'ColumnSpacing',2,'Padding',2); 

    % Create edit field for entering color value
    obj.EditField = uieditfield(obj.Grid,'Editable',false,... 
        'HorizontalAlignment','center'); 

    % Create button to confirm color change
    obj.Button = uibutton(obj.Grid,'Text',char(9998), ... 
        'ButtonPushedFcn',@(o,e) obj.getColorFromUser()); 
end 

update メソッド

ユーザー クラスに update メソッドを定義します。このメソッドは、UI コンポーネント オブジェクトが値の変化に応じてその外観を変える必要がある場合に実行されます。

update メソッドを使用して、パブリック プロパティの新しい値を基に、UI コンポーネント内の基となるグラフィックス オブジェクトを再構成します。通常、このメソッドではどのパブリック プロパティが変更されたかを判定しません。パブリック プロパティに依存する、基となるグラフィックス オブジェクトのすべての特性が再構成されます。

たとえば、次のプロパティをもつ UI コンポーネントについて考えます。

  • Value という 1 つのパブリック プロパティ

  • GridButton、および EditField というプライベート プロパティ

update メソッドは、Value に保存されている色を使って EditField オブジェクトと Button オブジェクトの BackgroundColor を更新します。update メソッドはまた、色の数値表現によっても EditField オブジェクトを更新します。この方法では、Value がどのように変更されても、その変更はあらゆる場所で等しく可視化されます。

function update(obj)      
    % Update edit field and button colors 
    set([obj.EditField obj.Button],'BackgroundColor',obj.Value, ... 
        'FontColor',obj.getContrastingColor(obj.Value));  

    % Update edit field display text 
    obj.EditField.Value = num2str(obj.Value,'%0.2g ');            

end

プロパティ値を変更してから、それら変更の結果が表示されるまでには遅延が生ずる場合があります。update メソッドは、setup メソッドの実行後に初めて実行され、その後は、drawnow が実行されるたびに実行されます。関数 drawnow は、ユーザーの MATLAB セッションにおけるグラフィックス環境の状態に基づき、定期的に自動実行されます。この定期的な実行は、遅延につながる可能性があります。

例: カラー セレクターの UI コンポーネント

この例では、このページの他の節で説明されているコードを使用して、色を選択するための UI コンポーネントを作成する方法を説明します。ColorSelectorComponent.m という名前のクラス定義ファイルを、MATLAB パス上にあるフォルダー内に作成します。以下の手順に従ってクラスを定義します。

手順実装

ComponentContainer 基底クラスから派生させます。

classdef ColorSelector < matlab.ui.componentcontainer.ComponentContainer

パブリック プロパティを定義します。

    properties
        Value {validateattributes(Value, ...
            {'double'},{'<=',1,'>=',0,'size',[1 3]})} = [1 0 0]; 
    end

パブリック イベントを定義します。

    events (HasCallbackProperty, NotifyAccess = protected) 
        ValueChanged % ValueChangedFcn will be the generated callback property 
    end

プライベート プロパティを定義します。

    properties (Access = private, Transient, NonCopyable) 
        Grid matlab.ui.container.GridLayout 
        Button matlab.ui.control.Button 
        EditField matlab.ui.control.EditField 
    end

setup メソッドを実装します。この場合、uigridlayoutuieditfielduibutton の各関数を呼び出して、GridLayoutEditFieldButton の各オブジェクトを作成します。これらのオブジェクトを、対応するプライベート プロパティに保存します。

getColorFromUser メソッドを、ボタンを押すと呼び出される ButtonPushedFcn コールバックとして指定します。

    methods (Access = protected) 
        function setup(obj) 
            % Grid layout to manage building blocks 
            obj.Grid = uigridlayout(obj,[1,2],'ColumnWidth',{'1x',22}, ... 
                'RowHeight',{'fit'},'ColumnSpacing',2,'Padding',2);              

            % Edit field for value display and button to launch uisetcolor 
            obj.EditField = uieditfield(obj.Grid,'Editable',false, ... 
                'HorizontalAlignment','center'); 
            obj.Button = uibutton(obj.Grid,'Text',char(9998), ... 
                'ButtonPushedFcn',@(o,e) obj.getColorFromUser()); 

        end 

update メソッドを実装します。この場合、編集フィールドの基となるオブジェクトの背景色とテキストを更新してカラー値を表示します。

        function update(obj)     
            % Update edit field and button colors 
            set([obj.EditField obj.Button],'BackgroundColor',obj.Value, ... 
                'FontColor',obj.getContrastingColor(obj.Value));  

            % Update the display text 
            obj.EditField.Value = num2str(obj.Value,'%0.2g ');            
        end 
    end 

プライベート メソッドを使用して、コールバックと他の要素をつなげます。

ボタン押下で getColorFromUser メソッドがトリガーされると、関数 uisetcolor が呼び出されてカラー ピッカーを開き、次に関数 notify が呼び出されてユーザーのコールバック関数とリスナー関数を実行します。

update メソッドによって getContrastingColor メソッドが呼び出されると、新しい背景色上で黒と白のいずれのテキストがより読みやすいかが計算されます。

    methods (Access = private) 
        function getColorFromUser(obj) 
            c = uisetcolor(obj.Value); 
            if (isscalar(c) && (c == 0)) 
                return; 
            end 
            
            % Update the Value property 
            obj.Value = c;              

            % Execute user callbacks and listeners
            notify(obj,'ValueChanged'); 
        end         
        function contrastColor = getContrastingColor(~,color) 
            % Calculate opposite color 
            c = color * 255; 
            contrastColor = [1 1 1]; 
            if (c(1)*.299 + c(2)*.587 + c(3)*.114) > 186 
                contrastColor = [0 0 0]; 
            end 
        end 
    end 
end

次に、いくつかのパブリック プロパティを指定して暗黙的なコンストラクター メソッドを呼び出すことで、UI コンポーネントのインスタンスを作成します。コールバックを、カラー値が変更されると Color changed という語が表示されるように指定します。

h = ColorSelector('Value', [1 1 0]); 
h.ValueChangedFcn = @(o,e) disp('Color changed');

Instance of the color selector UI component displaying the color yellow.

ボタンをクリックし、カラー ピッカーを使用して色を選択します。コンポーネントの外観が変わり、MATLAB は Color changed の語をコマンド ウィンドウに表示します。

Instance of the color selector UI component displaying the color blue.

参考

クラス

関数

関連するトピック