MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载

1.美化控件和界面

在功能控件开发完成后,我们需要将界面美化,添加一些图片、色彩、标签等提升用户体验。一般美化控件的方式有调整背景颜色、改变控件显示的字体、改变字体大小、拖拽控件进行布局。这些都较为简单,在上面几节的介绍中,我们可以看到在控件中基本都有这样的属性,可以让我们在Appdesigner中直接修改。在这里,我仅仅介绍如何给我们的App添加图片和图标。

1.在控件树中找到“图像”控件,将其拖拽进画布,如下图所示:

MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第1张图片
2.在属性中,我们可以看到“ImageSource”后面的“浏览”字样。单击该按钮,弹出如下界面:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第2张图片
3.选中我们想要的图片,然后点击“打开”,效果如下:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第3张图片
这样,一个图片就添加好了。同样,我们可以添加多个图片来装饰我们的App界面。

4.给控件添加一些美化元素(以按钮为例)——单击选中一个按钮控件,在右侧属性栏中找到“Icon”属性:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第4张图片
与添加图片的方式一样,我们将我们制作好的图片选中,添加到“Icon”的路径当中。效果如下所示:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第5张图片
蓝色的下拉框中,我们可以选择Icon在整个按钮控件中的位置。

5.排版和美化后,我们运行App,效果如下所示:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第6张图片
这个例子比较简单,所以整个UI界面看起来还是相对比较简陋。读者可以根据自己项目中控件的数量、功能和画面布局,做出功能强大、界面精美的App。

2.封装打包

当我们完成所有的开发工作后,接下来就要封装打包了。

1.按如下路径依次点击:“设计工具” → \rightarrow “共享” → \rightarrow “独立桌面App”,如下图所示:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第7张图片
2.点击后,弹出如下界面:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第8张图片
3.选择“Runtime included in package”,将Runtime一并打包到软件包当中(MATLAB App需要依靠Runtime才能运行);左侧和右侧分别为软件的图标和软件启动界面的图像。读者可以使用自己制作的Logo和Icon。选好之后,点击“Package”,界面如下:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第9张图片
4.等待打包完成即可。打包完成的界面如下:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第10张图片

3.安装

1.找到刚才我们打包好的文件夹并打开,如下图所示:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第11张图片
2.点开上面红框中的文件夹:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第12张图片
3.双击“MyAppInstaller_mcr.exe”打开,进入安装程序:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第13张图片
4.点击“下一步”,进入如下界面:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第14张图片
该界面是让用户选择软件的安装位置。在上图中点击“浏览”,选择想要安装的位置。注意,在这个地方,强烈建议读者新建一个空白文件夹,将软件安装在该文件夹中。否则,在卸载时,卸载程序会将安装文件夹中的所有文件全部删除。然后点击“下一步”。

5.进入如下界面:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第15张图片
该界面让用户选择“MATLAB Runtime”的安装位置。由于我的电脑已经安装了Runtime,所以会提示“已安装在以下位置”;读者的电脑若还未安装过Runtime,则选择安装路径后,点击“下一步”即可。

6.然后进入如下界面:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第16张图片
这个界面让用户确认安装位置是否正确,避免选错路径。确认正确后,点击安装即可。

7.安装完成:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第17张图片

3.运行软件

1.安装完成后,在桌面上找到软件的快捷方式:

2.双击图标,即可打开软件:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第18张图片
可以看到,软件的各个部分功能正常运行。至此,我们就走完了使用MATLAB开发独立桌面应用程序的全流程。

4.卸载软件

1.找到我们安装软件的文件夹并打开:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第19张图片
2.打开上图红框中圈出的“uninstall”文件夹:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第20张图片
3.打开“bin”文件夹:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第21张图片
4.打开“win64”文件夹:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第22张图片

5.找到“Uninstall_Application.exe”,双击运行。运行完成后,软件从我们的电脑中移除:
MATLAB Appdesigner开发独立桌面App全流程(三):App的简单美化、打包、安装及卸载_第23张图片

可以看到,刚才我新建的用来安装软件的“Test”文件夹被全部删除。所以,在此处再次强烈建议读者新建空白文件夹来安装软件,避免卸载后其他重要资料被删除!!!(都是血泪)

至此,我们就完成了MATLAB开发独立桌面App的整个过程。Appdesinger常用的功能基本都在笔者所写的三篇博客当中。按照这样的流程,笔者为自己的小项目开发的App效果如下:

MATLAB Appdesinger开发独立桌面上位机App


该系列完结~希望各位大佬交流指导!

你可能感兴趣的:(MATLAB,matlab,个人开发,ui)