uigridlayout
Создайте диспетчер размещений сетки
Синтаксис
Описание
g = uigridlayoutGridLayout объект. MATLAB® вызывает uifigure функция для создания рисунка. Используйте диспетчер размещений сетки, если вы не хотите позиционировать компоненты путем установки пиксельных значений в Position векторы.
Если вы добавляете компоненты в диспетчер размещений сетки, но не задаете Layout свойство компонентов, затем диспетчер размещений сетки добавляет компоненты слева направо и сверху вниз.
g = uigridlayout(___,Name,Value)GridLayout значения свойств с использованием одного или нескольких аргументов пары "имя-значение". Задайте аргументы пары "имя-значение" после всех других аргументов в любом из предыдущих синтаксисов.
Примеры
Простая сетка 3х2
Создайте рисунок и сетку. Затем настройте сетку путем установки высот строк и ширины столбцов. В этом случае сконфигурируйте сетку 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 свойство сетки. Изменение порядка в списке не приводит к изменению размещения в сетке.