JAVA - GUI占位符

Question

我正在为JAVA开发一个单词猜谜游戏，但我在开发GUI方面遇到了一些困难。我不打算开发一个只使用一个文本字段的简单GUI，我想开发一个更像移动设备的说法。因此，我想将白框显示为单词中字符的占位符。它类似于下图。

基本上玩家可以将字符从下方拖放（我可能会将它们设置为按钮或其他东西）到占位符框中，以与该位置的单词字符进行比较。我已经尝试制作一个文本字段的数组列表但是失败的可怕。有人对如何进行有任何建议吗？

---

根据MadProgrammer提供的答案更新

使用MadProgrammer的一些代码后，我为我的视图包提出了以下包结构。

> Views
>> GameBoard.java
>> HighScorePanel.java
>> MainPanel.java
>> ScorePanel.java
>> StatisticPanel.java
>> TimerPanel.java
>> ViewConfig.java
>> WordPanel.java

基本上只是一堆放在GameBoard.java类中的面板。我遇到的主要问题是MainPanel.java类，并保持纵横比。下面是到目前为止的视图图像，它看起来一半不错，但单词提示＆amp;类别与文本字段相对应，文本字段不够宽。

如果我要放大此框架，组件之间的间距将保持完全相同，并且不会放大。所以基本上我在寻找一种动态设置组件间距的方法。我已经为下面的GameBoard.java，MainPanel.java和StatisticPanel.java放置了代码。 GameBoard由MainPanel和StatisticsPanel组成。 StatisticsPanel由ScorePanel，TimerPanel和HighScorePanel组成。最后，MainPanel由MadProgrammer之前建议的位组成。

GameBoard.java

package views;

import java.awt.BorderLayout;

import javax.swing.JFrame;

public class GameBoard extends JFrame{

    private StatisticsPanel sp = new StatisticsPanel();
    private MainPanel mp = new MainPanel();

    public GameBoard() {
        // set the title for the game board
        setTitle(ViewConfig.DEFAULT_GAME_TITLE);

        // add panel components to board
        add(sp, BorderLayout.PAGE_START);
        add(mp, BorderLayout.CENTER);

        // set the board size
        setSize(ViewConfig.DEFAULT_FRAME_WIDTH, ViewConfig.DEFAULT_FRAME_HEIGHT);

        // set the default close operation
        setDefaultCloseOperation(EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        GameBoard gb = new GameBoard();

        // set visible
        gb.setVisible(true);
    }
}

StatisticsPanel.java

package views;

import java.awt.FlowLayout;

import javax.swing.JPanel;

public class StatisticsPanel extends JPanel {

    private ScorePanel sp = new ScorePanel();
    private TimerPanel tp = new TimerPanel();
    private HighScorePanel hsp = new HighScorePanel();

