如何添加华丽的过渡箭头？

Question

我有一个带有内容的 JPanel，并希望用箭头包围它，这样当您单击一个时，jpanel 会更改（到另一个）。我已经习惯了这种 UI 模式/习语，我想在 flash 中但找不到了。 通常点击箭头周围也有点击箭头的效果，选中时会闪烁。

问题： 1.任何例子可以参考我在说什么，即使是在闪存中？ 2. 知道在 Java 中执行此操作的库吗？也许与JavaFX？ 3. 示例应用/代码？

Answer 1

这可以用普通的 Swing 来完成。

建议：

1. 使用CardLayout 轻松切换容器
2. 使用BasicArrowButton 作为方向按钮

我会尽快提供SSCCE。同时，另请参阅：

• How to Use CardLayout
• Swing Arrow Buttons

---

这是一个冗长 SSCCE：

public final class SwingTransitionDemo {
    public static void main(String[] args){
        SwingUtilities.invokeLater(new Runnable(){
            @Override
            public void run() {
                createAndShowGUI();             
            }
        });
    }

    private static void createAndShowGUI(){
        final JFrame frame = new JFrame("Swing Transition Demo");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(JMainPane.newInstance());
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }

    private static final class JMainPane extends JPanel{
        private static final int PAD = 5;

        private JMainPane(){
            super(new GridBagLayout());
            setBackground(Color.PINK);
            GridBagConstraints c = new GridBagConstraints();

            // Create north button
            c.gridx = 1;
            c.gridy = 0;
            c.insets = new Insets(PAD, 0, PAD, 0);
            c.fill = GridBagConstraints.HORIZONTAL;
            final BasicArrowButton north = new BasicArrowButton(BasicArrowButton.NORTH);
            north.addActionListener(BasicArrowButtonActionListener.getInstance());
            add(north, c);

            // Create west button
            c.gridx = 0;
            c.gridy = 1;
            c.insets = new Insets(0, PAD, 0, PAD);
            c.fill = GridBagConstraints.VERTICAL;
            final BasicArrowButton west = new BasicArrowButton(BasicArrowButton.WEST);
            west.addActionListener(BasicArrowButtonActionListener.getInstance());
            add(west, c);

            c.gridx = 1;
            c.gridy = 1;
            c.fill = GridBagConstraints.VERTICAL;
            add(JCardPane.getInstance(), c);

            // Create east button
            c.gridx = 2;
            c.gridy = 1;
            c.insets = new Insets(0, PAD, 0, PAD);
            c.fill = GridBagConstraints.VERTICAL;
            final BasicArrowButton east = new BasicArrowButton(BasicArrowButton.EAST);
            east.addActionListener(BasicArrowButtonActionListener.getInstance());
            add(east, c);

            // Create south button
            c.gridx = 1;
            c.gridy = 2;
            c.insets = new Insets(PAD, 0, PAD, 0);
            c.fill = GridBagConstraints.HORIZONTAL;
            final BasicArrowButton south = new BasicArrowButton(BasicArrowButton.SOUTH);
            south.addActionListener(BasicArrowButtonActionListener.getInstance());
            add(south, c);
        }

        public static final JMainPane newInstance(){
            return new JMainPane();
        }

        private static final class JCardPane extends JPanel{
            private static JCardPane INSTANCE;

            private JCardPane(){
                super(new CardLayout());
                setBorder(BorderFactory.createLineBorder(Color.BLACK));
                add(Box.createRigidArea(new Dimension(200, 200)), "");
                add(Card.newInstance(Color.RED, "North"), String.valueOf(BasicArrowButton.NORTH));
                add(Card.newInstance(Color.ORANGE, "WEST"), String.valueOf(BasicArrowButton.WEST));
                add(Card.newInstance(Color.CYAN, "SOUTH"), String.valueOf(BasicArrowButton.SOUTH));
                add(Card.newInstance(Color.GREEN, "EAST"), String.valueOf(BasicArrowButton.EAST));
            }

            public static final JCardPane getInstance(){
                if(INSTANCE == null){
                    INSTANCE = new JCardPane();
                }

                return INSTANCE;
            }

            @Override
            public Dimension getPreferredSize(){
                return new Dimension(200, 200); // for demonstration purposes only
            }

            private static final class Card extends JPanel{
                private Card(final Color c, final String s){
                    super();
                    setLayout(new BoxLayout(this, BoxLayout.Y_AXIS));
                    setBackground(c);

                    // Create components
                    add(Box.createVerticalGlue());
                    final JLabel label = new JLabel(s);
                    label.setAlignmentX(CENTER_ALIGNMENT);
                    add(label);
                    add(Box.createVerticalGlue());
                }

                public static final Card newInstance(final Color c, final String s){
                    return new Card(c, s);
                }
            }
        }

        private static final class BasicArrowButtonActionListener implements ActionListener{
            private static BasicArrowButtonActionListener INSTANCE;

            private BasicArrowButtonActionListener(){} // prevent external instantiation

            public static final BasicArrowButtonActionListener getInstance(){
                if(INSTANCE == null){
                    INSTANCE = new BasicArrowButtonActionListener();
                }

                return INSTANCE;
            }

            @Override
            public void actionPerformed(ActionEvent e) {                
                CardLayout cl = (CardLayout)JCardPane.getInstance().getLayout();
                cl.show(JCardPane.getInstance(), String.valueOf((((BasicArrowButton)e.getSource()).getDirection())));
            }
        }
    }
}

初始显示

如果你点击“南”方向箭头...

这使用了各种布局，包括GridBagLayout、BoxLayout 和CardLayout。请记住，此代码的大部分只是填充。玩弄它，让我知道这是否在球场上！

另见：

• Laying Out Components Within a Container