Swing登录功能（一）在Eclipse中使用WindowBuilder拖拽出一个登录界面（共四节）.ch001

前言

如果使用IntelliJ IDEA

请参考在IntelliJ IDEA中放弃GUI Form使用JFormDesigner6.0.2设计Swing登录界面

正文

预览效果

上图是在eclipse中使用WindowBuilder拖拽出来的效果。

布局思路：

1.在外层使用border布局风格的特点，可以弄出有边距的效果

2.在弄出了边距过后再在中心加一个border布局，分别安排标题，用户名密码的文字，用户名密码的的输入框和登录按钮

3.在内层border中标题安排在上面，文字安排左边，输入框安排中间，登录按钮安排在下面

4.文字和输入框都用grid布局（不是gridbag），都设置1列2行，并且设置列间距20

代码部分：

1.新建一个普通的java项目

2.把下面的代码帖进去，如需拖拽控件需要安装WindowBuilder插件

最终WindowBuilder生成的代码如下：

package login;

import javax.swing.JPanel;
import java.awt.BorderLayout;
import javax.swing.JLabel;
import javax.swing.SwingConstants;
import javax.swing.BoxLayout;
import java.awt.GridLayout;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JTextField;
import java.awt.GridBagLayout;
import java.awt.GridBagConstraints;
import javax.swing.JPasswordField;

public class Login extends JPanel {
	private JTextField textField;
	private JPasswordField passwordField;

	/**
	 * Create the panel.
	 */
	public Login() {
		setLayout(new BorderLayout(20, 100));
		
		JPanel content = new JPanel();
		add(content, BorderLayout.CENTER);
		content.setLayout(new BorderLayout(20, 20));
		
		JLabel title = new JLabel("Login");
		content.add(title, BorderLayout.NORTH);
		title.setHorizontalAlignment(SwingConstants.CENTER);
		
		JPanel panel = new JPanel();
		content.add(panel, BorderLayout.WEST);
		panel.setLayout(new GridLayout(2, 1, 0, 20));
		
		JLabel lblNewLabel = new JLabel("\u7528\u6237\u540D");
		panel.add(lblNewLabel);
		
		JLabel lblNewLabel_1 = new JLabel("\u5BC6\u7801");
		panel.add(lblNewLabel_1);
		
		JPanel panel_1 = new JPanel();
		content.add(panel_1, BorderLayout.CENTER);
		panel_1.setLayout(new GridLayout(2, 1, 0, 20));
		
		textField = new JTextField();
		panel_1.add(textField);
		textField.setColumns(10);
		
		passwordField = new JPasswordField();
		panel_1.add(passwordField);
		
		JPanel panel_2 = new JPanel();
		content.add(panel_2, BorderLayout.SOUTH);
		
		JButton btnNewButton = new JButton("\u767B\u5F55");
		btnNewButton.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e) {
			}
		});
		panel_2.add(btnNewButton);
		
		JPanel panel_5 = new JPanel();
		add(panel_5, BorderLayout.NORTH);
		
		JPanel panel_6 = new JPanel();
		add(panel_6, BorderLayout.SOUTH);
		
		JPanel panel_7 = new JPanel();
		add(panel_7, BorderLayout.EAST);
		
		JPanel panel_4 = new JPanel();
		add(panel_4, BorderLayout.WEST);

	}

}

 

写个测试类调用

package login;

import java.awt.Dimension;

import javax.swing.JFrame;

public class TestMain {

	public static void main(String[] args) {
		JFrame frame = new JFrame();
		frame.setTitle("一克金代码");
		//设置内容面板
		frame.setContentPane(new Login());
		//设置大小
		frame.setSize(new Dimension(450,450));
		//居中
		frame.setLocationRelativeTo(null);  
		frame.setVisible(true);
	}
}

 最终效果

至此ui绘制界面就完成了