学步园

看来我们的JTextField之旅也到了一个阶段，已经很不错了，现在我们来改造JButton，让那个呆板的Swing看起来舒服一些。

还是先放上完成后的效果图：

普通的状态

鼠标滑过

鼠标按下

和代码：

/**<br /> * @(#)RJButton.java 0.1.0 2007-9-11<br /> */<br /> package ruislan.rswing;</p> <p>import java.awt.AlphaComposite;<br /> import java.awt.Color;<br /> import java.awt.Dimension;<br /> import java.awt.Font;<br /> import java.awt.GradientPaint;<br /> import java.awt.Graphics;<br /> import java.awt.Graphics2D;<br /> import java.awt.Point;<br /> import java.awt.RenderingHints;<br /> import java.awt.Shape;<br /> import java.awt.event.MouseAdapter;<br /> import java.awt.event.MouseEvent;<br /> import java.awt.geom.Arc2D;<br /> import java.awt.geom.GeneralPath;<br /> import java.awt.geom.RoundRectangle2D;</p> <p>import javax.swing.JButton;</p> <p>/**<br /> * Custom JButton<br /> *<br /> * @version 0.1.0<br /> * @author ruislan <a href="mailto:z17520@126.com" mce_href="mailto:z17520@126.com"></a><br /> */<br /> public class RButton extends JButton {<br /> private static final long serialVersionUID = 39082560987930759L;<br /> public static final Color BUTTON_COLOR1 = new Color(205, 255, 205);<br /> public static final Color BUTTON_COLOR2 = new Color(51, 154, 47);<br /> // public static final Color BUTTON_COLOR1 = new Color(125, 161, 237);<br /> // public static final Color BUTTON_COLOR2 = new Color(91, 118, 173);<br /> public static final Color BUTTON_FOREGROUND_COLOR = Color.WHITE;<br /> private boolean hover;<br /> private int style;<br /> public static final int ROUND_RECT = 0;<br /> public static final int LEFT_ROUND_RECT = 1;<br /> public static final int RIGHT_ROUND_RECT = 2;<br /> public static final int BALL = 3;<br /> public static final int STAR = 4;</p> <p> public RButton() {<br /> this(ROUND_RECT);<br /> }</p> <p> public RButton(int style) {<br /> this.style = style;<br /> if (BALL == style) {<br /> setPreferredSize(new Dimension(42, 42));<br /> } else if (STAR == style) {<br /> setPreferredSize(new Dimension(42, 42));<br /> }<br /> setFont(new Font("system", Font.PLAIN, 12));<br /> setBorderPainted(false);<br /> setForeground(BUTTON_COLOR2);<br /> setFocusPainted(false);<br /> setContentAreaFilled(false);<br /> addMouseListener(new MouseAdapter() {<br /> @Override<br /> public void mouseEntered(MouseEvent e) {<br /> setForeground(BUTTON_FOREGROUND_COLOR);<br /> hover = true;<br /> repaint();<br /> }</p> <p> @Override<br /> public void mouseExited(MouseEvent e) {<br /> setForeground(BUTTON_COLOR2);<br /> hover = false;<br /> repaint();<br /> }<br /> });<br /> }</p> <p> @Override<br /> protected void paintComponent(Graphics g) {<br /> Graphics2D g2d = (Graphics2D) g.create();<br /> int h = getHeight();<br /> int w = getWidth();<br /> float tran = 1F;<br /> if (!hover) {<br /> tran = 0.3F;<br /> }</p> <p> g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,<br /> RenderingHints.VALUE_ANTIALIAS_ON);<br /> GradientPaint p1;<br /> GradientPaint p2;<br /> if (getModel().isPressed()) {<br /> p1 = new GradientPaint(0, 0, new Color(0, 0, 0), 0, h - 1,<br /> new Color(100, 100, 100));<br /> p2 = new GradientPaint(0, 1, new Color(0, 0, 0, 50), 0, h - 3,<br /> new Color(255, 255, 255, 100));<br /> } else {<br /> p1 = new GradientPaint(0, 0, new Color(100, 100, 100), 0, h - 1,<br /> new Color(0, 0, 0));<br /> p2 = new GradientPaint(0, 1, new Color(255, 255, 255, 100), 0,<br /> h - 3, new Color(0, 0, 0, 50));<br /> }<br /> g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER,<br /> tran));<br /> GradientPaint gp = new GradientPaint(0.0F, 0.0F, BUTTON_COLOR1, 0.0F,<br /> h, BUTTON_COLOR2, true);<br /> g2d.setPaint(gp);<br /> switch (style) {<br /> case ROUND_RECT: {<br /> RoundRectangle2D.Float r2d = new RoundRectangle2D.Float(0, 0,<br /> w - 1, h - 1, 20, 20);<br /> Shape clip = g2d.getClip();<br /> g2d.clip(r2d);<br /> g2d.fillRect(0, 0, w, h);<br /> g2d.setClip(clip);<br /> g2d.setPaint(p1);<br /> g2d.drawRoundRect(0, 0, w - 1, h - 1, 20, 20);<br /> g2d.setPaint(p2);<br /> g2d.drawRoundRect(1, 1, w - 3, h - 3, 18, 18);<br /> break;<br /> }<br /> case LEFT_ROUND_RECT: {<br /> RoundRectangle2D.Float r2d = new RoundRectangle2D.Float(0, 0,<br /> (w - 1) + 20, h - 1, 20, 20);<br /> Shape clip = g2d.getClip();<br /> g2d.clip(r2d);<br /> g2d.fillRect(0, 0, w, h);<br /> g2d.setClip(clip);<br /> g2d.setPaint(p1);<br /> g2d.drawRoundRect(0, 0, (w - 1) + 20, h - 1, 20, 20);<br /> g2d.setPaint(p2);<br /> g2d.drawRoundRect(1, 1, (w - 3) + 20, h - 3, 18, 18);<br /> g2d.setPaint(p1);<br /> g2d.drawLine(w - 1, 1, w - 1, h);<br /> g2d.setPaint(p2);<br /> g2d.drawLine(w - 2, 2, w - 2, h - 1);<br /> break;<br /> }<br /> case RIGHT_ROUND_RECT: {<br /> RoundRectangle2D.Float r2d = new RoundRectangle2D.Float(-20, 0,<br /> (w - 1) + 20, h - 1, 20, 20);<br /> Shape clip = g2d.getClip();<br /> g2d.clip(r2d);<br /> g2d.fillRect(0, 0, w, h);<br /> g2d.setClip(clip);<br /> g2d.setPaint(p1);<br /> g2d.drawRoundRect(-20, 0, (w - 1) + 20, h - 1, 20, 20);<br /> g2d.setPaint(p2);<br /> g2d.drawRoundRect(-19, 1, (w - 3) + 20, h - 3, 18, 18);<br /> g2d.setPaint(p1);<br /> g2d.drawLine(0, 1, 0, h);<br /> g2d.setPaint(p2);<br /> g2d.drawLine(1, 2, 1, h - 1);<br /> break;<br /> }<br /> case BALL: {<br /> Arc2D.Float a2d = new Arc2D.Float(0, 0, w, h, 0, 360, Arc2D.CHORD);<br /> Shape clip = g2d.getClip();<br /> g2d.clip(a2d);<br /> g2d.fillRect(0, 0, w, h);<br /> g2d.setClip(clip);<br /> g2d.setPaint(p1);<br /> g2d.drawOval(0, 0, w - 1, h - 1);<br /> g2d.setPaint(p2);<br /> g2d.drawOval(1, 1, w - 3, h - 3);<br /> break;<br /> }<br /> case STAR: {<br /> int x = w / 2;<br /> int y = h / 2;<br /> int r = w / 2;<br /> // 计算五个顶点<br /> Point[] ps = new Point[5];<br /> for (int i = 0; i <= 4; i++) {<br /> ps[i] = new Point((int) (x - r<br /> * Math.sin((i * 72 + 36) * 2 * Math.PI / 360)),<br /> (int) (y + r<br /> * Math.cos((i * 72 + 36) * 2 * Math.PI / 360)));<br /> }<br /> GeneralPath star = new GeneralPath();<br /> star.moveTo(ps[3].x, ps[3].y);<br /> star.lineTo(ps[0].x, ps[0].y);<br /> star.lineTo(ps[2].x, ps[2].y);<br /> star.lineTo(ps[4].x, ps[4].y);<br /> star.lineTo(ps[1].x, ps[1].y);<br /> star.lineTo(ps[3].x, ps[3].y);<br /> star.closePath();<br /> Shape clip = g2d.getClip();<br /> g2d.clip(star);<br /> g2d.fillRect(0, 0, w, h);<br /> g2d.setClip(clip);<br /> g2d.setPaint(p1);<br /> g2d.draw(star);<br /> g2d.setPaint(p2);<br /> g2d.draw(star);<br /> break;<br /> }<br /> default:<br /> break;<br /> }<br /> g2d.dispose();<br /> super.paintComponent(g);<br /> }<br /> }<br />
注意代码中的几个部分：

首先是paintComponent方法中最后一行，我们调用了父类的paintComponent方法，这是因为我们要靠父类来绘制字符，但是父类的这个方法除了绘制字符之外还会绘制其他的，所以我们需要关闭掉其他的（当然我们也可以自己来绘制字符，但是JButton提供了方法为什么不用呢），所以我们在构造方法那里调用了：
setBorderPainted(false);
setFocusPainted(false);
setContentAreaFilled(false);
告诉父类不用绘制边框，不用绘制焦点，不用绘制内容部分，这部分我们自己来搞*o*。

然后就是这一句了g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON)告诉绘制API我们需要平滑一点，否则绘制出来会有很多锯齿哟。

