How to add multiple rectangles to a jframe(trying to code 2048 in an easy way)

Question

I made the game already and wanted to make my GUI look better with rectangles not with jlabels and now I´ve come to realize that only the last rectangle that is drawn is shown on the GUI

I already tried it with different layouts

my GUI class:

public class GUI_N    
{
    private Spiel spiel;
    private KeyEvent e;
    private String beste;
    private int beste1;
    private DrawingComponent[][] feld;
    GUI_N(){
        feld = new DrawingComponent[4][4];
        spiel = new Spiel();
        beste1 = 0;
        beste = "Highscore: "+beste1;


        JFrame g=new JFrame("2048 - Main");
        g.setSize(500,500);
        g.setFocusable(true); //wichtig für KeyListener
        g.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        int i = 0;
        int j = 0;
        int h = 0;
        int l = 0;
        while(i<4)
        {
            while(j<4)
            {
                if(i==0){ 
                    h = 50; 
                }else if(i==1){
                    h = 100; 
                }else if(i==2){
                    h = 150; 
                }else if(i==3){
                    h = 200;
                }
                if(j==0){ 
                    l = 50; 
                }else if(j==1){
                    l = 100; 
                }else if(j==2){
                    l = 150; 
                }else if(j==3){
                    l = 200;
                }
                feld[i][j] = new DrawingComponent(l,h,50,50);
                feld[i][j].setBounds(l,h,50,50);
                j++;
            }
            j=0;
            i++;
        }
        i = 0;
        j = 0;
        while(i<4)
        {
            while(j<4)
            {
                g.add(feld[i][j]);
                j++;
            }
            j=0;
            i++;
        }
        //g.getContentPane().setBackground(new Color(20, 40, 50));
        g.setVisible(true);

    }

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

my rectangle class:

public class DrawingComponent extends JComponent
{
    private Graphics2D g2;
    private int wert;

    private int x;
    private int y;
    private int w;
    private int h;

    public DrawingComponent(int px,int py,int pw,int ph)
    {
        x=px;
        y=py;
        w=pw;
        h=ph;
    }
    public void paintComponent(Graphics g)
    {
        g2 = (Graphics2D) g;

        Rectangle rect1 = new Rectangle(x,y,w,h);
        g2.setColor(Color.RED);
        g2.fill(rect1);
    }

    public void setWert(int x)
    {
        wert = x;
    }

    public int getWert()
    {
        return wert;
    }
}

as I said only the last drawn rectangle is shown.

How do I achieve this?

1) Don't forget to call `super.paintComponent(g)` on your `paintComponent(...)` method, so you don't break the paint-chain. 2) Give your variables meaningful names (`g` is confusing for a `JFrame` name, change it to `frame` for example, as `g` is often used for the `Graphics` object. 3) Don't use "magic-numbers" (i.e. create a constant called `ROWS = 4` and `COLS = 4` so that your `while-loops` are more understandable. 4) Don't set the bounds of any component, use proper [Layout Managers](https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html) — Frakcool, May 20 '19 at 16:13
5) Be careful naming your variables `x` and `y` as you may run into a strange, funny but stressful [behavior](https://stackoverflow.com/q/46779919/2180785) 6) No need to have 2 blocks of 2 nested `while-loops`, you can add `g.add(feld[i][j]);` before `j++` on the first block of them. And don't forget to put your program on the EDT, see point #2 on [this answer](https://stackoverflow.com/questions/42404270/jcomponent-stops-getting-rendered-once-it-goes-off-the-screen/42404808#42404808) — Frakcool, May 20 '19 at 16:17

score 2 · Accepted Answer · answered May 18 '19 at 21:28

Right now you're adding the rectangles directly to your frame. You should have a JPanel layer in between, to which you can give a LayoutManager (GridLayout would be a good one to look at) to arrange all your rectangles.

So you would have something like this:

JFrame g = new JFrame("2048 - Main");
// GridLayout (on next line) takes number of rows and columns
JPanel panel = new JPanel(new GridLayout(4, 4));
// ... add all the rectangles to the panel here
g.add(panel);

And then you would add your rectangles to the panel, not the frame. As you add them, they will automatically go into place in the grid.

panel.add(feld[i][j]);

Also, if you use GridLayout, it will resize and fit the components to the grid dynamically, so it may save you some code as well, since you wouldn't need to hardcode their sizes in the GUI class.

How to add multiple rectangles to a jframe(trying to code 2048 in an easy way)

1 Answers1