使用Matlab的应用程序布局设计

一个应用程序的布局由几个包含用户界面（UI）元素的组件组成。用户界面元素主要分为四类：输入控制元素、信息元素、导航组件和容器。

Matlab为使用Matlab函数以编程方式开发基于UI-figure的应用程序布局提供了一个互动环境。基于Uifigure的应用程序是使用旨在开发应用程序的用户界面数字设计的。

用户界面元素在应用程序中执行不同的功能。用户界面元素的行为和外观被添加为该元素的属性和功能。

前提条件

要继续学习本教程，您需要具备以下条件。

• 安装了[MATLAB]。
• 正确理解[MATLAB的基础知识]。

教学目的

在这篇文章中，我们将讨论基于UI-figure的应用程序的以下布局结构的设计。

• 容器。
• 组件。
• 对话框和通知框。

容器

容器是将应用程序的组件放在一起的结构。Matlab中默认的用户界面容器是用函数uifigure 。

容器的标题是用语法fig=uifigure('Name','figure title'); ，而位置是用函数fig.position=[]; 。

下面的代码片断演示了默认容器的创建。

fig = uifigure('Name','Broadsheet 1);  % container title
fig.position = [580 550 360 280]; %figure position

UIfigure容器的类型

容器的类型包括。

• 面板容器。
• 标签组容器。

面板容器

面板容器用于将用户界面组件组合在一起。面板容器是用函数uipanel(); 。

面板容器的属性是用函数uipanel(Name, value); 来指定的。该值使用一个或多个参数来定义。

函数parent 在指定的父容器中创建一个面板。父容器属性的语法如下所示。

panel=uipanel(parent,Name,value);`

下面的代码片段显示了创建一个包含两个面板和一个按钮的图。主面板被标记为 "面板1"，子面板被标记为 "面板2"，按钮被标记为 "开始"。

fig = figure; % Main container
%Main panel properties
main_panel = uipanel('Title','Panel 1','FontSize',15,...
             'BackgroundColor','red',...
             'Position',[.25 .1 .67 .67]);
% sub panel properties
sub_panel = uipanel('Parent',main_panel,'Title','panel 2', 'FontSize',12,...
              'Position',[.4 .1 .5 .5]);
% button properties
c = uicontrol('Parent',sub_panel,'String','Start',...
              'Position',[18 18 72 36]);

标签组容器

一个标签组容器是用函数uitabgroup() 。它允许在不同的标签中进行识别和导航。

标签组容器的属性是使用语法uitabgroup(Name,value) 。指定父容器的语法是uitabgroup(Parent,Name,value) 。

为了演示，我们将创建一个有两个标签的标签组。第一个标签的标题是 "工具"，第二个标签的标题是 "视图"。

fig = figure;
tab_group = uitabgroup(fig,'Position',[.07 .05 .3 .8]); % tab group position in the main container
tab1 = uitab(tab_group,'Title','Tools'); % first tab properties
tab2=uitab(tab_group,'Title','View'); %second tab properties

标签组也可以包含其他用于选项选择和输入控制的组件。像下拉按钮这样的组件是用函数uidropdown(); ，而复选框是用函数uicheckbox(); 。

下面的代码片断显示了如何设计标签组容器，容纳具有指定属性的组件。例如，主标签的标题是 "成员性别"，下拉按钮将包含两个选项："男性 "和 "女性"，而按钮将被标记为 "Enter"。

fig = uifigure; % main container
tab_group = uitabgroup(fig,'Position',[50 50 196 145]); % tab group properties
t = uitab(tab_group,'Title','Member gender'); % main tab properties
drop_down = uidropdown(t,'Position',[11 90 140 22],'Items',{'Male','Female'}); % drop down button properties
cb = uicheckbox(t,'Position',[11 65 140 22],'Text','Member'); %check box properties
b = uibutton(t,'Position',[11 40 140 22],'Text','Enter'); % button properties

组件

应用程序中的组件使用户能够执行以下操作。

• 在应用程序中导航。
• 为应用程序提供信息。
• 与用户分享信息。

我们将讨论以下应用程序组件的创建。

• 按钮。
• 复选框。
• 下拉式。

按钮

按钮是用函数uibutton(); 来创建的。一个按钮上可以有一个文本或图标。

使用下面的代码片断可以创建一个简单的按钮布局。

f = uifigure % main figure
b = uibutton(f);

按钮的属性是使用语法uibutton(fig,'properties'); 来添加的。这些属性包括按钮的位置和信息内容。

例如，我们将设计一个状态按钮，在[100,50,30,100]的位置显示按摩 "复位"。

f=uifigure % Main container
btn = uibutton(f,'state','Text','Reset','Value',true,'Position',[60,110,110,25]); % button properties

按钮的主要类型是单选和切换。单选按钮是用函数uiradiobutton() ，而切换按钮是用函数uitogglebutton(); 。

复选框

复选框允许用户在应用程序中选择或取消选择项目。被选中的项目会用"√"或 "破折号 "来标记。

在Matlab中，使用函数uicheckbox() 来创建一个复选框。复选框的名称和位置可以通过语法uicheckbox('Name', 'value'); 来添加。

下面的代码片断演示了复选框的创建过程。当复选框被点击时，它将被自动选中。

f = uifigure; % main container
check_box = uicheckbox(f); % checkbox function

下拉式

下拉式提供了一个特定动作的选项列表。函数uidropdown(); 被用来创建一个下拉菜单。使用语法uidropdown(figure, 'value'); ，可以添加下拉的可见属性。

f = uifigure;% main container
drop_down = uidropdown(f,'Items',{'Road','Air','Water','Pipeline','Railway'},'Value','Road'); % drop down properties

对话框和通知

对话框和通知元素使应用程序能够向用户传达警告、警报、特定活动的进展或指示。

对话框和通知元素通常伴随着特定的标志信息的图标。我们将讨论以下对话和通知元素的布局设计。

• 警告对话框。
• 确认对话框。

警报对话框

提醒对话框是用来通知应用程序用户需要注意的信息的。它是用函数uialert() 来创建的。下面的代码片段显示了带有按摩 "不支持的格式 "的警报对话框布局的设计。

f = uifigure; % main container
uialert(f,'Unsupported format','invalid file'); % alert box  messages

下面的代码片断显示了如何使用警报对话框进行警告。

fig = uifigure; % main container
message = {'Too loud!','Consider reducing the volume.'}; % message to display
uialert(fig,message,'Warning',...
'Icon','warning'); % alert box properties

确认对话框

使用函数uiconfirm ，创建一个确认对话框。它使用户能够指示应用程序处理某些活动。该指令从应用程序提供的选项中选择。

一个确认对话框可以有一个或多个选项可供选择。

我们将创建一个确认框，标题为 "退出"，并显示 "你是否要保存这个文件"。可用的选项将是'保存，不保存，和取消''。下面的代码显示了这个过程。

fig = uifigure; %main containerx
msg = 'Do you want to save this file.'; % confirmation dialog box massage
title ='Quit'; % box title
selections= uiconfirm(fig,msg,title, ...
           'Options',{'save','do not save','Cancel'}, ...
           'DefaultOption',2,'CancelOption',3); % options available for selection

结论

应用程序布局设计用于设计移动应用程序或网站。此外，应用程序在通信、数据存储和娱乐方面都有帮助。这篇文章展示了Matlab是如何提供一个交互式的环境来使用Matlab函数设计应用程序布局的。