有一阵子没写过和GUI有关的推文了，前一阵子我学了点PyQt里面有界面的布局，就想着MATLAB中应该也有类似的功能，搜了一下还真有
。
HBox ：水平布局
VBox：垂直布局
TabPanel：选项卡布局
Grid：网格布局
还有上面这几种的复合布局
如果能熟练使用这些个布局，那那些控件的Position属性的属性值就不用愁了
。
上面的HBox，VBox，TabPanel，Grid 这四种布局都在uiextras类里面。
Firstly，你要在matlab中点击“获取附加功能”，如下：
Then：
HBox
在matlab命令行中输入：
uiextras.HBox()
双击工作空间中的ans会出来一个属性检查器
根据它所提供这些，选择自己想要的属性， 下面举了一个例子，一般常用的也就这些吧，如下：
clear
clc
close all
f = figure('Name', 'xxxx', ...
'Toolbar', 'none', ...
'NumberTitle', 'off', ...
'Menubar', 'none', ...
'Units', 'pixels', ...
'Position', [600, 300, 500, 200]);
HBox = uiextras.HBox(); % 创建一个水平布局
HBox.Parent = f; % 水平布局的父对象
HBox.Padding = 20; % 水平布局距这个范围框距离上下左右的间隔为20
HBox.Spacing = 20; % 布局内每个控件之间的间隔(此处是水平方向的间隔)
HBox.Units = 'pixels'; % 整个布局的单位(用于调整布局的左下角坐标)，如果不设置则为normalized
HBox.OuterPosition = [50, 20, 300, 100]; % 布局的左下角坐标及宽度
btn1 = uicontrol('Parent', HBox, 'Style', 'Pushbutton');
btn2 = uicontrol('Parent', HBox, 'Style', 'Pushbutton');
btn3 = uicontrol('Parent', HBox, 'Style', 'Pushbutton');
btn4 = uicontrol('Parent', HBox, 'Style', 'Pushbutton');
% 第一个控件宽20pix，剩下的三个控件按1:2:3分割剩下的宽度。
HBox.Widths = [20, -1, -2, -3];
结果：
我把那个 Units 和 OuterPosition 去掉结果如下：
因为它默认的Units是normalized，OuterPosition是 [0, 0, 1, 1]，所以这个布局会铺满整个窗口。
VBox
用同样的方法，来看一下VBox都有哪些属性：
没有了Width，在VBox中是Heights了，因为在水平方向上布局看的是高度嘛！其他的和HBox都差不多，用法也一样。
下面的例子和上面的基本一样，就是改了下布局方式：
clear
clc
close all
f = figure('Name', 'xxxx', ...
'Toolbar', 'none', ...
'NumberTitle', 'off', ...
'Menubar', 'none', ...
'Units', 'pixels', ...
'Position', [600, 300, 500, 200]);
VBox = uiextras.VBox(); % 创建一个垂直布局
VBox.Parent = f; % 垂直布局的父对象
VBox.Padding = 5; % 垂直布局距这个范围框距离上下左右的间隔为20
VBox.Spacing = 5; % 布局内每个控件之间的间隔(此处是垂直方向的间隔)
VBox.Units = 'pixels'; % 整个布局的单位(用于调整布局的左下角坐标)，如果不设置则为normalized
VBox.OuterPosition = [50, 20, 300, 100]; % 布局的左下角坐标及宽度
btn1 = uicontrol('Parent', VBox, 'Style', 'Pushbutton');
btn2 = uicontrol('Parent', VBox, 'Style', 'Pushbutton');
btn3 = uicontrol('Parent', VBox, 'Style', 'Pushbutton');
btn4 = uicontrol('Parent', VBox, 'Style', 'Pushbutton');
% 第一个控件高20pix，剩下的三个控件按1:2:3分割剩下的高度。
VBox.Heights = [20, -1, -2, -3];
结果：
我把那个 Units 和 OuterPosition 去掉结果如下：
因为它默认的Units是normalized，OuterPosition是 [0, 0, 1, 1]，所以这个布局会铺满整个窗口。
Grid
用同样的方法，来看一下Grid都有哪些属性：
因为是网格嘛，所以这里既有Heights又有Widths，
来个例子吧：
clear
clc
close all
f = figure('Name', 'xxxx', ...
'Toolbar', 'none', ...
'NumberTitle', 'off', ...
'Menubar', 'none', ...
'Units', 'pixels', ...
'Position', [600, 300, 500, 200]);
Grid = uiextras.Grid(); % 创建一个网格布局
Grid.Parent = f; % 布局的父对象
Grid.Padding = 5; % 布局距这个范围框距离上下左右的间隔为20
Grid.Spacing = 5; % 布局内每个控件之间的间隔
btn1 = uicontrol('Parent', Grid, 'Style', 'Pushbutton');
btn2 = uicontrol('Parent', Grid, 'Style', 'Pushbutton');
btn3 = uicontrol('Parent', Grid, 'Style', 'Pushbutton');
btn4 = uicontrol('Parent', Grid, 'Style', 'Pushbutton');
btn5 = uicontrol('Parent', Grid, 'Style', 'Pushbutton');
btn6 = uicontrol('Parent', Grid, 'Style', 'Pushbutton');
blank = uiextras.Empty('Parent', Grid);
btn7 = uicontrol('Parent', Grid, 'Style', 'Pushbutton');
% 第一行控件高20pix，剩下的三行控件按1:2:3分割剩下的高度。
Grid.Heights = [20, -1, -2, -3];
% 第一列控件宽40pix，剩下的宽度给第二列。
Grid.Widths = [40, -1];
Note：那个btn6和btn7之间的blank是用于产生一个空白，占位用。
uiextras.Empty('Parent', parent);
用于在布局中生成一个空白，用来占位，上面的parent是一个布局
结果如下：
把上面这三种布局复合起来
例如：我现在想要弄一个这样的布局
，如下
由外向内分析：
1. 左右两大块是一个水平布局
2. 左边上下两大块是一个垂直布局
3. 左上是网格布局
4. 左下是水平布局
5. 右边直接一个垂直布局就行
所以，看我的代码：
clc
clear
close all
f = figure('Name', 'xxxx', ...
'Toolbar', 'none', ...
'NumberTitle', 'off', ...
'Menubar', 'none', ...
'Units', 'pixels', ...
'Position', [600, 300, 500, 500]);
%% 创建布局
% 1.创建一个水平布局(左右两大块)
HBox_Outer = uiextras.HBox('Parent', f);
% 2.创建左边上下两大块的垂直布局
VBox_Left = uiextras.VBox('Parent', HBox_Outer);
% 3.创建左上的网格布局
Grid_Left_upper = uiextras.Grid('Parent', VBox_Left);
Grid_Left_upper.Padding = 5;
Grid_Left_upper.Spacing = 10;
% 4.创建左下的水平布局
HBox_Left_lower = uiextras.HBox('Parent', VBox_Left);
HBox_Left_lower.Spacing = 5;
HBox_Left_lower.Padding = 3;
% 5.创建右边的垂直布局
VBox_Right = uiextras.VBox('Parent', HBox_Outer);
VBox_Right.Spacing = 5;
%% 创建布局中的控件
% 1.Grid_Left_upper中的控件
btn1 = uicontrol('Parent', Grid_Left_upper, 'Style', 'Pushbutton');
btn2 = uicontrol('Parent', Grid_Left_upper, 'Style', 'Pushbutton');
btn3 = uicontrol('Parent', Grid_Left_upper, 'Style', 'Pushbutton');
btn4 = uicontrol('Parent', Grid_Left_upper, 'Style', 'Pushbutton');
Grid_Left_upper.Widths = [-1, -1]; % 注意了，一定是在控件都创建好后才能指定Widths或Heights
Grid_Left_upper.Heights = [100, -1];
% 2.HBox_Left_lower中的控件
btn5 = uicontrol('Parent', HBox_Left_lower, 'Style', 'Pushbutton');
btn6 = uicontrol('Parent', HBox_Left_lower, 'Style', 'Pushbutton');
btn7 = uicontrol('Parent', HBox_Left_lower, 'Style', 'Pushbutton');
btn8 = uicontrol('Parent', HBox_Left_lower, 'Style', 'Pushbutton');
% 3.VBox_Right中的控件
btn9 = uicontrol('Parent', VBox_Right, 'Style', 'Pushbutton');
btn10 = uicontrol('Parent', VBox_Right, 'Style', 'Pushbutton');
btn11 = uicontrol('Parent', VBox_Right, 'Style', 'Pushbutton');
btn12 = uicontrol('Parent', VBox_Right, 'Style', 'Pushbutton');
结果：
布局的嵌套还能再复杂点，而且你缩放窗口时这些个控件的大小也会自适应地改变。
像这样的，如果自己定它每个Position的属性值的话，得想好一会吧，而且缩放窗口时控件的大小也不会自适应地去改变
。
TabPanel
这个选项卡布局我觉得挺好的
老办法，看一看TabPanel中有哪些属性：
这些属性我就不一一说了，在后面的代码中我会给出注释。
还是直接通过代码来学习吧：
clc
clear
close all
f = figure('Name', 'xxxx', ...
'Toolbar', 'none', ...
'NumberTitle', 'off', ...
'Menubar', 'none', ...
'Units', 'pixels', ...
'Position', [600, 300, 500, 500]);
%% 创建选项卡布局
TabPanel = uiextras.TabPanel(); % 创建一个选项卡布局
TabPanel.Parent = f; % 设置选项卡布局的父对象是当前的窗口
TabPanel.BackgroundColor = [0.93, 0.69, 0.13]; % 设置每一个选项卡的颜色为橘黄色
TabPanel.FontName = '宋体'; % 设置选项卡上的字体名
TabPanel.FontSize = 14; % 设置选项卡上的字体大小
TabPanel.ForegroundColor = [1, 0, 0]; % 设置选项卡上的字体颜色
TabPanel.Padding = 1; % 边缘到选项卡的距离为1pix
TabPanel.TabWidth = 60; % 选项卡的宽度60pix，默认的是50pix
% 每一个选项卡用uipanel来整
panel1 = uipanel('Parent', TabPanel);
panel2 = uipanel('Parent', TabPanel);
panel3 = uipanel('Parent', TabPanel);
% 这里每个Panel下还可以再放置其他控件或布局，这里就先不放了
TabPanel.TabTitles = {'面板1', '面板2', '面板3'}; % 设置每一个选项卡的标题(必须在选项卡创建好后才能设置)
TabPanel.Selection = 3; % 默认情况下被选中的是第3个选项卡(也 必须在选项卡创建好后才能设置)
结果：
还行吧，这样的选项卡就挺好看的，新版的MATLAB也有选项卡的控件，不过我感觉那个没这个选项卡布局做的好看。
下面来一个大综合
其实就是把上面那个复合布局放到这个选项卡里来。
代码：
clc
clear
close all
f = figure('Name', 'xxxx', ...
'Toolbar', 'none', ...
'NumberTitle', 'off', ...
'Menubar', 'none', ...
'Units', 'pixels', ...
'Position', [600, 300, 500, 500]);
%% 创建选项卡布局
TabPanel = uiextras.TabPanel(); % 创建一个选项卡布局
TabPanel.Parent = f; % 设置选项卡布局的父对象是当前的窗口
TabPanel.BackgroundColor = [0.93, 0.69, 0.13]; % 设置每一个选项卡的颜色为橘黄色
TabPanel.FontName = '宋体'; % 设置选项卡上的字体名
TabPanel.FontSize = 14; % 设置选项卡上的字体大小
TabPanel.ForegroundColor = [1, 0, 0]; % 设置选项卡上的字体颜色
TabPanel.Padding = 1; % 边缘到选项卡的距离为1pix
TabPanel.TabWidth = 60; % 选项卡的宽度60pix，默认的是50pix
% 每一个选项卡用uipanel来整
panel1 = uipanel('Parent', TabPanel);
panel2 = uipanel('Parent', TabPanel);
panel3 = uipanel('Parent', TabPanel);
% 这里每个Panel下还可以再放置其他控件或布局，这里就先不放了
TabPanel.TabTitles = {'面板1', '面板2', '面板3'}; % 设置每一个选项卡的标题(必须在选项卡创建好后才能设置)
TabPanel.Selection = 3; % 默认情况下被选中的是第3个选项卡(也 必须在选项卡创建好后才能设置)
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% 创建选项卡1中的布局
% 1.创建一个水平布局(左右两大块)
HBox_Outer = uiextras.HBox('Parent', panel1);
% 2.创建左边上下两大块的垂直布局
VBox_Left = uiextras.VBox('Parent', HBox_Outer);
% 3.创建左上的网格布局
Grid_Left_upper = uiextras.Grid('Parent', VBox_Left);
Grid_Left_upper.Padding = 5;
Grid_Left_upper.Spacing = 10;
% 4.创建左下的水平布局
HBox_Left_lower = uiextras.HBox('Parent', VBox_Left);
HBox_Left_lower.Spacing = 5;
HBox_Left_lower.Padding = 3;
% 5.创建右边的垂直布局
VBox_Right = uiextras.VBox('Parent', HBox_Outer);
VBox_Right.Spacing = 5;
%% 创建选项卡1中的布局中的控件
% 1.Grid_Left_upper中的控件
btn1 = uicontrol('Parent', Grid_Left_upper, 'Style', 'Pushbutton');
btn2 = uicontrol('Parent', Grid_Left_upper, 'Style', 'Pushbutton');
btn3 = uicontrol('Parent', Grid_Left_upper, 'Style', 'Pushbutton');
btn4 = uicontrol('Parent', Grid_Left_upper, 'Style', 'Pushbutton');
Grid_Left_upper.Widths = [-1, -1]; % 注意了，一定是在控件都创建好后才能指定Widths或Heights
Grid_Left_upper.Heights = [100, -1];
% 2.HBox_Left_lower中的控件
btn5 = uicontrol('Parent', HBox_Left_lower, 'Style', 'Pushbutton');
btn6 = uicontrol('Parent', HBox_Left_lower, 'Style', 'Pushbutton');
btn7 = uicontrol('Parent', HBox_Left_lower, 'Style', 'Pushbutton');
btn8 = uicontrol('Parent', HBox_Left_lower, 'Style', 'Pushbutton');
% 3.VBox_Right中的控件
btn9 = uicontrol('Parent', VBox_Right, 'Style', 'Pushbutton');
btn10 = uicontrol('Parent', VBox_Right, 'Style', 'Pushbutton');
btn11 = uicontrol('Parent', VBox_Right, 'Style', 'Pushbutton');
btn12 = uicontrol('Parent', VBox_Right, 'Style', 'Pushbutton');
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% 创建选项卡2中的布局
% 1.创建一个水平布局(左右两大块)
HBox_Outer = uiextras.HBox('Parent', panel2);
% 2.创建左边上下两大块的垂直布局
VBox_Left = uiextras.VBox('Parent', HBox_Outer);
% 5.创建右边的垂直布局
HBox_Right = uiextras.HBox('Parent', HBox_Outer);
HBox_Right.Spacing = 5;
%% 创建选项卡2中的布局中的控件
% 1.VBox_Left中的控件
btn1 = uicontrol('Parent', VBox_Left, 'Style', 'Pushbutton');
btn2 = uicontrol('Parent', VBox_Left, 'Style', 'Pushbutton');
btn3 = uicontrol('Parent', VBox_Left, 'Style', 'Pushbutton');
btn4 = uicontrol('Parent', VBox_Left, 'Style', 'Pushbutton');
Grid_Left_upper.Widths = [-1, -1]; % 注意了，一定是在控件都创建好后才能指定Widths或Heights
Grid_Left_upper.Heights = [100, -1];
% 3.HBox_Right中的控件
btn9 = uicontrol('Parent', HBox_Right, 'Style', 'Pushbutton');
btn10 = uicontrol('Parent', HBox_Right, 'Style', 'Pushbutton');
btn11 = uicontrol('Parent', HBox_Right, 'Style', 'Pushbutton');
btn12 = uicontrol('Parent', HBox_Right, 'Style', 'Pushbutton');
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% 选项卡3中，放一个坐标系吧
axes('Parent', panel3);
plot(0:0.01:2*pi, sin(0:0.01:2*pi))
结果：
选项卡1:
选项卡2：
选项卡3：
开发的时候，可以让这些个选项卡之间进行数据的传递，类似于 下一步， 下一步的那样，TabEnables属性应该是用来设置每个选项卡能否点击，我没有试，与兴趣的可以自己试一试
。
--END--
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
