如何使用 Java Swing 创建简单的圆角矩形按钮？

Question

I'm using a simple "Calculator" project as an example of rounded-rectangular buttons. The entire project consists of one small class file. Here it is:

import java.awt.BorderLayout;
import java.awt.GridLayout;
import java.awt.event.KeyEvent;
import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JPanel;
import javax.swing.JTextField;

/**
 * Swing layout management tutorial
 *
 * This program shows how to use the
 * GridLayout manager to create a
 * calculator skeleton.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified February 2009
 */
public class Calculator extends JFrame {

    public Calculator() {
        setTitle("Calculator");
        initUI();
        setSize(320, 290);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
        setVisible(true);
    }

    public void initUI() {
        JMenuBar menubar = new JMenuBar();
        JMenu file = new JMenu("File");
        file.setMnemonic(KeyEvent.VK_F);
        menubar.add(file);
        setJMenuBar(menubar);

        String[] labels = {
            "Cls", "Bck", "", "Close",
            "7", "8", "9", "/",
            "4", "5", "6", "*",
            "1", "2", "3", "-",
            "0", ".", "=", "+"
        };
        JTextField field = new JTextField();
        add(field, BorderLayout.NORTH);
        JPanel buttonPanel = new JPanel(new GridLayout(5, 4, 3, 3));
        buttonPanel.setBorder(BorderFactory.createEmptyBorder(8, 0, 0, 0));

        for (String label: labels) {
            if (label.isEmpty()) {
                JLabel lbl = new JLabel();
                buttonPanel.add(lbl);
            } else {
                JButton button = new JButton(label);
                buttonPanel.add(button);
            }
        }
        add(buttonPanel, BorderLayout.CENTER);
    }

    public static void main(String[] args) {
        new Calculator();
    }
}

When this runs, it produces nice rectangular labelled buttons with a flat, slightly 3D appearance. I attempted to get the same effect as follows:

    FlowLayout flowLayoutManager = new FlowLayout(FlowLayout.RIGHT);
    JPanel lowerPanel = new JPanel(flowLayoutManager);
    lowerPanel.setBorder(
            BorderFactory.createEtchedBorder(
            EtchedBorder.RAISED));
    lowerPanel.setBackground(Color.ORANGE);
    lowerPanel.setPreferredSize(new Dimension(700, 100));
    lowerPanel.setMaximumSize(lowerPanel.getPreferredSize());
    lowerPanel.setMinimumSize(lowerPanel.getPreferredSize());

    /*
     * cardReaderButtonPanel holds three card reader control buttons
     */
    JPanel cardReaderButtonPanel = new JPanel(new GridLayout(1, 3, 10, 0));
    cardReaderButtonPanel.setBorder(BorderFactory.createEmptyBorder(8, 0, 0, 0));
    cardReaderButtonPanel.setOpaque(false); // transparent background

    String[] labels = {"Load", "Stop", "Start"};
    for (String label : labels) {
        JButton button = new JButton(label);
        cardReaderButtonPanel.add(button);
    }
    lowerPanel.add(cardReaderButtonPanel);

... but my buttons look like Mac OS X Aqua lozenges, Unlike in the Calculator example. I'm adding the panel of buttons to an enclosing panel that itself is enclosed by the center of a BorderLayout - but I don't see how that could influence the way a button is drawn.

Answer 1

On Mac OS X, a button's appearance is provided by an instance of com.apple.laf.AquaButtonUI . When the button's preferred size it within a particular range, it is displayed as shown here ; otherwise, it is displayed as shown here . Note that both programs use a GridLayout ; but the former uses the button's preferred size, while the latter stretches the buttons to fill the enclosing panel's preferred size. Resize the frames to see the effect.

Your example uses FlowLayout , which relies on the button's preferred size.

Addendum: The center of BorderLayout behaves similarly to GridLayout in this regard. Try adding a button to each of the five BorderLayout regions, and resize the frame to see the effect.