代码说明:
将JPanel三种布局BorderLayout GridLayout FlowLayout 混合使用,写了一个用户登录界面。
没有实现按钮的功能化,仅仅只是界面。
在GridLayout布局的面板再次放置小面板,小面板采用FlowLayout布局,
从而调整小面板内的文本框(JTextField JPasswordField)控件,使得文本框控件的宽度不会被撑开,更美观。
布局示意图如下:
控件分布如下:
三种布局混合使用分布如下:
运行结果截图如下:
完整源码如下:
import java.awt.*;
import javax.swing.*;
/*
*frame是窗体,使用默认的borderLayout布局
*
*panel_up 以及panel_bottom将窗体分割成上下两个部分 分别占领CENTER区域以及 SOUTH区域
**panel_up 使用GridLayout布局 2*2 右边再嵌入两个小面板 small_panel_1 以及 small_panel_2
**small_panel_1以及 small_panel_2使用flowLayout布局使得输入框不会被撑开
*
*panel_buttom 使用FlowLayout 布局直接收纳三个button控件
*/
public class UserAccess
{
public static void main(String args[]){
JFrame frame =new JFrame();
frame.setSize(300,150);
JPanel panel_up=new JPanel();
JPanel panel_bottom=new JPanel();
frame.setLayout(new BorderLayout());
frame.add(panel_up,BorderLayout.CENTER);
frame.add(panel_bottom,BorderLayout.SOUTH);
/*直接用GridLayout会以所有控件中最宽的空间宽为宽,
最高的控件高为高,输入框会被撑开*/
panel_up.setLayout(new GridLayout(2,2));
JLabel lbl_username =new JLabel("User Name:");
JLabel lbl_passsword=new JLabel("Password:");
/*小面板1 2 别分用来存放 用户名的输入框以及密码的输入框
小面板1 2 内部的布局使用FlowLayout布局*/
JPanel panel_small_1 =new JPanel();
JPanel panel_small_2 =new JPanel();
panel_up.add(lbl_username);
panel_up.add(panel_small_1);
panel_up.add(lbl_passsword);
panel_up.add(panel_small_2);
JTextField txtfd_username=new JTextField(10);
JPasswordField pswfd_password=new JPasswordField(10);
panel_small_1.setLayout(new FlowLayout());
panel_small_1.add(txtfd_username);
panel_small_2.setLayout(new FlowLayout());
panel_small_2.add(pswfd_password);
panel_bottom.setLayout(new FlowLayout());
JButton btn_login=new JButton("Login");
JButton btn_register=new JButton("register");
JButton btn_cancle=new JButton("cancle");
//Does cancle mean "clear the textfile" or "close the frame"?
panel_bottom.add(btn_login);
panel_bottom.add(btn_register);
panel_bottom.add(btn_cancle);
frame.setVisible(true);
}
}
心得与思考:
最近阅读了一本有关代码命名艺术有关的书,因此在写这个界面的时候,我尽量要求自己不要偷懒。
但是还是有两个小地方偷懒了。1.嵌在GridLayout里用的两个小面板,我命名做smal_panel_1 和2
其实没能准确的表达出它们在布局中的位置,因为表格布局是2*2,小面板1在第一行第二个,小面板2在第二行第二个。
大费周章,其实就是为了让密码以及用户名输入框不被表格布局撑开,那样好丑,我想要控制他们的大小。
2.因为只是界面,并么有功能化,准确说是我还没有想好需求,所以对于那个cancel按钮,的cancel一词的含义
其实是很模糊的, 到底是取消之前的输入即清空输入框还是取消登录操作全部操作直接关掉窗体,后续我会根据自己的需求来重新调整。