GUI
 
GUI graphic User Interface,图形用户界面。我们平时用的QQ、pycharm、搜狗输入法工具栏这些软件的界面都叫做GUI开发。因为GUI相关库不生态统一、学习成本、功能、盈利等方面问起，目前开发者不多。
 
windows上的软件图形界面底层调用是C++，DirectX 底层的图形接口。其他语言的开发者封装win底层图形接口形成自己语言可以调用的图形库。例如java中的AWT swing，python中的 TKinter GTK wxwidgets qt5。有兴趣的话可以深入学习GUI领域。
 
引入：from tkinter import Tk, Listbox
 
创建一个窗口
 
root = Tk()
list1 = ['C', 'python', 'php', 'html', 'java']
list2 = ['CSS', 'jQuery', 'Bootstrap']
 
创建两个列表组件
 
com_a = Listbox(root)
com_b = Listbox(root)
 
往列表组件里写数据
 
for i in list1:
    com_a.insert(0, i)
for i in list2:
    com_b.insert(1, i)
 
将com_a部件放置到主窗口中
 
com_a.pack()
com_b.pack()
 
进入消息循环、事件监听
 
root.mainloop()

目录
 
1.GUI的介绍
 
1.1GUI概述
 
1.2Java提供了三个主要包做GUI开发：
 
2.Swing组件
 
2.1顶层容器介绍
 
2.2中间容器
 
2.3基本组件
 
3.API介绍
 
3.1Jframe组件
 
3.2Panel组件
 
3.3功能组件
 
4.案例代码
 
4.1UI介绍
 
4.2代码
 
5.插件介绍WindowBuilder
 
5.1搜索WindowBuilder
 
5.2.在eclipse的中安装
 
5.3WindowBuilder插件的使用
 

1.GUI的介绍
 
1.1GUI概述
 
　　早期，电脑向用户提供的是单调、枯燥、纯字符状态的“命令行界面（CLI）”。就是到现在，我们还可以依稀看到它们的身影：在Windows中开个DOS窗口，就可看到历史的足迹。后来，Apple公司率先在电脑的操作系统中实现了图形化的用户界面（Graphical User Interface，简称GUI），但由于Apple公司封闭的市场策略，自己完成电脑硬件、操作系统、应用软件一条龙的产品，与其它PC不兼容。这使得Apple公司错过了一次一统全球PC的好机会。
 　　后来，Microsoft公司推出了风靡全球的Windows操作系统，它凭借着优秀的图形化用户界面，一举奠定了操作系统标准的地位。这也造就了世界首富---比尔.盖茨和IT业的泰山北斗微软公司。
 　　在这图形用户界面风行于世的今天，一个应用软件没有良好的GUI是无法让用户接受的。而Java语言也深知这一点的重要性，它提供了一套可以轻松构建GUI的工具。在本章和下一章中，我们将向你充分证明这一点。
 
1.2Java提供了三个主要包做GUI开发：
 
java.awt 包 – 主要提供字体/布局管理器
 
javax.swing 包[商业开发常用] – 主要提供各种组件(窗口/按钮/文本框)
 
java.awt.event 包 – 事件处理，后台功能的实现。
 
 
 
2.Swing组件
 
如图所示：swing组件主要可分为三个部分，后面会详细介绍
 
（1）顶层容器:：常用有JFrame，JDialog
 
（2）中间容器：JPanel，JOptionPane，JScrollPane，JLayeredPane 等，主要以panel结尾。
 
（3）基本组件：JLabel，JButton，JTextField，JPasswordField，JRadioButton 等。
 
 
2.1顶层容器介绍
 
 
#         
 
 
组件         
 
 
描述
 
 
1         
 
 
JFrame         
 
 
一个普通的窗口（绝大多数 Swing 图形界面程序使用 JFrame 作为顶层容器）
 
 
2         
 
 
JDialog         
 
 
对话框
 
