javaswinglabelpanels

Having a JLabel on top of another JLabel that has an image


Soo I'm trying to make a board game with GUI. I created a JLabel with the player's name and want to use that as a token. Then I made another JLabel that contains the image of the board. I added both the labels onto a boardPanel and right now, the labels are side by side. How do I make it so that instead of it being side to side, the JLabel w/ name is on the JLabel w/ img?

Is there something I should be considering for the panel that contains the two labels? Like a certain Layout Manager?

[just sections of my code]

import java.awt.*;
import javax.swing.*;

public class BoardFrame extends JFrame {

   private JPanel mainPanel, boardImgPanel,jPanelSouth,buttonPanel
           ,cardPanel,statsPanel;
   private boardImgLabel;

   Player player1;

   public BoardFrame() {
      //boardPanel and stuff in it
      boardImgPanel = new JPanel();
      boardImgLabel = new JLabel();
      boardImgLabel.setIcon(new ImageIcon("BOARDPICTUREHERE"));
      boardImgPanel.add(boardImgLabel);

      /////////////////////ADDING PLAYERS/////////////////////
      player1 = new Player("Steven", 1,1,1,1,1);
      JLabel player1Label = new JLabel(player1.getPlayerName());
      boardImgPanel.add(player1Label);

      mainPanel = new JPanel(new GridLayout(0, 1));

      add(mainPanel);

   }
}

something like this but obviously instead of a cat, it's the board image, and the text is the player name.

EDIT

I made a class that extends the jpanel and then wanted to add it into the BoardFrame class

import java.awt.BorderLayout;
import java.awt.Color;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class BoardPanelNorth extends JPanel {
        File imageFile = new File("....");

        JLabel boardImgLabel = new JLabel();
        Player player1;

        public BoardPanelNorth() {
            setLayout(new BorderLayout());
            try {
                boardImgLabel = new JLabel(new ImageIcon(ImageIO.read(imageFile)));
                boardImgLabel.setLayout(new BorderLayout());

                player1 = new Player("Steven", 1,1,1,1,1);
                JLabel player1Label = new JLabel(player1.getPlayerName());
                player1Label.setFont(player1Label.getFont().deriveFont(128f));
                player1Label.setHorizontalAlignment(JLabel.RIGHT);
                player1Label.setVerticalAlignment(JLabel.BOTTOM);
                player1Label.setForeground(Color.WHITE);

                add(boardImgLabel);
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }

}

Board Frame class:

import java.awt.*;
import javax.swing.*;

public class BoardFrame extends JFrame {

   private JPanel mainPanel, boardImgPanel;
   private JSplitPane splitPane;

   public BoardFrame() {

      boardImgPanel = new BoardPanelNorth();


      //split plane
      splitPane = new JSplitPane(JSplitPane.VERTICAL_SPLIT, 
         new JScrollPane(boardImgPanel), jPanelSouth);
      splitPane.setDividerLocation(470); //top size
      splitPane.enable(false); //cant adjust


      mainPanel = new JPanel(new GridLayout(0, 1));
      mainPanel.add(splitPane);

      add(mainPanel);

   }
}

Player Steven still does not seem to appear on the map.


Solution

  • You could make use of an OverlayLayout or you could simply add the second JLabel to the first. The trick here though, is to set up a layout manager for the first label.

    Beware though, a JLabel only use the icon and text properties its determine the preferred layout size, which could end up truncating it's children

    Label overlay

    import java.awt.BorderLayout;
    import java.awt.Color;
    import java.awt.EventQueue;
    import java.io.File;
    import java.io.IOException;
    import javax.imageio.ImageIO;
    import javax.swing.ImageIcon;
    import javax.swing.JFrame;
    import javax.swing.JLabel;
    import javax.swing.JPanel;
    import javax.swing.UIManager;
    import javax.swing.UnsupportedLookAndFeelException;
    
    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 TestPane());
                    frame.pack();
                    frame.setLocationRelativeTo(null);
                    frame.setVisible(true);
                }
            });
        }
    
        public class TestPane extends JPanel {
    
            public TestPane() {
                setLayout(new BorderLayout());
                try {
                    JLabel background = new JLabel(new ImageIcon(ImageIO.read(...)));
                    background.setLayout(new BorderLayout());
                    JLabel text = new JLabel("I'm just drawn this way");
                    text.setFont(text.getFont().deriveFont(128f));
                    text.setHorizontalAlignment(JLabel.RIGHT);
                    text.setVerticalAlignment(JLabel.BOTTOM);
                    text.setForeground(Color.WHITE);
    
                    background.add(text);
    
                    add(background);
                } catch (IOException ex) {
                    ex.printStackTrace();
                }
            }
    
        }
    
    }