主要内容

以编程方式布局应用程序

应用程序由一个图形和一个或多个UI组件组成,这些组件被放置在图形中。MATLAB®应用程序构建工具提供了许多以编程方式管理应用程序布局的选项。例如,您可以编写代码来指定图形及其组件的大小和位置,使组件彼此对齐,并指定从前到后的组件顺序。

管理图形大小和位置

图形作为每个应用程序的顶级容器uifigure函数创建用于应用程序构建的配置图。

属性来更新图形在应用程序用户显示上的大小和位置位置图形的属性。指定位置作为四元向量的形式:

[左下宽高]
向量中的每个元素都表示一个距离(以像素为单位),该距离不包括图形边框和标题栏。该表描述了每个元素。

元素 描述
从主要显示的左边缘到图形窗口左内边缘的距离
从主要显示的下边缘到图形窗口内底边缘的距离
宽度 图形的右内边和左内边之间的距离
高度 图形的上内缘和下内缘之间的距离

例如,这段代码创建的图形窗口距离主显示器的下边缘100像素,距离主显示器的左边缘200像素,宽度为400像素,高为300像素,不包括图形边框和标题栏。

FIG = ufigure;fig.Position = [100 200 400 300];

带有注释尺寸的图形窗口。

控件可将图形窗口放置在应用程序用户屏幕上的特定位置,而不受用户显示大小的影响movegui函数。指定图形和显示位置。例如,这段代码将图形窗口移动到应用程序用户主显示的中心。

movegui(图,“中心”);

布局UI组件

要设计应用程序的视觉外观,请在图形窗口中设置UI组件的大小和位置。使用以下方法之一来布局组件:

  • 使用网格布局管理器-对齐你的UI组件相对于另一个,并允许应用程序管理你的组件如何调整大小。对于大多数应用程序构建目的,推荐使用这种方法。

  • 指定位置属性-在初始应用程序布局中手动定位组件。当您希望在网格布局管理器的选项之外指定自定义调整大小行为时,此方法非常有用。

使用网格布局管理器

网格布局管理器是一个容器,可以让您按行和列布局UI组件。控件为应用程序创建一个网格布局管理器uigridlayout函数,并将网格布局管理器父化到主图形窗口。控件的属性来管理网格的大小和配置GridLayout对象。将组件添加到网格中,方法是将组件父化到网格布局管理器中,并通过设置每个组件的行和列布局财产。

例如,使用网格布局管理器来布局一个包含按钮、旋转器和文本区域的应用程序。给按钮一个固定的大小,但让其他组件拉伸以填充额外的水平空间。此外,通过在组件的上方和下方添加可以扩展以填充额外垂直空间的空行,将组件垂直居中。

要做到这一点,通过传递创建一个四行两列的网格(4 - 2)作为第二个输入uigridlayout

FIG = ufigure;fig.Position(3:4) = [300 300];Gl = uigridlayout(图,[4 2]);

然后,创建UI组件并将它们作为网格布局管理器的父组件。控件布局组件布局。行而且布局。列属性。

通过将按钮和旋转器添加到第二行,将它们放在一起。

BTN = uibutton(gl);btn.Layout.Row = 2;btn.Layout.Column = 1;SPN = uispinner(gl);spn.Layout.Row = 2;spn.Layout.Column = 2;

通过将文本区域添加到第三行来定位下面的文本区域。将文本区域布局为跨越网格的第一列和第二列布局。列财产(1 2)

Ta = uitextarea(gl);ta.Layout.Row = 3;ta.Layout.Column = [1 2];

图形,旋转器旁边有一个按钮,下面有一个文本区域。每个组件的高度是图形窗口高度的四分之一。

在创建网格布局管理器时,默认情况下,每一行具有相同的高度,每列具有相同的宽度。控件来调整UI组件的大小和位置RowHeight而且ColumnWidth网格布局管理器的属性。

将第二行高度设置为自动缩放以适应其内容,并将第三行高度固定为100像素。设置第一行和第四行高度为“1 x”.这指定顶部和底部行具有相同的高度,并展开以填充剩余的垂直空间,从而确保组件在图形窗口中居中。