2.2中间容器
 
 
#         
 
 
组件         
 
 
描述
 
 
1         
 
 
JPanel (相当于div)
 
 
一般轻量级面板容器组件(作为JFrame中间容器)
 
 
2         
 
 
JScrollPane         
 
 
带滚动条的，可以水平和垂直滚动的面板组件
 
 
3         
 
 
JSplitPane         
 
 
分隔面板
 
 
4         
 
 
JTabbedPane         
 
 
选项卡面板
 
 
5         
 
 
JLayeredPane         
 
 
层级面板
 
 
 
2.3基本组件
 
 
#         
 
 
组件         
 
 
描述
 
 
1         
 
 
JLabel
 
 
标签
 
 
2         
 
 
JButton         
 
 
按钮
 
 
3         
 
 
JRadioButton         
 
 
单选按钮
 
 
4         
 
 
JCheckBox         
 
 
复选框
 
 
5         
 
 
JToggleButton         
 
 
开关按钮
 
 
6         
 
 
JTextField         
 
 
文本框
 
 
7         
 
 
JPasswordField         
 
 
密码框
 
 
8         
 
 
JTextArea         
 
 
文本区域
 
 
9         
 
 
JComboBox         
 
 
下拉列表框
 
 
10         
 
 
JList         
 
 
列表
 
 
11         
 
 
JProgressBar         
 
 
进度条
 
 
12         
 
 
JSlider         
 
 
滑块
 
 
 
3.API介绍
 
3.1Jframe组件
 
 
JFrame frame = new JFrame("HelloWorldSwing");
 
 
  // 创建及设置窗口
 
 
frame.setDefaultLookAndFeelDecorated(true);
 
 
 // 确保一个漂亮的外观风格
 
 
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
 
设置默认的关闭窗口
 
 
frame.pack();
 
 
   // 显示窗口
 
 
frame.setVisible(true);
 
 
//这个最好放在最后，不然会出现视图看不到的情况
 
 
frame.setBounds(600, 300, 500, 400);
 
 
设置窗口的x,y位置，窗口大小x,y.
 
 
frame.add(panel)
 
 
添加panel面板到容器
 
 
frmIpa.getContentPane().add(panel, BorderLayout.NORTH);
 
 
添加面板到主窗口，布局在北面
 
 
frmIpa.getContentPane().add(scrollPane, BorderLayout.CENTER);
 
 
添加可滚动面板到主窗口，布局在中间
 
 
 
 
 
3.2Panel组件
 
Jpanel
 
 
JPanel panel = new JPanel();
 
 
创建面板容器
 
 
panel.add(button);
 
 
添加按钮到面板
 
JOptionPane
 
 
JOptionPane.showMessageDialog(panel3, "没有选中任何文件", "提示", JOptionPane.WARNING_MESSAGE);
 
 
弹出提示框到panel容器
 
JScrollPane
 
 
JScrollPane scrollPane = new JScrollPane();
 
 
创建可滚动面板
 
 
scrollPane.setViewportView(textArea);
 
 
设置面板内容
 
 
 
3.3功能组件
 
JLabel
 
 
 JLabel label = new JLabel("Hello World");
 
 
添加标签
 
