界面编程模仿篇(QQ登录界面逼真篇)
写了好多天的爬虫，偷空前前后后用了两天的时间(排除吃饭睡觉)写完了这个QQ登录界面，看起来还凑和着吧，如果是的大神的，莫见笑，纯属业余作品，废话先不多说，截图如下,其中第二幅图片中的红色方框部份有待完善，明天开始继续搞爬虫，等有时间时再完善，先凑和着吧：
本篇博文就分析一下这个界面设计中的几个关键点，在阅读本博文之前请先阅读我个人博客上关于模仿QQ界面先行篇
本程序开源，下载地址，请查看我个人博客：烟雨林
对于还不会使用github的同学，以下是我的个人博客上的两篇教程
程序采用Java语言实现，本人只懂C++/Java/Python/Shell,其他程序语言一概不懂，等有时间再写其他两种语言的登录版本，可以订阅我的个人博客,获取后绪相关文章与资料
1、QQ界面登录程序最显著的地方就是界面无标题栏，所以第一步就是去掉标题栏，Java中给JFrame去标题栏的方法很easy
|
1
|
setUndecorated(
true
);
|
的确很easy是吧，但问题又出来了，是去掉了，连窗口的边框都去掉了，这肯定不是想要的结果，在这里可以采用JInternalFrame实现去标题栏同时保留窗口的边框，核心代码如下(代码中jif是JInternalFrame类型):
|
1
2
3
|
javax.swing.plaf.InternalFrameUI jf=jif.getUI();
((javax.swing.plaf.basic.BasicInternalFrameUI)jf).setNorthPane(
null
);
jif.setBorder(BorderFactory.createLineBorder(Color.LIGHT_GRAY,
2
));
|
2、QQ界面窗口居中
|
1
2
|
setLocation((Toolkit.getDefaultToolkit().getScreenSize().width-getSize().width)/
2
,
(Toolkit.getDefaultToolkit().getScreenSize().height-getSize().height)/
2
);
|
3、由于去掉了标题栏，结果最小化，最大化，关闭均被去掉了，更重要的一个功能是窗口随鼠标拖动也被去掉了，因此这些功能都需要自已再重新实现，实现的代码也是很easy的，给JInternalFrame增加监听器，此时得注意的是监听器里操作的对象应该是JFrame,因为最终的目的是对JFrame操作，窗口移动的核心代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//给窗体增加拖动功能
void
setWindowDray(JComponent jc){
jc.addMouseListener(
new
MouseAdapter() {
@Override
public
void
mousePressed(MouseEvent e) {
isDragged=
true
;
axis=
new
Point(e.getX(),e.getY());
jif.setCursor(
new
Cursor(Cursor.MOVE_CURSOR));
}
@Override
public
void
mouseReleased(MouseEvent e) {
isDragged=
false
;
jif.setCursor(
new
Cursor(Cursor.DEFAULT_CURSOR));
}
});
jc.addMouseMotionListener(
new
MouseMotionAdapter() {
@Override
public
void
mouseDragged(MouseEvent e) {
if
(isDragged){
mainLogin.setLocation(e.getXOnScreen()-axis.x,e.getYOnScreen()-axis.y);
}
}
});
}
|
4、重写JPanel，给JPanel增加背景图片，核心代码如下:
|
1
2
3
4
5
6
|
URL imgUrl=getClass().getResource(
"pics/afternoon.jpg"
);
URL textureUrl=getClass().getResource(
"pics/texture.png"
);
ImageIcon img=
new
ImageIcon(imgUrl);
ImageIcon txt=
new
ImageIcon(textureUrl);
g.drawImage(img.getImage(), x, y,
this
.getSize().width,
this
.getSize().height,
this
);
g.drawImage(txt.getImage(), x-
50
, y,
this
.getSize().width+
100
,
this
.getSize().height,
this
);
|
5、按钮的相关设置，对JButton的设置主要是设置背景的透明化，大小，内边框等，对JLabel以及JCheckbox作类似处理，相关代码例子如下：
|
1
2
3
4
5
6
7
|
jbtn.setOpaque(
false
);
jbtn.setMargin(
new
Insets(
0
,
0
,
0
,
0
));
jbtn.setContentAreaFilled(
false
);
jbtn.setFocusPainted(
false
);
jbtn.setBorderPainted(
false
);
jbtn.setBorder(
null
);
jbtn.addMouseListener(
new
ButtonListener());
|
6、对JPasswordField的处理，QQ密码限制了长度，而且禁止了copy,paste,cut,以及对文本的选择操作，在这里就要自已实现一个类继承JPasswordFiled,在这个类里面重写copy,paste,cut,同时还得重写JPasswordField的Document模型对像，只有重写了它，才能限制密码的输入长度，以下是限制密码长度的代码：
|
1
2
3
4
5
6
7
|
public
void
insertString(
int
offs, String str, AttributeSet a)
throws
BadLocationException {
if
(
this
.getLength()>MAX_LENGTH)
return
;
else
super
.insertString(offs, str, a);
}
|
7、最重要的一点，就是如何缩减代码的长度，增加代码复用，这个得自已考虑去
8、程序中不采用任何界面布局，Java中的界面布局不太适合，将布局设置成null,自已控制控件的位置
备注：本程序开发过程中需要用到的软件请参考 界面编程模仿篇(模仿腾讯QQ登录界面先行篇)
最后，如果先和我合作，把这个界面做的更逼真，请阅读Github上如何给别人贡献代码，期待你的参与