接下来的这一句g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER,tran))告诉绘图API我们需要绘制一个有透明度的，tran就是透明度（0-1）。

然后就是将边框的边角变直角为圆角，我们绘制一个RoundRectangle2D，这个就是边角都为圆角的方形，然后我们根据这个方形来clip我们的方形，这样方形就被RoundRectangle2D的圆角方形包裹，从而变成了圆角方形。

最后就是绘制外边线和内边线，通过改变内边线和外边线的色变从而造成陷入或者突出效果。

整个JButton改造完毕，如果你能够活用clip的话，你也可以做一个五角星的JButton哟。

上面的是采用集成Jbutton的实现，我们都知道Swing的UI是秉承MVC模式的，下面我们来重写UI层次；

下面重新实现了UI：

package org.corey.main;</p> <p>import java.awt.Color;<br /> import java.awt.Graphics;</p> <p>import javax.swing.AbstractButton;<br /> import javax.swing.BorderFactory;<br /> import javax.swing.JComponent;<br /> import javax.swing.plaf.basic.BasicButtonUI;</p> <p>public class BlueishButtonUI extends BasicButtonUI {</p> <p> private static Color blueishBackgroundOver = new Color(224, 232, 246);<br /> private static Color blueishBorderOver = new Color(152, 180, 226);</p> <p> private static Color blueishBackgroundSelected = new Color(193, 210, 238);<br /> private static Color blueishBorderSelected = new Color(49, 106, 197);</p> <p> public BlueishButtonUI() {<br /> super();<br /> }</p> <p> public void installUI(JComponent c) {<br /> super.installUI(c);</p> <p> AbstractButton button = (AbstractButton) c;<br /> button.setRolloverEnabled(true);<br /> button.setBorder(BorderFactory.createEmptyBorder(3, 3, 3, 3));<br /> }</p> <p> public void paint(Graphics g, JComponent c) {<br /> AbstractButton button = (AbstractButton) c;<br /> if (button.getModel().isRollover() || button.getModel().isArmed()<br /> || button.getModel().isSelected()) {<br /> Color oldColor = g.getColor();<br /> if (button.getModel().isSelected()) {<br /> g.setColor(blueishBackgroundSelected);<br /> } else {<br /> g.setColor(blueishBackgroundOver);<br /> }<br /> g.fillRect(0, 0, c.getWidth() - 1, c.getHeight() - 1);</p> <p> if (button.getModel().isSelected()) {<br /> g.setColor(blueishBorderSelected);<br /> } else {<br /> g.setColor(blueishBorderOver);<br /> }<br /> g.drawRect(0, 0, c.getWidth() - 1, c.getHeight() - 1);</p> <p> g.setColor(oldColor);<br /> }</p> <p> super.paint(g, c);<br /> }</p> <p>}

