标签：
引言
? ?
这部分是Java界面编程的部分，不属于网络编程的重点，但是也稍微介绍一下这两个界面吧
? ?
登录界面
? ?
最终想做成的登录界面如图所示
? ?
? ?
分析界面
? ?
这个界面可以分为三个大的部分，北部的一张图片，qq2003全新体验Q人类，中部的QQ号码，手机号码和Email登录部分，以及下面的三个按钮，中间的QQ号码Label，号码输入框，清除号码按钮，QQ密码Label，密码输入框，忘记密码Label，以及隐身登录，记住密码Checkbox，加上申请密码保护按钮，这九个可以用一个3×3的网络布局来做
? ?
而QQ号码，手机号码和Email登录这三个可以切换的Label可以用JTabbedPane
? ?
界面编程
? ?
首先北部组件的那张图片可以是一个JLabel，然后把图片作为参数传入即可
? ?
jLabel = new JLabel(new ImageIcon("image/tou.gif"));
? ?
然后将其加入到JFrame的北部
? ?
this.add(jLabel, "North");
? ?
然后南部组件的三个按钮可以是将三个JButton放在一个JPanel里
? ?
jPanel = new JPanel();
jPanelButton1 = new JButton(new ImageIcon("image/denglu.gif"));
jPanelButton1.addActionListener(this);
jPanelButton2 = new JButton(new ImageIcon("image/quxiao.gif"));
jPanelButton3 = new JButton(new ImageIcon("image/xiangdao.gif"));
jPanel.add(jPanelButton1);
jPanel.add(jPanelButton2);
jPanel.add(jPanelButton3);
this.add(jPanel, "South");
? ?
中部的组件比较复杂，主要要实现可以切换标签页
? ?
首先我们把3×3网格里的东西做出来
? ?
jPanel1 = new JPanel(new GridLayout(3, 3));
jPanel1_JLabel1 = new JLabel("QQ号码", JLabel.CENTER);
jPanel1_JLabel2 = new JLabel("QQ密码", JLabel.CENTER);
jPanel1_JLabel3 = new JLabel("忘记密码");
jPanel1_JLabel4 = new JLabel("申请密码保护");
jPanel1_JButton = new JButton(new ImageIcon("image/clear.gif"));
jPanel1_UserNameField = new JTextField();
jPanel1_PasswordField = new JPasswordField();
jPanel1_CheckBox1 = new JCheckBox("隐身登录");
jPanel1_CheckBox2 = new JCheckBox("记住密码");
jPanel1.add(jPanel1_JLabel1);
jPanel1.add(jPanel1_UserNameField);
jPanel1.add(jPanel1_JButton);
jPanel1.add(jPanel1_JLabel2);
jPanel1.add(jPanel1_PasswordField);
jPanel1.add(jPanel1_JLabel3);
jPanel1.add(jPanel1_CheckBox1);
jPanel1.add(jPanel1_CheckBox2);
jPanel1.add(jPanel1_JLabel4);
? ?
然后我们除了QQ号码这个标签页已经做好了之外(jPanel1)，我们把后面两个标签页(手机号码和Email相应的标签页也做好)
? ?
jPanel2 = new JPanel();
jPanel3 = new JPanel();
? ?
最后我们创建一个JTabbedPane把这三个JPanel放进去即可
? ?
jTabbedPane = new JTabbedPane();
jTabbedPane.add("QQ号码", jPanel1);
jTabbedPane.add("手机号码", jPanel2);
jTabbedPane.add("Email", jPanel3);
this.add(jTabbedPane, "Center");
? ?
至此登录界面就做好了，接下来就是QQ好友界面
? ?
QQ好友界面
? ?
我们想把QQ好友界面做成以下形式
? ?
? ?
分析界面
? ?
这个界面大概可以分为三个部分，最上面的我的好友，可以是一个Button，连着中间的好友列表，好友列表要实现向下拉的功能，可以用一个JScrollPane实现，最下面是两个Button，可以放在一个2×1的网格布局里
? ?
//用于放我的好友这个界面的东西，布局为BorderLayout
friendPanel1=new JPanel(new BorderLayout());
//用于显示好友列表
friendPanel2=new JPanel(new GridLayout(50, 1, 4, 4));
//用于放陌生人、黑名单按钮
friendPanel3=new JPanel(new GridLayout(2,1));
? ?
//将我的好友按钮放入friendPanel1
friendPanel_Button1=new JButton("我的好友");
friendPanel1.add(friendPanel_Button1,"North");
? ?
//将好友列表放入friendPanel1
//给好友列表初始化，用一个JLabel数组放好友列表，每一个好友是一个JLabel
JLabel[] friendsList;
friendsList=new JLabel[50];
for (int i = 0; i < friendsList.length; i++) {
friendsList[i]=new JLabel(i+1+"",new ImageIcon("image/mm.jpg"),JLabel.LEFT);
//将每个JLabel放入friendPanel2
friendPanel2.add(friendsList[i]);
}
//将friendPanel2放入JScrollPane
friendPanel_jScrollPane=new JScrollPane(friendPanel2);
//将好友列表也就是JScrollPane放入friendPanel1
friendPanel1.add(friendPanel_jScrollPane,"Center");
? ?
//将南部的两个按钮放入friendPanel1
friendPanel_Button2=new JButton("陌生人");
friendPanel_Button3=new JButton("黑名单");
friendPanel3.add(friendPanel_Button2);
friendPanel3.add(friendPanel_Button3);
friendPanel1.add(friendPanel3,"South");
? ?
陌生人界面
? ?
另外我们想实现的是当点击陌生人按钮时能切换到陌生人界面
? ?
? ?
如何才能实现呢，一个简单的方式就是我们仿照好友界面也要定义这么多的组件
? ?
//用于放陌生人这个界面的东西，布局为BorderLayout
? ?
msrPanel1=new JPanel(new BorderLayout());
? ?
? ?
首先北部现在变为了两个按钮的网格部分的Panel
? ?
msrPanel3=new JPanel(new GridLayout(2,1));
? ?
//将这个Panel放入msrPanel1
msrPanel_Button1=new JButton("我的好友");
msrPanel_Button2=new JButton("陌生人");
msrPanel3.add(msrPanel_Button1);
msrPanel3.add(msrPanel_Button2);
msrPanel1.add(msrPanel3,"North");
? ?
中部依旧是一个JScrollPane用于显示陌生人列表
? ?
msrPanel2=new JPanel(new GridLayout(20, 1, 4, 4));
JLabel[] msrList=new JLabel[20];
for (int i = 0; i < msrList.length; i++) {
msrList[i]=new JLabel(i+1+"",new ImageIcon("image/mm.jpg"),JLabel.LEFT);
msrPanel2.add(msrList[i]);
}
msrPanel_jScrollPane=new JScrollPane(msrPanel2);
msrPanel1.add(msrPanel_jScrollPane,"Center");
? ?
最后是南部的一个黑名单按钮
? ?
msrPanel_Button3=new JButton("黑名单");
msrPanel1.add(msrPanel_Button3,"South");
? ?
到这里为止我们遇到了一个困难，就是如何在这两个界面中来回切换呢
? ?
这里我们要将JFrame本身的布局设置为CardLayout
? ?
cl=new CardLayout();
this.setLayout(cl);
? ?
然后将我的好友，陌生人加入到这个卡片布局中
? ?
this.add(friendPanel1,"1");
this.add(msrPanel1,"2");
? ?
然后我们要在我的好友界面监听陌生人这个按钮，当按下的时候我们切换到陌生人界面
也要在陌生人界面中监听我的好友这个按钮，当按下时我们切换到我的好友界面
? ?
if (e.getSource()==friendPanel_Button2) {
cl.show(this.getContentPane(), "2");
}
if (e.getSource()==msrPanel_Button1) {
cl.show(this.getContentPane(), "1");
}
? ?
实现鼠标放在好友上面异色显示
? ?
也是用到鼠标的监听事件，Entered事件Exited事件
? ?
public void mouseEntered(MouseEvent e) {
// TODO Auto-generated method stub
JLabel jLabel=(JLabel) e.getSource();
jLabel.setForeground(Color.red);
}
public void mouseExited(MouseEvent e) {
// TODO Auto-generated method stub
JLabel jLabel=(JLabel) e.getSource();
jLabel.setForeground(Color.black);
}
标签：
原文地址：http://www.cnblogs.com/keedor/p/4484036.html
