画出您的Swing界面

画出你的Swing界面

????? 这些天日子过得很无聊，所以就花时间画了画Swing界面。之前很多牛人们发了很多厉害的帖子（像三号管家，还有什么刀来的？），但是对于新手（像我）来说，这样的例子未免太过复杂了，他们只想快速地知道界面是怎么画出来的，然后能快速实践，而不想去研究那一大推的代码。基于此，本人萌发了写此文的冲动。由于本人也是菜鸟，所以如果做得不好，还请高手们键下留情。

?

????? 首先当然是先奉上截图：

?

?

?

?

?

上图中的主面板实现自JComponent，然后重写其paintComponent（Graphics g）方法绘制而成。本界面的所有组件都是这样做出来。所以说容易吧。代码如下：

?

?

/** * 主面板 * @author Guijin.Liang * */public class MyContentPanel extends JComponent{private static final long serialVersionUID = 1L;public void paintComponent(Graphics g){g.setColor(new Color(168,148,128));//设置边框颜色g.drawRoundRect(0, 0, 681, 121, 20, 20); //画一个圆角矩形//消除锯齿RenderingHints rh = new RenderingHints(RenderingHints.KEY_ANTIALIASING,                               RenderingHints.VALUE_ANTIALIAS_ON);Graphics2D g2 = (Graphics2D)g;g2.addRenderingHints(rh);//半透明g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.5f));//设置填充颜色，这里设置了渐变，由下往上g2.setPaint(new GradientPaint(this.getWidth()/2                      , 1                      , new Color(255,255,255)                              , this.getWidth()/2                              , this.getHeight() -1                              , new Color(0,0,255)));//填充圆角矩形g2.fillRoundRect(0, 0, 681, 121, 20, 20);}}

这样就实现了JFrame的内容面板了，那么接下来只要把它加到JFrame里就行了。

?

    this.setUndecorated(true);//无修饰    this.setContentPane(new MyContentPanel());//就是这一句了    this.setLayout(null);//布局，设置为空是为了能够使用setBounds()方法进行布局    this.setSize(682, 122);//设置窗口大

?

那那些大按钮呢（“我的文件、我的网络...”）？其实也是这样做出来的。话不多说。看完整代码：

?

package com.lgj.button;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.RenderingHints;import java.awt.Color;import java.awt.GradientPaint;import java.awt.AlphaComposite;import java.awt.Image;import javax.swing.ImageIcon;import java.awt.event.MouseEvent;import java.awt.event.MouseListener;import javax.swing.JComponent;/** * 大按钮 * @author Guijin.Liang * */public class BigButton extends JComponent                        implements MouseListener{/** *  */private static final long serialVersionUID = 1L;private String imagePath;//图片路径private String fontText;//文字private RenderingHints rh;public BigButton(String imagePath, String fontText){this.imagePath = imagePath;this.fontText = fontText;rh = new RenderingHints(RenderingHints.KEY_ANTIALIASING,                                RenderingHints.VALUE_ANTIALIAS_ON);this.addMouseListener(this);}public void paintComponent(Graphics g){        Graphics2D g2 = (Graphics2D)g;g2.setRenderingHints(rh);g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER,1.0f));//不透明GradientPaint gp = new GradientPaint(this.getWidth()/2                                             , 0                                             , new Color(153,51,250)                                             , this.getWidth()/2                                              , this.getHeight()                                              , new Color(250,255,240));g2.setPaint(gp);g2.fillRoundRect(0, 0, this.getWidth(), this.getHeight(), 10, 10);loadImageAndText(g2, this.imagePath, this.fontText);    this.updateUI();}@Overridepublic void mouseClicked(MouseEvent e) {}//光标经过@Overridepublic void mouseEntered(MouseEvent e) {Graphics g = this.getGraphics();Graphics2D g2 = (Graphics2D)g;g2.setRenderingHints(rh);GradientPaint gp = new GradientPaint(this.getWidth()/2                             , 0                             , new Color(255,0,0)                                     , this.getWidth()/2                                     , this.getHeight()                                     , new Color(255,255,255));g2.setPaint(gp);g2.fillRoundRect(0, 0, this.getWidth(), this.getHeight(), 10, 10);loadImageAndText(g2, this.imagePath, this.fontText);    this.updateUI();}//光标移出@Overridepublic void mouseExited(MouseEvent e) {        Graphics2D g2 = (Graphics2D)this.getGraphics();g2.setRenderingHints(rh);GradientPaint gp = new GradientPaint(this.getWidth()/2                                             , 0                                             , new Color(153,51,250)                                             , this.getWidth()/2                                              , this.getHeight()                                              , new Color(250,255,240));g2.setPaint(gp);g2.fillRoundRect(0, 0, this.getWidth(), this.getHeight(), 10, 10);loadImageAndText(g2, this.imagePath, this.fontText);    this.updateUI();}//加载图片和文字public void loadImageAndText(Graphics2D g2,String path, String text){ImageIcon icon = new ImageIcon(this.getClass().getResource(path));Image image = icon.getImage();g2.drawImage(image, 20, 10, 60, 60, this);g2.setColor(new Color(0,0,0));    Font font = new Font("某字体",Font.HANGING_BASELINE,15); //UI字体    g2.setFont(font);    g2.drawString(text, 20, 90);}@Overridepublic void mousePressed(MouseEvent e) {}@Overridepublic void mouseReleased(MouseEvent e) {}}

这样就实现了上面的按钮，并添加了动作，那么接下来只要添加到JFrame就OK了。部分代码如下

?

                //我的音乐按钮MyMusicButtion myMusicBtn = new MyMusicButtion("/images/8.png", "我的音乐");myMusicBtn.setBounds(458, 10, 102, 102);this.add(myMusicBtn);

?

MyMusicButton是BigButton的子类，为的是重写BigButton的mouseClicked(MouseEvent e)方法，以便作特定操作。代码如下：

?

/** * 我的音乐按钮 * @author Guijin.Liang * */public class MyMusicButtion extends BigButton{public MyMusicButtion(String imagePath, String fontText) {super(imagePath, fontText);}/** *  */private static final long serialVersionUID = 1L;    public void mouseClicked(MouseEvent e) {    MyDialog dialog = new MyDialog();dialog.setVisible(true);}}

?

这样就完成图一界面的制作了。其他不多言了，源程序都放在附件里，很小的程序，很适合新手交流（当然偶也是，呵呵）。关于代码严重违反DRY（Don't repeat yourself）和OCP（Open closed principle）的软件设计原则的问题，由于本程序的目的在于介绍如何快速用Swing画出界面，而不是真正地去设计一个软件。所以还望键谅。