Search code examples
javaswingjbuttonlayout-manager

Java swing JButton order and size

i'm trying to create a board game with java swing but i've gotten pretty confused with the layouts. At the moment i'm trying to create the image of what the user sees. In order to do that i used a BorderLayout(i need to use Border-grid-flow layouts only) thinking that i will put some staff on south east west north and the basic board in the center. The thing is that i have to create the path where the pawns will move using JButtons(the rest space should left empty) and that path needs to have a specific crosslike shape: http://i59.tinypic.com/eileys.png and also the size should be smaller than usual. For starters, I've tried using a JPanel with a gridlayout (to put in center) but whatever i do(like setPreferredSize()) the buttons wil resize to fill the space. This is my code. Thank you for your time, any hint will be helpfull! EDITED:

package projtest1;

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Font;
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class Board extends JFrame
{
    public Board()
    {
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setTitle("Border Layout");
        setMinimumSize(new Dimension(1280, 768));
        setSize(1280, 768);  
        JPanel contentPane = new JPanel();
        contentPane.setLayout(new BorderLayout());
        contentPane.add(new JButton("North"), BorderLayout.NORTH);
        contentPane.add(new JButton("South"), BorderLayout.SOUTH);
        contentPane.add(new JButton("West"), BorderLayout.WEST);
        contentPane.add(new JButton("East"), BorderLayout.EAST);
        JPanel buttonPanel = new JPanel();
        buttonPanel.setLayout(new GridLayout(3, 1, 1, 1));
        buttonPanel.setSize(new Dimension (800,800));
        JPanel topButtonPanel = new JPanel();
        JPanel middleButtonPanel = new JPanel();
        JPanel lastButtonPanel = new JPanel();
        topButtonPanel.setLayout(new GridLayout(6, 3, 1, 1));
        middleButtonPanel.setLayout(new GridLayout(3, 15, 1, 1));
        lastButtonPanel.setLayout(new GridLayout(6, 3, 1, 1));
        topButtonPanel.setSize(new Dimension (100,300));
        //topButtonPanel.setMinimumSize(new Dimension (100,300));
        middleButtonPanel.setSize(new Dimension (700,100));
        lastButtonPanel.setSize(new Dimension (100,300));
        for (int i=0; i<18; i++)
        {
            JButton button = new JButton("(" + i + ")");
            button.setFont(new Font("",Font.BOLD,10));
            button.setPreferredSize(new Dimension(4, 4));
            topButtonPanel.add(button);
        }
        for (int i=0; i<45; i++)
        {
            JButton button = new JButton("(" + i + ")");
            button.setFont(new Font("",Font.BOLD,10));
            button.setPreferredSize(new Dimension(4, 4));
            middleButtonPanel.add(button);
        }
        for (int i=0; i<18; i++)
        {
            JButton button = new JButton("(" + i + ")");
            button.setFont(new Font("",Font.BOLD,10));
            button.setPreferredSize(new Dimension(4, 4));
            lastButtonPanel.add(button);
            buttonPanel.add(topButtonPanel);
            buttonPanel.add(middleButtonPanel);
            buttonPanel.add(lastButtonPanel);
        }

        contentPane.add(buttonPanel, BorderLayout.CENTER);
        setContentPane(contentPane);
    }

}
Solution

  • I will try to show you one way to get a board like this:
    gameboard
    by only using the FlowLayout and the GridLayout

    the first thing you need is a JPanel that will contain the board. You can put it in the center of your Frame with the BorderLayout if you want to.

    ----------------------
|                     |
|                     |
|                     |
|                     |
|      mainpanel      |
|                     |
|                     |
|                     |
----------------------

    We will give it a FlowLayout so it can contain other components of different size. But the Flowlayout is too dynamic so we need to fix the size of the whole panel and set resizable(false).

    According to the picture we calculate 15x15 buttons, so for the sake of simplicity lets set a size of 600x600 size for the panel (each Button would have 40x40 pixels)

    Next we add some other components to the panel. There is a swing component that's called Filler – it will simply fill the empty space and we need some JPanels where we will put the buttons in.

    ----------------------
|       |     |       |
|   1   |  2  |   3   |
|_______|_____|_______|
|       |     |       |
|   4   |  5  |   6   |
|_______|_____|_______|
|       |     |       |
|   7   |  8  |   9   |
|       |     |       |
----------------------

    the components 1, 3, 7 and 9 are Fillers. You can initialized them like this:

     filler1 = new javax.swing.Box.Filler(new java.awt.Dimension(240, 240), new java.awt.Dimension(240, 240), new java.awt.Dimension(240, 240));
 filler3 = new javax.swing.Box.Filler(new java.awt.Dimension(240, 240), new java.awt.Dimension(240, 240), new java.awt.Dimension(240, 240));
 filler7 = new javax.swing.Box.Filler(new java.awt.Dimension(240, 240), new java.awt.Dimension(240, 240), new java.awt.Dimension(240, 240));
 filler9 = new javax.swing.Box.Filler(new java.awt.Dimension(240, 240), new java.awt.Dimension(240, 240), new java.awt.Dimension(240, 240));

    the three Dimensions will just make sure that the filler has a minimum and maximum size of 240x240 pixels.

    the components 2,4,5,6 and 8 are JPanels. and they need to be added to your main panel in this order:

    JPanel panel2 = new JPanel();
JPanel panel4 = new JPanel();
JPanel panel5 = new JPanel();
JPanel panel6 = new JPanel();
JPanel panel8 = new JPanel();

mainPanel.add(filler1);   // component 1
mainPanel.add(panel2);    // component 2
mainPanel.add(filler3);   // component 3

mainPanel.add(panel4);    // component 4
mainPanel.add(panel5);    // component 5
mainPanel.add(panel6);    // component 6

mainPanel.add(filler7);   // component 7
mainPanel.add(panel8);    // component 8
mainPanel.add(filler9);   // component 9

    Ok now that we have the basic components, you can see that they form sort of a cross...
    Our panels will contain the buttons and will all have a GridLayout

    panel2.setLayout(new java.awt.GridLayout(6, 3));
panel4.setLayout(new java.awt.GridLayout(3, 6));
panel6.setLayout(new java.awt.GridLayout(3, 6));
panel8.setLayout(new java.awt.GridLayout(6, 3));

    panel5 can be ignored.. actually it is just a filler for us right now.

    Now you create a list of 72 (!!) JButtons as you did in your loop above. The first 18 buttons you add to panel2, the next 18 buttons you add to panel4, the next 18 to panel6 and the last 18 buttons to panel8.

    And there you have it.

     _____________________________
|           |_|_|_|           |
|           |_|_|_|           |
|           |_|_|_|           |
|           |_|_|_|           |
|           |_|_|_|           |
|___________|_|_|_|___________|
|_|_|_|_|_|_|     |_|_|_|_|_|_|
|_|_|_|_|_|_|     |_|_|_|_|_|_|
|_|_|_|_|_|_|_____|_|_|_|_|_|_|
|           |_|_|_|           |
|           |_|_|_|           |
|           |_|_|_|           |
|           |_|_|_|           |
|           |_|_|_|           |
|___________|_|_|_|___________|