Jbutton
 
 
JButton button = new JButton("选择文件");
 
 
创建按钮
 
 
button.addActionListener(new ActionListener() {}
 
 
添加操作按钮后的事件监听器
 
JFileChooser
 
 
 jfc.setFileSelectionMode(JFileChooser.FILES_AND_DIRECTORIES );
 
 
// 设置文件对话框
 
 
jfc.showSaveDialog(frmIpa);
 
 
// 显示打开的文件对话框
 
 
jfc.getSelectedFile();
 
 
// 获取选择器选择的文件
 
JTextArea
 
 
JTextArea textArea = new JTextArea();
 
 
创建文本区域
 
 
textArea.setText(content);
 
 
设置内容
 
4.案例代码
 
这个UI是用来读取ipa文件info.plist中的信息，有需要的朋友可以去下面链接看看
 
https://blog.csdn.net/qq_42035966/article/details/82086462
 
4.1UI介绍
 
主窗口Jframe，
 
    Jframe添加2个Jpanel面板，
 
         北面Jpanel添加JButton,JButton打开JFileChooser文件对话框。
 
         中间JScrollPane添加JTextArea文本区域，文本区域按各自业务逻辑来处理。
 
 
 
 
4.2代码
 
import java.awt.BorderLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.io.File;
import javax.swing.JButton;
import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;

public class IpaUI {
	public static JFrame frmIpa;
	public JTextArea textArea;

	public IpaUI() {
		// 窗口框架
		frmIpa = new JFrame();
		frmIpa.setTitle("ipa工具类");
		frmIpa.setBounds(600, 300, 500, 400);
		frmIpa.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

		// 面板1
		JPanel panel = new JPanel();
		frmIpa.getContentPane().add(panel, BorderLayout.NORTH);
		JButton button = new JButton("选择文件");
		// 监听button的选择路径
		button.addActionListener(new ActionListener() {
			@Override
			public void actionPerformed(ActionEvent e) {
				// 显示打开的文件对话框
				JFileChooser jfc = new JFileChooser();
				jfc.showSaveDialog(frmIpa);
				try {
					// 使用文件类获取选择器选择的文件
					File file = jfc.getSelectedFile();//
					//这里是我的业务需求，各位不必照抄
//					String content = IpaService.getIpaInfoMap(file.toString());
//					textArea.setText(content);
				} catch (Exception e2) {
					JPanel panel3 = new JPanel();
					JOptionPane.showMessageDialog(panel3, "没有选中任何文件", "提示", JOptionPane.WARNING_MESSAGE);
				}
			}
		});
		panel.add(button);

		// 可滚动面板
		JScrollPane scrollPane = new JScrollPane();
		frmIpa.getContentPane().add(scrollPane, BorderLayout.CENTER);
		textArea = new JTextArea();
		scrollPane.setViewportView(textArea);
		//这个最好放在最后，否则会出现视图问题。
		frmIpa.setVisible(true);
	}

}
​
 
 
 
5.插件介绍WindowBuilder
 
    总算骗大家看完文章，其实最方便的方法是用插件制作，当然大家先了解完代码原理是最好的哈哈。eclispe安装windowbuilder有两种方式，一种是离线安装，一种是在线安装。
 
5.1搜索WindowBuilder
 
找到http://www.eclipse.org/windowbuilder/download.php
 
 
根据自己的eclipse版本选择，因为我的是4.8版本了，所以只能在线安装。
 
 
 
5.2.在eclipse的中安装
 
（1）选择Help - Eclipse MarketPlace
 
 
（2） 在商店中搜索windowbuilder ，会出现WindowBuilder插件
 
 
（3）一路下一步，进行安装，等待安装结束重启eclipse即可。
 
 
 
5.3WindowBuilder插件的使用
 
（1）在Eclipe菜单中File - New -Other ，选中WindowBuilder - Swing Designer - JFrame。
 
 
（2）打开文件，点击左下角的Design进入视图模式，左边对应代码模式
 
左上是整个视图结构，左下是单个结构的属性，可以在这里修改窗口的一些属性，
 
中间是整个swing的界面按钮，前面第二点介绍过的，这里就不说了，
 
右边就是视图了，可以点击按钮往视图里面添加，如下图。
 

摘要：本篇博文基于MATLAB2014a进行GUI设计。
 
1.启动GUI设计
 
命令行输入guide，回车。
 
 
即可得到下面的对话框，进行相关的选择和设置
 
 
点击确定，得到两个文件，一个是.m文件，另一个是.fig文件，需要说明的是，.m文件用于编辑GUI中控件所需要的回调代码，.fig文件可以用鼠标拖拽等比较简单的操作进行初始的界面设计。
 
 
2..fig文件控件布局
 
本篇暂时涉及按钮、可编辑文本、静态文本、弹出式菜单、轴的实现，拖拽这些控件到界面中，可以点击绿色三角形运行GUI看看效果。
 
 
双击任意控件可以弹出控件的属性检查器，这里可以更改控件的初始属性，并且可以查看控件的tag值，用于回调程序的句柄调用。
 
 
3.GUI初始程序编写
 
3.1.初始程序是界面运行时最先执行的程序，用于对控件等的一些初始设置，该部分的代码应该添加在.m文件的test_OpeningFcn(hObject, eventdata, handles, varargin)函数中。
 
 
插入如下代码，使得可编辑文本失效
 
 
set(handles.edit1,'enable','off');
 
 
3.2.按钮程序编写，使得可编辑文本生效，右击按钮->查看回调->Callback，输入
 
 
 
set(handles.edit1,'enable','on');
 
 
3.3.可编辑文本程序编写，当可编辑文本框中输入文字后，在静态文本中显示出来
 
 
右击可编辑文本->查看回调->Callback，输入
 
 
set(handles.text1,'string',get(handles.edit1,'string'));
 
 
3.4.弹出式菜单编写
 
 
双击弹出式菜单，调出属性编辑器，进行以下操作
 
             
 
输入相应文字，点击确定。
 
该部分函数编写，右击弹出式菜单->查看回调->Callback，输入
 
3.5.轴部分程序编写
 
为了简单起见，这部分内容写在程序开头，作用是显示了一个正弦曲线
 
代码如下：
 
 
axes(handles.axes1)
t=0:0.001:4*pi;
f=sin(t);
plot(t,f,'g')
axis([0 4*pi -1 1])
grid on
xlabel('t')
ylabel('sin(t)')
title('正弦函数图像')
legend('f=sin(t)')
 
至此，基本功能均可实现
 
 
4.总结
 
①每个控件均可在属性编辑器里面设置初始值；
 
②如果需要全局变量，在定义和使用的时候都需要写关键字global。
 
5.附上全部代码。
 
 
function varargout = test(varargin)
% TEST MATLAB code for test.fig
%      TEST, by itself, creates a new TEST or raises the existing
%      singleton*.
%
%      H = TEST returns the handle to a new TEST or the handle to
%      the existing singleton*.
%
%      TEST('CALLBACK',hObject,eventData,handles,...) calls the local
%      function named CALLBACK in TEST.M with the given input arguments.
%
%      TEST('Property','Value',...) creates a new TEST or raises the
%      existing singleton*.  Starting from the left, property value pairs are
%      applied to the GUI before test_OpeningFcn gets called.  An
%      unrecognized property name or invalid value makes property application
%      stop.  All inputs are passed to test_OpeningFcn via varargin.
%
%      *See GUI Options on GUIDE's Tools menu.  Choose "GUI allows only one
%      instance to run (singleton)".
%
% See also: GUIDE, GUIDATA, GUIHANDLES

% Edit the above text to modify the response to help test

% Last Modified by GUIDE v2.5 26-Jan-2017 16:20:09

% Begin initialization code - DO NOT EDIT
gui_Singleton = 1;
gui_State = struct('gui_Name',       mfilename, ...
                   'gui_Singleton',  gui_Singleton, ...
                   'gui_OpeningFcn', @test_OpeningFcn, ...
                   'gui_OutputFcn',  @test_OutputFcn, ...
                   'gui_LayoutFcn',  [] , ...
                   'gui_Callback',   []);
if nargin && ischar(varargin{1})
    gui_State.gui_Callback = str2func(varargin{1});
end

if nargout
    [varargout{1:nargout}] = gui_mainfcn(gui_State, varargin{:});
else
    gui_mainfcn(gui_State, varargin{:});
end
% End initialization code - DO NOT EDIT


% --- Executes just before test is made visible.
function test_OpeningFcn(hObject, eventdata, handles, varargin)
% This function has no output args, see OutputFcn.
% hObject    handle to figure
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
% varargin   command line arguments to test (see VARARGIN)
set(handles.edit1,'enable','off');
axes(handles.axes1)
t=0:0.001:4*pi;
f=sin(t);
plot(t,f,'g')
axis([0 4*pi -1 1])
grid on
xlabel('t')
ylabel('sin(t)')
title('正弦函数图像')
legend('f=sin(t)')
% Choose default command line output for test
handles.output = hObject;

% Update handles structure
guidata(hObject, handles);

% UIWAIT makes test wait for user response (see UIRESUME)
% uiwait(handles.figure1);


% --- Outputs from this function are returned to the command line.
function varargout = test_OutputFcn(hObject, eventdata, handles) 
% varargout  cell array for returning output args (see VARARGOUT);
% hObject    handle to figure
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Get default command line output from handles structure
varargout{1} = handles.output;


% --- Executes on button press in pushbutton1.
function pushbutton1_Callback(hObject, eventdata, handles)
% hObject    handle to pushbutton1 (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
set(handles.edit1,'enable','on');


function edit1_Callback(hObject, eventdata, handles)
% hObject    handle to edit1 (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
set(handles.text1,'string',get(handles.edit1,'string'));
% Hints: get(hObject,'String') returns contents of edit1 as text
%        str2double(get(hObject,'String')) returns contents of edit1 as a double


% --- Executes during object creation, after setting all properties.
function edit1_CreateFcn(hObject, eventdata, handles)
% hObject    handle to edit1 (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    empty - handles not created until after all CreateFcns called

% Hint: edit controls usually have a white background on Windows.
%       See ISPC and COMPUTER.
if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor'))
    set(hObject,'BackgroundColor','white');
end


% --- Executes on selection change in popupmenu1.
function popupmenu1_Callback(hObject, eventdata, handles)
% hObject    handle to popupmenu1 (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
str = get(handles.popupmenu1, 'String');
val = get(handles.popupmenu1,'Value');
switch str{val};
case '选项一'
    set(handles.text1,'string','选项一触发');
case '选项二'
    set(handles.text1,'string','选项二触发');
case '选项三'
    set(handles.text1,'string','选项三触发');
end
% Hints: contents = cellstr(get(hObject,'String')) returns popupmenu1 contents as cell array
%        contents{get(hObject,'Value')} returns selected item from popupmenu1


% --- Executes during object creation, after setting all properties.
function popupmenu1_CreateFcn(hObject, eventdata, handles)
% hObject    handle to popupmenu1 (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    empty - handles not created until after all CreateFcns called

% Hint: popupmenu controls usually have a white background on Windows.
%       See ISPC and COMPUTER.
if ispc && isequal(get(hObject,'BackgroundColor'), get(0,'defaultUicontrolBackgroundColor'))
    set(hObject,'BackgroundColor','white');
end
 
相关下载如下：
 
 
test.fig
 
test.m
 

  
 
欢迎交流指正。。。
  
 

  
 
 
 

导言篇：
 
我的python环境是：python3.6.5
 
这里我选择的GUI编程包是：tkinter
 
tkinker在python2.5以后就是自带包了，所以我们不需要另外安装
 
tkinker相对与其他python GUI编程的包而已，是相对容易入手的
 
 
代码篇：
 
#这是系统的登录界面  
  
import tkinter  
from tkinter import messagebox
  
class Login(object):  
    def __init__(self):  
        # 创建主窗口,用于容纳其它组件  
        self.root = tkinter.Tk()  
        # 给主窗口设置标题内容  
        self.root.title("影视资源管理系统(离线版)")  
        self.root.geometry('450x300')  
        #运行代码时记得添加一个gif图片文件，不然是会出错的
        self.canvas = tkinter.Canvas(self.root, height=200, width=500)#创建画布  
        self.image_file = tkinter.PhotoImage(file='welcome_1.gif')#加载图片文件  
        self.image = self.canvas.create_image(0,0, anchor='nw', image=self.image_file)#将图片置于画布上  
        self.canvas.pack(side='top')#放置画布（为上端）  
  
        #创建一个`label`名为`Account: `  
        self.label_account = tkinter.Label(self.root, text='Account: ')  
        #创建一个`label`名为`Password: `  
        self.label_password = tkinter.Label(self.root, text='Password: ')  
          
  
        # 创建一个账号输入框,并设置尺寸  
        self.input_account = tkinter.Entry(self.root, width=30)  
        # 创建一个密码输入框,并设置尺寸  
        self.input_password = tkinter.Entry(self.root, show='*',  width=30)  
  
        # 创建一个登录系统的按钮  
        self.login_button = tkinter.Button(self.root, command = self.backstage_interface, text = "Login", width=10)  
        # 创建一个注册系统的按钮  
        self.siginUp_button = tkinter.Button(self.root, command = self.siginUp_interface, text = "Sign up", width=10)  
  
    # 完成布局  
    def gui_arrang(self):  
        self.label_account.place(x=60, y= 170)  
        self.label_password.place(x=60, y= 195)  
        self.input_account.place(x=135, y=170)  
        self.input_password.place(x=135, y=195)  
        self.login_button.place(x=140, y=235)  
        self.siginUp_button.place(x=240, y=235)  
  
    # 进入注册界面  
    def siginUp_interface(self):  
        # self.root.destroy()  
        tkinter.messagebox.showinfo(title='影视资源管理系统', message='进入注册界面')  
          
    # 进行登录信息验证  
    def backstage_interface(self):  
        account = self.input_account.get().ljust(10," ")  
        password = self.input_password.get().ljust(10," ")  
        #对账户信息进行验证，普通用户返回user，管理员返回master，账户错误返回noAccount，密码错误返回noPassword  
        verifyResult = verifyAccount.verifyAccountData(account,password)  
  
        if verifyResult=='master':  
            self.root.destroy()  
            tkinter.messagebox.showinfo(title='影视资源管理系统', message='进入管理界面')  
        elif verifyResult=='user':  
            self.root.destroy()  
            tkinter.messagebox.showinfo(title='影视资源管理系统', message='进入用户界面')   
        elif verifyResult=='noAccount':  
            tkinter.messagebox.showinfo(title='影视资源管理系统', message='该账号不存在请重新输入!')  
        elif verifyResult=='noPassword':  
            tkinter.messagebox.showinfo(title='影视资源管理系统', message='账号/密码错误请重新输入!')  
  
def main():  
    # 初始化对象  
    L = Login()  
    # 进行布局  
    L.gui_arrang()  
    # 主程序执行  
    tkinter.mainloop()  
  
  
if __name__ == '__main__':  
    main()  
 
效果篇：
 
 
 
 
 
语法介绍：
 
环境配置：
 
Python3.6.5，前往官网下载
 
tkinker包：Python2.5之后，tkinker包是自带的，我们直接导入就好了
 
 
基本语法：
 
self.root = tkinter.Tk()
 
创建一个窗口对象root，root前面的self.是面向对象里面的内容，不明白的童鞋可以去Google一下面向对象
 
self.root.title("影视资源管理系统(离线版)")  
self.root.geometry('450x300')
 
给窗口root设置标题，并设置窗口
 
 
self.canvas = tkinter.Canvas(self.root, height=200, width=500)#创建画布  
self.image_file = tkinter.PhotoImage(file='welcome_1.gif')#加载图片文件  
self.image = self.canvas.create_image(0,0, anchor='nw', image=self.image_file)#将图片置于画布上  
self.canvas.pack(side='top')#放置画布（为上端）
 
如果我们需要让自己的界面在美观上加分，大可以试试创建一个画布，也就是下面这个东西
 
 
我这里是先对图片背景进行了透明化处理，需要的小伙伴可以去这里 对图片进行处理，个人觉得这个网站还是不错的
 
#创建一个`label`名为`Account: `  
self.label_account = tkinter.Label(self.root, text='Account: ')  
#创建一个`label`名为`Password: `  
self.label_password = tkinter.Label(self.root, text='Password: ')
 
这里创建的是一个label，label是什么不明白可以参考上面贴图的“Account:”与“Password:”
 
 
.Label(A, B)：参数A代表Lable依赖窗口，参数B即用户可见的Lable的名字了（text="LableName"）
 
.Button(A, B, text='', [width='', height=''])：参数A是按钮依赖的窗口主体，参数B是按钮的相应事件（command = self.siginUp_interface）这里的响应事件的进行注册/登录进入后台，command后接响应函数。
 
.Entry(A)：输入框，参照前面的.Label()，有疑问的可以在下方留言
 
.place(x="", y="")：这个是设置窗口部件的函数