このページの内容は最新ではありません。最新版の英語を参照するには、ここをクリックします。
addStyle
UI コンポーネントにスタイルを追加
構文
説明
テーブル
addStyle( は、特定の行、列、またはセルにスタイルを追加します。たとえば、tbl,s,tableTarget,tableIndex)addStyle(tbl,s,"column",3) は、指定されたテーブルの 3 番目の列にスタイルを追加します。
ツリー
R2022a 以降
addStyle( は、特定のノード、サブツリー、またはツリー レベルにスタイルを追加します。たとえば、tr,s,treeTarget,treeIndex)addStyle(tr,s,"level",1) は、指定されたツリーの最上位のノードにスタイルを追加します。
リスト ボックス
R2023a 以降
addStyle( は、リスト ボックスの特定の項目にスタイルを追加します。たとえば、lb,s,listBoxTarget,listBoxIndex)addStyle(lb,s,"item",3) は、指定されたリスト ボックスの 3 番目の項目にスタイルを追加します。
ドロップダウン
R2023a 以降
addStyle( は、ドロップダウン コンポーネントの特定の項目にスタイルを追加します。たとえば、dd,s,dropDownTarget,dropDownIndex)addStyle(dd,s,"item",3) は、指定されたドロップダウン コンポーネントの 3 番目の項目にスタイルを追加します。
例
スタイルを作成し、それをテーブルに適用することで、テーブル列内のセルの背景色を変更します。
テーブル UI コンポーネントをもつ Figure を作成し、テーブルに数値データを入力します。
fig = uifigure; fig.Position = [500 500 520 220]; uit = uitable(fig); uit.Data = rand(5); uit.Position = [20 30 480 135];
次に、特定の背景色をもつスタイルを作成し、関数 addStyle を使用してそのスタイルをテーブルの 2 番目の列に追加します。
s = uistyle('BackgroundColor','red'); addStyle(uit,s,'column',2)
テーブル UI コンポーネント内の欠損値を含むセルのスタイルを設定します。この例では、NaN 値をもつセルに黄色の背景色スタイルを追加します。
津波のサンプル データを table 配列としてワークスペースに読み取ります。次に、データを表示するテーブル UI コンポーネントを作成します。
tdata = readtable('tsunamis.xlsx'); vars = {'Year','Month','Day','Hour', ... 'MaxHeight','Cause','EarthquakeMagnitude'}; tdata = tdata(1:100,vars); fig = uifigure('Position',[500 500 750 350]); uit = uitable(fig); uit.Position = [20 20 710 310]; uit.Data = tdata; uit.RowName = 'numbered';
関数 ismissing を使用して、欠損値を含むテーブル要素の logical 配列を取得します。NaN 値をもつ要素の行と列の添字を見つけます。最後に、黄色の背景色スタイルを作成し、テーブル UI コンポーネントの NaN 値を含むセルに追加します。
styleIndices = ismissing(tdata); [row,col] = find(styleIndices); s = uistyle('BackgroundColor','yellow'); addStyle(uit,s,'cell',[row,col])
複数のスタイルを作成し、テーブル UI コンポーネントのさまざまな部分に追加します。
テーブル UI コンポーネントを含む Figure を作成し、テーブル内に数値データを表示します。後からセルのスタイルを設定できるように、テーブル内でゼロより小さい値を含む要素の行と列の添字を見つけます。
fig = uifigure; fig.Position = [500 500 720 230]; uit = uitable(fig); uit.Data = randi([-20,20],7); uit.Position = [20 30 680 185]; [row,col] = find(uit.Data < 0);
背景色スタイルを 2 つと、フォントの色と太さを指定するスタイルを 1 つ作成します。シアンの背景色を、列 1、3、5 に追加します。フォントを赤の太字にすることにより、負の値を含むセルを強調します。次に、行 3 および行 4 に緑の背景色のスタイルを追加します。最後に、シアンの背景色のスタイルを再利用して列 7 に追加します。同じタイプの複数のスタイルがセルに追加される場合、最後に追加されるスタイルがセルに表示されます。
s1 = uistyle; s1.BackgroundColor = 'cyan'; addStyle(uit,s1,'column',[1 3 5]) s2 = uistyle; s2.FontColor = 'red'; s2.FontWeight = 'bold'; addStyle(uit,s2,'cell',[row,col]) s3 = uistyle; s3.BackgroundColor = 'green'; addStyle(uit,s3,'row',[3 4]) addStyle(uit,s1,'column',7)
簡単なアプリの階層を表示するツリーを作成し、それぞれの階層レベルを強調表示します。
MATLAB® アプリのコンポーネント階層を表すツリーを作成します。最上位に UI Figure ウィンドウがあります。Figure に UIAxes オブジェクトと Panel コンテナーを含めます。パネルには Button オブジェクトと DropDown オブジェクトがあります。ツリーのすべてのノードを展開して全階層を表示します。
fig = uifigure('Position',[100 100 250 350]); t = uitree(fig); fignode = uitreenode(t,'Text','UI Figure'); pnlnode = uitreenode(fignode,'Text','Panel'); axnode = uitreenode(fignode,'Text','UIAxes'); btnnode = uitreenode(pnlnode,'Text','Button'); ddnode = uitreenode(pnlnode,'Text','DropDown'); expand(t,'all')
異なる色調の青を背景色とする 3 つのスタイルを作成して、それぞれのツリー レベルを強調表示します。最も濃い背景をレベル 1 のノード、それよりも薄い背景をレベル 2 のノード、最も薄い背景をレベル 3 のノードに適用します。
s1 = uistyle('BackgroundColor','#3773EB'); s2 = uistyle('BackgroundColor','#78A1F2'); s3 = uistyle('BackgroundColor','#B5CBF8'); addStyle(t,s1,'level',1); addStyle(t,s2,'level',2); addStyle(t,s3,'level',3);
異なるファイル タイプを視覚的に区別できるように、ファイル構造を展示するツリー中のノードのスタイルを決定します。
ツリー UI コンポーネントを作成します。各最上位ノードはフォルダーを表します。各子ノードはそのフォルダー中のファイルを表します。ツリーを展開すると、すべてのノードが表示されます。
fig = uifigure("Position",[300 300 350 400]); t = uitree(fig); % Parent nodes n1 = uitreenode(t,"Text","App 1"); n2 = uitreenode(t,"Text","App 2"); n3 = uitreenode(t,"Text","Images"); % Child nodes n11 = uitreenode(n1,"Text","myapp1.m"); n21 = uitreenode(n2,"Text","myapp2.m"); n22 = uitreenode(n2,"Text","app2callback.m"); n31 = uitreenode(n3,"Text","peppers.png"); expand(t)
3 つのスタイルを作成します。1 つはフォントの太さが太字、1 つはフォントの角度がイタリック、1 つはアイコンです。
dirStyle = uistyle("FontWeight","bold"); mStyle = uistyle("FontAngle","italic"); imgStyle = uistyle("Icon","peppers.png");
太字のスタイルを最上位ノードに適用して、フォルダーを表すノードを区別します。イタリックのスタイルを App 1 ノードおよび App 2 ノードの子に適用して、MATLAB プログラム ファイルを表すノードを区別します。最後に、イメージ ファイルを表すノードにアイコンのスタイルを適用し、イメージのプレビューを表示します。
addStyle(t,dirStyle,"level",1) addStyle(t,mStyle,"node",[n1.Children;n2.Children]) addStyle(t,imgStyle,"node",n31)
R2023a 以降
異なるイメージを表す 3 つの項目を含むリスト ボックスを作成します。
fig = uifigure; lb = uilistbox(fig,"Items",["Peppers","Nebula","Street"]);
リスト ボックスの項目に対応するアイコンをもつ 3 つのスタイルを作成します。
s1 = uistyle("Icon","peppers.png"); s2 = uistyle("Icon","ngc6543a.jpg"); s3 = uistyle("Icon","street1.jpg");
スタイルをリスト ボックスの項目に追加してアイコンを表示します。
addStyle(lb,s1,"item",1); addStyle(lb,s2,"item",2); addStyle(lb,s3,"item",3);
R2023a 以降
3 つの項目を含むドロップダウン UI コンポーネントを作成します。
fig = uifigure; dd = uidropdown(fig,"Items",["Good","Fair","Poor"]);
背景色スタイルを 3 つ作成します。
s1 = uistyle("BackgroundColor","#77AC30"); s2 = uistyle("BackgroundColor","#EDB120"); s3 = uistyle("BackgroundColor","#F77A8F");
スタイルをドロップダウン コンポーネントの項目に追加して、それらの背景色を変更します。
addStyle(dd,s1,"item",1); addStyle(dd,s2,"item",2); addStyle(dd,s3,"item",3);
項目の背景色が更新され、選択された項目のスタイルがコンポーネントの外観に反映されます。このスタイルでは、ユーザーが項目をポイントしたときに表示される色は変わりません。
単一のスタイルをチェック ボックス ツリーおよびテーブル UI コンポーネント両方に追加して、まとまりのあるアプリの外観を作成します。
Figure ウィンドウを作成し、チェック ボックス ツリーおよびテーブルをグリッド レイアウト マネージャーに追加します。両方のコンポーネントに、いくつかのサンプル データを入力します。
fig = uifigure('Position',[300 300 450 330]); gl = uigridlayout(fig,[1 2]); gl.ColumnWidth = {'1x','2x'}; tr = uitree(gl,'checkbox'); n1 = uitreenode(tr,'Text','Reptiles'); n11 = uitreenode(n1,'Text','Snake'); n12 = uitreenode(n1,'Text','Dinosaur'); n2 = uitreenode(tr,'Text','Amphibians'); n21 = uitreenode(n2,'Text','Turtle'); expand(tr) tbl = uitable(gl,'Data',randi(100,[20 3]));
フォント色、フォント名、およびフォントの太さを指定するスタイルを作成します。このスタイルをツリー全体およびテーブル全体の両方に適用します。
s = uistyle('FontColor',[0.1 0.5 0.06], ... 'FontName','Calibri', ... 'FontWeight','bold'); addStyle(tr,s) addStyle(tbl,s)
入力引数
ヒント
UI コンポーネントに追加されているスタイルのリストを表示するには、コンポーネントの
StyleConfigurationsプロパティの値をクエリします。
バージョン履歴
R2019b で導入参考
関数
uistyle|removeStyle|uitable|uitree|uilistbox|uidropdown
プロパティ
- Style のプロパティ |
Table|Tree|CheckBoxTree|DropDown|ListBox
