画出你的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();
	}

	@Override
	public void mouseClicked(MouseEvent e) {
		
		
	}

	//光标经过
	@Override
	public 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();
	}

	//光标移出
	@Override
	public 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);
	}

	@Override
	public void mousePressed(MouseEvent e) {
		
	}

	@Override
	public 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画出界面，而不是真正地去设计一个软件。所以还望键谅。

GUI又爱又恨

哈哈，不错不错，在当今变态的天朝web满天飞的国情下，难得来几个给力的桌面应用

提醒楼主一下，private static final long serialVersionUID = 1L; ，这个习惯灰常不好，Eclipse里直接点的吧， 那干嘛不点第二项呢，呵呵

呵呵，谢谢指正。

请教，第二项跟下面这个哪个好？
@SuppressWarnings("serial")

每个搞SWING的程序员， 上辈子都是折翼的天使额

表示这两天为SWING搞得头大

首先你得搞明白serialVersionUID是干嘛用的
你这种做法跟压制异常从本质上没有区别

你们都错了，private static final long serialVersionUID = 1L;这样写反而是最好的，原因很简单，跟反序列化时的版本号有关，而自动生成的和不生成的在反序列化时会出现版本不兼容现象

所以，以后不懂请不要误导别人，谢谢！！！！！！！！！

最近，我也一直在学swing，我想问问现在swing在我们的工作中用的还多吗？

呵呵，很不错哈，不过你的‘某字体’ 在我的Linux下出问题了，于是直接注释掉了，然后就正常了。