    protected StatisticsPanel() {
        // Create a layout for the panel, flow layout in this case as each component should line up
        // horizontally
        FlowLayout panelLayout = new FlowLayout(FlowLayout.CENTER, (ViewConfig.DEFAULT_FRAME_WIDTH/6), 4);

        // Set the panel's layout to the newly created layout
        setLayout(panelLayout);

        // add components
        add(sp);
        add(tp);
        add(hsp);
    }

}

MainPanel.java

package views;

import java.awt.FlowLayout;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;

import javax.swing.JButton;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class MainPanel extends JPanel {

    private JButton submitAns, clearAns;
    private JLabel wordHint, wordCategory;
    private WordPanel wp = new WordPanel(ViewConfig.DEFAULT_GUESS_WORD.length());

    protected MainPanel() {
        // create the buttons to submit and clear answer
        submitAns = new JButton(ViewConfig.DEFAULT_SUBMIT);
        clearAns = new JButton(ViewConfig.DEFAULT_CLEAR);

        // Create new default labels for the word hint and category
        wordHint = new JLabel(ViewConfig.DEFAULT_WORD_HINT);
        wordCategory = new JLabel(ViewConfig.DEFAULT_WORD_CATEGORY);

        // Set layout manger to GridBagLayout
        setLayout(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridwidth = GridBagConstraints.REMAINDER;
        gbc.insets = new Insets(4, 4, 4, 4);

        // add all components to panel with following format:
        // Word Hint > Input Fields > Word Category > Buttons
        add(wordHint, gbc);
        add(wp, gbc);
        add(wordCategory, gbc);

        // Create secondary JPanel to group buttons together, give it flow layout and add button panel to parent
        JPanel buttonPanel = new JPanel();
        FlowLayout buttonPanelLayout = new FlowLayout(FlowLayout.CENTER, 10, 4);
        buttonPanel.add(submitAns, buttonPanelLayout);
        buttonPanel.add(clearAns, buttonPanelLayout);

        // add button panel to parent
        add(buttonPanel);
    }

    protected JLabel getWordHint() {
        return wordHint;
    }

    protected void setWordHint(String wordHint) {
        this.wordHint.setText(wordHint);
    }

    protected JLabel getWordCategory() {
        return wordCategory;
    }

    protected void setWordCategory(String wordCategory) {
        this.wordCategory.setText(wordCategory);
    }
}

Answer 1

一个想法可能是使用一系列复合布局，您可以根据自己的要求进行构建。

心脏会有一个JPanel，它会呈现精心制作的JLabel能够显示单词的字符，例如......

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.FontMetrics;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.GridLayout;
import java.awt.Insets;
import java.util.ArrayList;
import java.util.List;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.border.CompoundBorder;
import javax.swing.border.EmptyBorder;
import javax.swing.border.LineBorder;

public class Test {

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

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new GuessingGame());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class GuessingGame extends JPanel {

        public GuessingGame() {
            setLayout(new GridBagLayout());
            JLabel label = new JLabel("<html>A few sentences giving either a definition or a<br> few hints about what the word could be</html>");
            WordPane wordPane = new WordPane("stackoverflow");
            JLabel wordCategory = new JLabel("Word Category");

            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridwidth = GridBagConstraints.REMAINDER;
            gbc.insets = new Insets(4, 4, 4, 4);
            add(label, gbc);
            add(wordPane, gbc);

            JPanel pnlWordCategory = new JPanel(new GridLayout(1, 6, 4, 4));
            pnlWordCategory.add(new LetterLabel("A"));
            pnlWordCategory.add(new LetterLabel("B"));
            pnlWordCategory.add(new LetterLabel("C"));
            pnlWordCategory.add(new LetterLabel("D"));
            pnlWordCategory.add(new LetterLabel("W"));
            pnlWordCategory.add(new LetterLabel("G"));
            add(wordCategory, gbc);
            add(pnlWordCategory, gbc);
        }

    }

    public class WordPane extends JPanel {

        private String word;
        private List<JLabel> labels;

        public WordPane(String text) {
            setLayout(new GridLayout(1, text.length(), 4, 4));
            labels = new ArrayList<>(text.length());
            for (int index = 0; index < text.length(); index++) {
                LetterLabel label = new LetterLabel();
                labels.add(label);
                add(label);
            }
        }

    }

        public class LetterLabel extends JLabel {

            public LetterLabel(String text) {
                this();
                setText(text);
            }

            public LetterLabel() {
                setBorder(new CompoundBorder(new LineBorder(Color.GRAY), new EmptyBorder(4, 4, 4, 4)));
            }

            @Override
            public Dimension getPreferredSize() {
                Insets insets = getInsets();
                Dimension size = new Dimension();
                FontMetrics fm = getFontMetrics(getFont());
                size.width = (insets.left + insets.right) + fm.stringWidth("M");
                size.height = (insets.top + insets.bottom) + fm.getHeight();
                return size;
            }

        }

}

现在，您可以使用相同的想法，但使用JTextField而不是JLabel s

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.FontMetrics;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.GridLayout;
import java.awt.Insets;
import java.util.ArrayList;
import java.util.List;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.border.CompoundBorder;
import javax.swing.border.EmptyBorder;
import javax.swing.border.LineBorder;

public class Test {

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

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new GuessingGame());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class GuessingGame extends JPanel {

        public GuessingGame() {
            setLayout(new GridBagLayout());
            JLabel label = new JLabel("<html>A few sentences giving either a definition or a<br> few hints about what the word could be</html>");
            WordPane wordPane = new WordPane("stackoverflow");
            JLabel wordCategory = new JLabel("Word Category");

            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridwidth = GridBagConstraints.REMAINDER;
            gbc.insets = new Insets(4, 4, 4, 4);
            add(label, gbc);
            add(wordPane, gbc);

            JPanel pnlWordCategory = new JPanel(new GridLayout(1, 6, 4, 4));
            pnlWordCategory.add(new LetterLabel("A"));
            pnlWordCategory.add(new LetterLabel("B"));
            pnlWordCategory.add(new LetterLabel("C"));
            pnlWordCategory.add(new LetterLabel("D"));
            pnlWordCategory.add(new LetterLabel("W"));
            pnlWordCategory.add(new LetterLabel("G"));
            add(wordCategory, gbc);
            add(pnlWordCategory, gbc);
        }

    }

    public class WordPane extends JPanel {

        private String word;
        private List<JTextField> fields;

        public WordPane(String text) {
            setLayout(new GridLayout(1, text.length(), 4, 4));
            fields = new ArrayList<>(text.length());
            for (int index = 0; index < text.length(); index++) {
                JTextField field = new JTextField(2);
                fields.add(field);
                add(field);
            }
        }

    }

        public class LetterLabel extends JLabel {

            public LetterLabel(String text) {
                this();
                setText(text);
            }

            public LetterLabel() {
                setBorder(new CompoundBorder(new LineBorder(Color.GRAY), new EmptyBorder(4, 4, 4, 4)));
            }

            @Override
            public Dimension getPreferredSize() {
                Insets insets = getInsets();
                Dimension size = new Dimension();
                FontMetrics fm = getFontMetrics(getFont());
                size.width = (insets.left + insets.right) + fm.stringWidth("M");
                size.height = (insets.top + insets.bottom) + fm.getHeight();
                return size;
            }

        }

}

现在，控制。为了管理这个过程，您需要某种模型或控制器，它能够从WordPane获取输入并验证它，然后通知WordPane猜测是否有效所以它可以更新UI，但这超出了问题的范围

<强>更新

您可以通过多种方式将字符从一个部分拖动到另一个部分，而不是简单的部分。

最简单的方法是将控件的String值包装在Transferable中，并在字段删除后更新字段，例如this for example