Создайте диспетчер размещений сетки
g = uigridlayoutGridLayout объект. MATLAB® вызывает uifigure функция для создания рисунка. Используйте диспетчер размещений сетки, если вы не хотите позиционировать компоненты путем установки пиксельных значений в Position векторы.
Если вы добавляете компоненты в диспетчер размещений сетки, но не задаете Layout свойство компонентов, затем диспетчер размещений сетки добавляет компоненты слева направо и сверху вниз.
g = uigridlayout(___,Name,Value)GridLayout значения свойств с использованием одного или нескольких аргументов пары "имя-значение". Задайте аргументы пары "имя-значение" после всех других аргументов в любом из предыдущих синтаксисов.
Создайте рисунок и сетку. Затем настройте сетку путем установки высот строк и ширины столбцов. В этом случае сконфигурируйте сетку 3 на 2, в которой две верхние строки фиксируются на 22 пикселях, в то время как нижняя строка имеет переменную высоту. Установите ширину левого столбца 150 пикселей и ширину правого столбца. Сетка заполняет весь рисунок, но поскольку сетка невидима, рисунок выглядит пустой.
fig = uifigure('Position',[100 100 440 320]); g = uigridlayout(fig); g.RowHeight = {22,22,'1x'}; g.ColumnWidth = {150,'1x'};
Добавьте в сетку два выпадающих списков, список и компонент осей. Если вы не задаете расположение строк или столбцов для Layout свойство компонентов, они заполняют сетку слева направо и сверху вниз по умолчанию. В этом случае переместите второй выпадающий список (dd2) и поле списка (chanlist) к конкретным строкам и столбцам путем установки Layout свойство.
% Device drop-down dd1 = uidropdown(g); dd1.Items = {'Select a device'}; % Range drop-down dd2 = uidropdown(g); dd2.Items = {'Select a range'}; dd2.Layout.Row = 2; dd2.Layout.Column = 1; % List box chanlist = uilistbox(g); chanlist.Items = {'Channel 1','Channel 2','Channel 3'}; chanlist.Layout.Row = 3; chanlist.Layout.Column = 1; % Axes ax = uiaxes(g);
Установите для осей диапазон строк с 1 по 3, заполнив вертикальное пространство.
ax.Layout.Row = [1 3];
При изменении размера рисунка оси растут и сжимаются, чтобы заполнить доступное пространство, которое левый столбец не использует. Компоненты на левой оси остаются неподвижными, поскольку столбец задан как 150 пиксели шириной.
При присвоении различных весов столбцам переменной ширины ширина каждого столбца пропорциональна весу. Строки переменной высоты выделяют пространство так же.
Создайте рисунок и сетку 2 на 2. Затем настройте высоты строк и ширины столбцов. В этом случае верхняя строка фиксируется на уровне 40 пикселей, в то время как нижняя строка имеет переменную высоту. Оба столбца имеют переменную ширину, но второй столбец имеет удвоенное значение веса первого столбца. Поскольку сетка невидима, рисунок выглядит пустой.
fig = uifigure('Position',[100 100 437 317]); g = uigridlayout(fig,[2 2]); g.RowHeight = {40,'1x'}; g.ColumnWidth = {'1x','2x'};
Добавить метку между обоими столбцами верхней строки. Затем добавьте компонент осей к каждому столбцу нижней строки.
% Add title title = uilabel(g,'Text','Market Trends'); title.HorizontalAlignment = 'center'; title.FontSize = 24; title.Layout.Row = 1; title.Layout.Column = [1,2]; % Add two axes ax1 = uiaxes(g); ax2 = uiaxes(g);
Поскольку левый столбец имеет вес 1, и правый столбец имеет вес 2, оси справа используют в два раза больше горизонтального пространства, чем оси слева. Сетка сохраняет это соотношение при изменении размера рисунка.
Один из способов расположения компонентов пользовательского интерфейса на панели - создать сетку на панели.
Создать рисунок и сетку 1 на 2. Затем настройте ширину столбца. В этом случае левый столбец фиксируется на 220 пиксели, в то время как правый столбец имеет ширину переменной. Поскольку сетка невидима, рисунок выглядит пустой.
fig = uifigure('Position',[100 100 500 315]); grid1 = uigridlayout(fig,[1 2]); grid1.ColumnWidth = {220,'1x'};
Добавьте панель и оси к grid1.
p = uipanel(grid1,'Title','Configuration'); ax = uiaxes(grid1);
Создайте сетку под названием grid2 внутри панели. Затем поместите три компонента и три метки внутрь grid2. Левый столбец grid2 выравнивает метки вместе с компонентами. Поскольку каждая строка использует только 22 пикселя, у панели есть дополнительное пространство ниже третьей строки.
% Grid in the panel grid2 = uigridlayout(p,[3 2]); grid2.RowHeight = {22,22,22}; grid2.ColumnWidth = {80,'1x'}; % Device label dlabel = uilabel(grid2); dlabel.HorizontalAlignment = 'right'; dlabel.Text = 'Device'; % Device drop-down devicedd = uidropdown(grid2); devicedd.Items = {'Select a device'}; % Channel label chlabel = uilabel(grid2); chlabel.HorizontalAlignment = 'right'; chlabel.Text = 'Channel'; % Channel drop-down channeldd = uidropdown(grid2); channeldd.Items = {'Channel 1', 'Channel 2'}; % Rate Label ratelabel = uilabel(grid2); ratelabel.HorizontalAlignment = 'right'; ratelabel.Text = 'Rate (scans/s)'; % Rate edit field ef = uieditfield(grid2, 'numeric'); ef.Value = 50;
При изменении размера рисунка оси растут и сжимаются, чтобы заполнить доступное пространство, которое находится в левом столбце grid1 не использует. Панель остается фиксированной, поскольку этот столбец имеет ширину 220 пикселей.
Вложенные сетки позволяют управлять подмножествами компонентов. В этом случае существует три сетки: одна сетка, которая покрывает весь рисунок, вторая сетка, которая управляет вертикальным стеком компонентов, и третья сетка, которая управляет двумя кнопками, которые находятся один за другим в нижней части вертикального стека.
Создать рисунок и сетку 1 на 2. Затем настройте ширину столбца. В этом случае левый столбец фиксируется на 150 пиксели, в то время как правый столбец имеет ширину переменной. Поскольку сетка невидима, рисунок выглядит пустой.
fig = uifigure('Position',[100 100 500 315]); grid1 = uigridlayout(fig,[1 2]); grid1.ColumnWidth = {150,'1x'};
Создайте сетку 4 на 1 под названием grid2 внутри первого столбца grid1. Затем добавьте компонент осей во второй столбец grid1.
grid2 = uigridlayout(grid1,[4 1]);
grid2.RowHeight = {22,22,22,44};
ax = uiaxes(grid1);
Добавьте три выпадающих списков к первым трем строкам grid2.
% Routes drop-down ddRoutes = uidropdown(grid2); ddRoutes.Items = {'Route 1', 'Route 2'}; % Direction drop-down ddDirection = uidropdown(grid2); ddDirection.Items = {'Inbound', 'Outbound'}; % Time drop-down ddTime = uidropdown(grid2); ddTime.Items = {'Morning', 'Afternoon'};
Создайте сетку 1 на 2 под названием grid3 внутри последней строки grid2. Затем добавьте две кнопки к grid3. Удалите заполнение на левых и правых ребрах grid3 так, чтобы кнопки совпали с левыми и правыми ребрами выпадающих списков.
grid3 = uigridlayout(grid2,[1 2]); grid3.Padding = [0 10 0 10]; b1 = uibutton(grid3,'Text','Start'); b2 = uibutton(grid3,'Text','Stop');
При изменении размера рисунка оси растут и сжимаются, чтобы заполнить доступное пространство, которое находится в левом столбце grid1 не использует. Компоненты на левой оси остаются неподвижными, поскольку столбец задан как 150 пиксели шириной.
Отобразите дочерние компоненты прокручиваемого размещения сетки путем определения пиксельных координат или имени местоположения.
Создайте размещение сетки 5 на 2 и установите Scrollable свойство сетки для 'on'. Затем добавьте метку, таблицу и панель к сетке. Установите Scrollable свойство панели, чтобы 'off' а затем добавить график на панель.
fig = uifigure('Position',[782 497 435 311]); g = uigridlayout(fig,'Scrollable','on'); g.RowHeight = {22,40,22,22,400}; g.ColumnWidth = {400,400}; lbl = uilabel(g,'Text','Tsunamis'); lbl.Layout.Row = 2; lbl.Layout.Column = [1,2]; lbl.HorizontalAlignment = 'center'; lbl.FontSize = 28; tsunamis = readtable('tsunamis.xlsx'); tsunamis.Cause = categorical(tsunamis.Cause); t = uitable(g,'Data',tsunamis); t.Layout.Row = [3,5]; t.Layout.Column = 2; p = uipanel(g); p.Scrollable = 'off'; p.Layout.Row = [3,5]; p.Layout.Column = 1; gb = geobubble(p,tsunamis.Latitude,tsunamis.Longitude,... tsunamis.MaxHeight,tsunamis.Cause);
Прокрутка до местоположения в сетке.
scroll(g,100,-30)
Теперь используйте имена местоположений для прокрутки в правом нижнем углу сетки.
scroll(g,'bottom','right')
Создайте диспетчер размещений сетки, который автоматически корректирует размеры его строк и столбцов в соответствии с компонентами, такими как метки, когда вы добавляете их в приложение или когда размер шрифта текстовых компонентов изменяется динамически.
Создайте менеджер размещения сетки 5 на 2. Задайте 'fit' для ширины первого столбца и первых четырех высот строк.
fig = uifigure('Position',[500 500 430 310]); g = uigridlayout(fig); g.ColumnWidth = {'fit',120,'1x'}; g.RowHeight = {'fit','fit','fit','fit','1x'};
Создайте метку заголовка, которая охватывает все столбцы. Затем создайте метки и элементы управления вдоль строк первого и второго столбцов. Наконец, создайте компонент пользовательского интерфейса таблицы в последнем столбце, который охватывает строки с двух по пять. Заметьте, что когда вы добавляете компоненты к строкам и столбцам с 'fit' высота и ширина, размер этих строк и столбцов автоматически подстраивается под новое содержимое.
patientLabel = uilabel(g,'Text','Patient:'); patientLabel.Layout.Row = 2; patientLabel.Layout.Column = 1; patientEdit = uieditfield(g); ageLabel = uilabel(g,'Text','Age:'); ageLabel.Layout.Row = 3; ageLabel.Layout.Column = 1; ageEdit = uidropdown(g,'Items',{'<20','20 - 40','40 - 60','>60'}); stateLabel = uilabel(g,'Text','State:'); stateLabel.VerticalAlignment = 'top'; stateLabel.Layout.Row = 4; stateLabel.Layout.Column = 1; stateLB = uilistbox(g,'Items',{'MA','VA','WY'}); tdata = readtable('patients.dat'); uit = uitable(g); uit.Data = tdata; uit.Layout.Row = [2 5]; uit.Layout.Column = 3;
Теперь измените название шрифта и размер шрифта всех компонентов пользовательского интерфейса в сетке.
set(allchild(g),'FontName','Lucida Console','FontSize',20)
Скрыть компоненты в строке сетки на основе выбора пользователя в раскрывающемся меню.
Создайте программный файл с именем showhide.m. В файле,
Создайте сетку 1 на 2 на рисунке и вызовите ее grid1. Эта сетка используется для управления панелью и компонентом осей.
Создайте сетку 3х2 внутри панели и вызовите ее grid2. Эта сетка используется для управления размещением раскрывающегося меню, двух счетчиков и их меток.
Создайте функцию обратного вызова findMethodSelected для раскрывающегося меню. Когда значение выпадающего меню меняется на 'Quartiles'обратный коллбэк скрывает компоненты во второй строке grid2 путем установки grid2.RowHeight{2} на 0.
Затем запустите файл.
function showhide f = uifigure('Name','Statistical Analysis'); % Create grid1 in the figure grid1 = uigridlayout(f); grid1.RowHeight = {'1x'}; grid1.ColumnWidth= {220,'1x'}; % Add a panel and axes p = uipanel(grid1); ax = uiaxes(grid1); % Create grid2 in the panel grid2 = uigridlayout(p); grid2.RowHeight = {22, 22, 22}; grid2.ColumnWidth = {80,'1x'}; % Add method label and drop-down findMethodLabel = uilabel(grid2,'Text','Find Method:'); findMethod = uidropdown(grid2); findMethod.Items = {'Moving median','Quartiles'}; findMethod.ValueChangedFcn = @findMethodSelected; % Add window size label and spinner winSizeLabel = uilabel(grid2,'Text','Window Size:'); winSize = uispinner(grid2,'Value',0); % Add threshold label and spinner thresLabel = uilabel(grid2,'Text','Threshold:'); thres = uispinner(grid2,'Value',3); function findMethodSelected(src,~) method = src.Value; switch method case 'Quartiles' % Collapse the second row (hides winSize spinner) grid2.RowHeight{2} = 0; case 'Moving median' % Expand the second row grid2.RowHeight{2} = 22; end end end
Когда вы устанавливаете Find Method, чтобы Quartiles в приложении, метка Window Size и счетчик рядом с ней становятся скрытыми.
Чтобы просмотреть список объектов компонента в сетке, запросите Children свойство сетки. Изменение порядка в списке не приводит к изменению размещения в сетке.