前言
如果使用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绘制界面就完成了