打造酷炫风格的Swing界面

在上面的几篇文章中，我们改造了一些控件，其中有自己用画笔画的一些简单的空间，也有利用图片拼成的，那么我们如何实现一些酷炫的面板呢；

 

酷炫的界面

 

我们能看到一些界面的UI效果很酷，比如瑞星啊，千千静听啊，等等，而且能够实现更换皮肤等等的功能，图1是qq音乐的界面；

 

 

图1：QQ音乐界面

 

 

 

 

打造自己的界面

 

我们利用一些图片素材，图2是YOYO播放器的素材图片；

 

图2：YOYO播放器素材

 

 

 

我们可以利用Border来处理界面，Border主要用于画边界，边界用来渲染整个面板的界面，如代码清单1：

 public class ImageBorder implements Border { private Insets insets = new Insets(0, 0, 0, 0); private Image image = null; public ImageBorder() { super(); } public void setImage(Image image) { this.image = image; } public boolean isBorderOpaque() { return true; } public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) { if (image != null) { //一般在这里我们把窗口大小和图片大小设置刚好吻合 int x0 = x + (width - image.getWidth(null)) / 2; int y0 = y + (height - image.getHeight(null)) / 2; g.drawImage(image, x0, y0, null); } } public Insets getBorderInsets(Component c) { //边距 return insets; } }

 

在面板中调用自定义的Border，如代码清单2：

 

Image bg = Util.getImage("player/main.png"); border.setImage(bg); this.setBorder(border); setPreferredSize(new Dimension(285, 155));

 

设置好图片，匹配好大小，设置好边界；把上面的JPanel设置成为JFrame的ContentPanel

//不能改变大小 frame.setResizable(false); //取消边框 frame.setUndecorated(true); //压缩大小 frame.pack();

 

然后我们就可以再这个图片Panel的基础上画我们的控件了；