gl.RowHeight = {“1 x”“健康”, 100,“1 x”};

将第一列的宽度设置为自动缩放以适应其内容。这将调整按钮的宽度以适应其文本的长度。将第二列的宽度设置为“1 x”填满剩余的水平空间。

gl.ColumnWidth = {“健康”“1 x”};

图形,旋转器旁边有一个按钮,下面有一个文本区域。按钮的大小适合其文本,旋转器的高度与按钮的高度相同。文本区域的高度为100像素。

使用网格布局管理器的另一个好处是,您可以使用ColumnWidth而且RowHeight属性来管理应用程序中的UI组件在应用程序用户调整图形窗口大小时如何调整大小。有关更多信息,请参见以编程方式管理应用程序调整大小的行为

指定位置财产

或者,你可以手动定位UI组件在你的应用程序位置财产。使用此属性可控制图形窗口中组件的大小和位置。指定的值位置作为一个四元向量的形式[左下宽高]

例如,使用位置属性以布局包含按钮、旋转器和文本区域的应用程序。将按钮和旋转器水平对齐,指定它们与图形的底边距离相同且高度相同。将文本区域定位在按钮和滑块的下方,并将其宽度设置为与上面两个组件的宽度相同。

FIG = ufigure;fig.Position(3:4) = [300 300];BTN = uibutton(图);btn。位置= [10 195 45 22];SPN = uispinner(fig);spn。位置= [65 195 225 22];Ta = uitextarea(图);助教。Position = [10 85 280 100];

图形,旋转器旁边有一个按钮,下面有一个文本区域。按钮和转轮水平对齐。文本区域的高度为100像素。

UI组件的位置是相对于该组件的直接父组件计算的。例如,如果在面板中创建标签,则而且的位置向量标签对象指示到面板(而不是图形窗口)左边缘和底边的距离。

更改前后组件顺序

堆垛顺序UI组件的排列顺序决定了哪些组件出现在应用程序中其他重叠组件的前面。组件的默认堆叠顺序如下:

  • UI组件和容器按照创建它们的顺序出现。新组件出现在现有组件前面。

  • 轴和其他图形对象出现在UI组件和容器后面。

这个默认顺序的例外是选项卡组中的选项卡。在选项卡组中创建的第一个选项卡显示在其他选项卡的顶部。

例如,这段代码在一个图形中创建三个重叠的图像。首先创建的图像在底部,最后创建的图像在顶部。

FIG = ufigure;fig.Position = [100 100 350 300];辣椒= uiimage(fig);辣椒。ImageSource =“peppers.png”;Street = uiimage(fig);街。ImageSource =“street1.jpg”;street.Position(1:2) = [130 150];星云= uiimage(图);星云。ImageSource =“ngc6543a.jpg”;星云位置(1:2)= [150 80];

图形窗口,顶部是一个星云,中间是一条街道,底部是辣椒。

要修改应用程序中的堆叠顺序,请使用孩子们财产。数字对象和其他应用程序容器,如面板ButtonGroupGridLayoutTabGroup,选项卡对象具有孩子们财产。此属性根据堆叠顺序列出容器内的子对象。对于大多数容器,最前面的对象被列在前面。例外情况是GridLayout,其中最后面的对象列在前面,并且TabGroup,其中最左边的TAB首先列出。若要更改容器内的堆叠顺序,请更改容器中组件的顺序孩子们财产。

属性重新排列图像的堆叠顺序孩子们属性设置为新的前后图像顺序。

图.儿童=[街头星云辣椒];

图形窗口,顶部是街道,中间是星云,底部是辣椒。

堆叠顺序有一些限制。轴和其他图形对象可以按任何顺序堆叠。然而,坐标轴和其他图形对象总是出现在UI组件和容器后面。

您可以通过将图形对象父化到单独的容器来解决这个限制。然后,您可以以任何顺序堆叠这些容器。要将图形对象父化到容器,请设置其属性为该容器。例如,你可以养育一个对象设置为面板的属性成为专家组。

相关的话题