Создать диспетчер компоновки сетки
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
При установке для параметра «Найти метод» значения «Квартили» в приложении метка «Размер окна» и вращатель рядом с ней скрываются.
Для просмотра списка объектов-компонентов в сетке выполните запрос Children свойство сетки. Изменение порядка в списке не приводит к изменению формата в сетке.