下面JButton设置UI样式：

package org.corey.main;</p> <p>import java.awt.FlowLayout;</p> <p>import javax.swing.JButton;<br /> import javax.swing.WindowConstants;</p> <p>public class NewJFrame extends javax.swing.JFrame {<br /> private JButton jButton1;<br /> private JButton jButton2;</p> <p> public static void main(String[] args) {<br /> NewJFrame inst = new NewJFrame();<br /> inst.setVisible(true);<br /> }</p> <p> public NewJFrame() {<br /> super();<br /> initGUI();<br /> // 设置 UI 来加入不同的绘制方法, 可以切换不同的绘制方法, 例如换肤<br /> jButton1.setUI(new BlueishButtonUI());<br /> }</p> <p> private void initGUI() {<br /> try {<br /> FlowLayout thisLayout = new FlowLayout();<br /> getContentPane().setLayout(thisLayout);<br /> setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);<br /> {<br /> jButton1 = new JButton();<br /> getContentPane().add(jButton1);<br /> jButton1.setText("自定义外观,需要UI吗?需要");<br /> }<br /> {<br /> jButton2 = new JButton();<br /> getContentPane().add(jButton2);<br /> jButton2.setText("默认外观");<br /> }<br /> pack();<br /> setSize(400, 300);<br /> } catch (Exception e) {<br /> e.printStackTrace();<br /> }<br /> }</p> <p>}

截图：