I recently started with Java GUIs a few weeks ago and I have a difficulty with alignment.
Basically, I'm trying to have two Panels with a different background image (top Bar and content) and I want to align them one after another.
The problem is, that I can't use BorderLayout.NORTH and BorderLayout.SOUTH, because the background image loses his original size and gets very tiny.
How can I align them correctly, without losing the original size?
Here's my code:
package main;
import java.awt.BorderLayout;
import java.awt.Graphics;
import java.awt.Image;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class ImageTest {
public static void main(String[] args) {
ImageFrame frame = new ImageFrame("topBar.png", "contentImage.png");
frame.setSize(640,480);
frame.setVisible(true);
}
}
class ImagePanel extends JPanel {
private Image img;
public ImagePanel(String img) {
this(new ImageIcon(img).getImage());
}
public ImagePanel(Image img) {
this.img = img;
}
public void paintComponent(Graphics g) {
g.drawImage(img, 0, 0, null);
}
}
class ImageFrame extends JFrame {
public ImageFrame(String topBar, String body) {
setLayout(new BorderLayout());
ImagePanel topPanel = new ImagePanel(topBar);
ImagePanel bodyPanel = new ImagePanel(body);
add(topPanel, BorderLayout.NORTH);
add(bodyPanel, BorderLayout.SOUTH);
pack();
}
}
There are a number of issues that popup out at me
You're not calling super.paintComponent. This is very important and can not be understated
You really should be using ImageIO to load your images. Ala from the fact it supports a wider range of image formats, it also loads images concurrent and throws useful exceptions when something goes wrong
You're not supplying any preferredSize values. This is used by the layout manager to decide how best to layout your component. Remember though, this are only hints and layout managers are well within there rights to ignore them
Check out Reading/Loading an Image for more details on ImageIO
..the background image loses his original size and gets very tiny.
That is because the preferred size for a panel is 0x0 until components are put in it.
There are at least two ways to solve this:
Add content to the panels.
Override getPreferredSize() to return the Dimension of the image.
The first is optimal, but I'll show how to do the 2nd (less code).
import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class ImageTest {
public static void main(String[] args) {
ImageFrame frame = new ImageFrame();
//frame.setSize(640,480);
frame.pack();
frame.setVisible(true);
}
}
class ImagePanel extends JPanel {
private Image img;
public ImagePanel(String img) {
this(new ImageIcon(img).getImage());
}
public ImagePanel(Image img) {
this.img = img;
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
// a panel IS an ImageObserver, so use it here.
g.drawImage(img, 0, 0, this);
}
#Override
public Dimension getPreferredSize() {
int w = img.getWidth(this);
int h = img.getHeight(this);
return new Dimension(w,h);
}
}
class ImageFrame extends JFrame {
public ImageFrame() {
setLayout(new BorderLayout(2,2));
setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
ImagePanel topPanel = new ImagePanel(new BufferedImage(200,20,BufferedImage.TYPE_INT_RGB));
ImagePanel bodyPanel = new ImagePanel(new BufferedImage(200,100,BufferedImage.TYPE_INT_RGB));
add(topPanel, BorderLayout.NORTH);
add(bodyPanel, BorderLayout.SOUTH);
pack();
}
}
Related
In the below example, how can I get the JPanel to take up all of the JFrame? I set the preferred size to 800x420 but it only actually fills 792x391.
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics2D;
import java.awt.image.BufferStrategy;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class BSTest extends JFrame {
BufferStrategy bs;
DrawPanel panel = new DrawPanel();
public BSTest() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLayout(new BorderLayout()); // edited line
setVisible(true);
setSize(800,420);
setLocationRelativeTo(null);
setIgnoreRepaint(true);
createBufferStrategy(2);
bs = getBufferStrategy();
panel.setIgnoreRepaint(true);
panel.setPreferredSize(new Dimension(800,420));
add(panel, BorderLayout.CENTER); // edited line
panel.drawStuff();
}
public class DrawPanel extends JPanel {
public void drawStuff() {
while(true) {
try {
Graphics2D g = (Graphics2D)bs.getDrawGraphics();
g.setColor(Color.BLACK);
System.out.println("W:"+getSize().width+", H:"+getSize().height);
g.fillRect(0,0,getSize().width,getSize().height);
bs.show();
g.dispose();
Thread.sleep(20);
} catch (Exception e) { System.exit(0); }
}
}
}
public static void main(String[] args) {
BSTest bst = new BSTest();
}
}
If you are having only one panel in frame and nothing else then try this:
Set BorderLayout in frame.
Add panel in frame with BorderLayout.CENTER
May be this is happening because of while loop in JPanel.(Not sure why? finding actual reason. Will update when find it.) If you replace it with paintComponent(g) method all works fine:
public BSTest() {
//--- your code as it is
add(panel, BorderLayout.CENTER);
//-- removed panel.drawStuff();
}
public class DrawPanel extends JPanel {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setColor(Color.BLACK);
System.out.println("W:" + getSize().width + ", H:" + getSize().height);
g2d.fillRect(0, 0, getSize().width, getSize().height);
}
}
//your code as it is.
Here's an alternative using pack instead.
import java.awt.Color;
import java.awt.Dimension;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class PackExample extends JFrame {
public PackExample(){
JPanel panel = new JPanel();
panel.setPreferredSize(new Dimension(800,600));
panel.setBackground(Color.green);
add(panel);
pack();
setVisible(true);
}
public static void main(String[] args){
new PackExample();
}
}
This took me forever to figure out but its actually the simplest code ever.
Just create a parent panel and pass GridLayout then add your child panel like this.
JPanel parentPanel= new JPanel(new GridLyout());
JPanel childPanel= new JPanel();
parentPanel.add(childPanel);
If you want to fill the JFrame with the whole of JPanel you need to setUndecorated to true i.e. frame.setUndecorated(true);. But now you have to worry about your MAXIMIZE< MINIMIZE, and CLOSE Buttons, towards the top right side(Windows Operating System)
Im trying to add a JScrollpane to my JPanel. The problem is that the scrollpane doesn't recognize that my drawing is outside the frame. So how do I add the JScrollpane correctly?
Main class:
public MainFrame() extends JFrame{
public MainFrame() {
Container container = getContentPane();
container(new BorderLayout());
container.add(new JScrollPane(new Drawing()));
setSize(1280,720);
setVisible(true);
}
Drawing class:
public class Drawing() extends JPanel {
#Override
protected void paintComponent(Graphics g) {
g.drawLine(10, 100, 30000, 10);
}
}
There are a couple of errors in your code, let's step through each of them:
You're extending JFrame, and you should avoid it, see: Extends JFrame vs. creating it inside the program for more information about it. You're actually not changing its behavior so it's not needed to extend it.
For your JScrollPane to show the whole line, you need to change your window's size to be the same size of your line (as shown in this answer by #MadProgrammer).
Related to point 2, avoid the use of setSize(...) and instead override getPreferredSize(): See Should I avoid the use of set(Preferred|Maximum|Minimum)Size methods in Java Swing? for more information
You forgot to call super.paintComponent(...) method in your paintComponent() method.
Related to points 2, 3, you need to call pack() so Swing calculates the best preferred size for your component.
See this example:
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.SwingUtilities;
public class LongDraw {
private JFrame frame;
private Drawing drawing;
public static void main(String[] args) {
SwingUtilities.invokeLater(new LongDraw()::createAndShowGui);
}
private void createAndShowGui() {
frame = new JFrame(getClass().getSimpleName());
drawing = new Drawing();
JScrollPane scroll = new JScrollPane(drawing);
frame.add(scroll);
frame.pack();
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
class Drawing extends JPanel {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.drawLine(10, 100, 3000, 10);
}
#Override
public Dimension getPreferredSize() {
return new Dimension(3000, 500);
}
}
}
Which produces something similar to this:
i am setting frame's background image when i run program my other components are invisible only image is visible in frame
class ImagePanel extends JComponent {
private Image image;
public ImagePanel(Image image) {
this.image = image;
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawImage(image, 0, 0, this);
}
In the main class I call the above class as shown below:
BufferedImage myImage = ImageIO.read(new File("cal.jpg"));
frame.setContentPane(new ImagePanel(myImage));
You have this code:
BufferedImage myImage = ImageIO.read(new File("cal.jpg"));
frame.setContentPane(new ImagePanel(myImage));
but you appear to be creating the ImagePanel instance inline, and don't appear to be adding any components to this ImagePanel instance, so I'm not surprised that you're not seeing any components. You also don't seem to be adding any components to it in the ImagePanel constructor.
Consider adding components to the ImagePanel class within its constructor, or in the class that uses it, create an ImagePanel instance, assign it to a variable, add components to it, and then place it into the JFrame's contentPane.
Side recommendations:
Consider getting your image as a Jar resource and not as a File, since likely you will Jar the classes at some point, and if you continue using File, your image might not be reachable.
Make sure to give your ImagePanel a decent layout manager. I believe that JComponents use null layouts by default, something that you don't want to use.
For example, this worked for me:
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Image;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.*;
public class TestImagePanel {
private static void createAndShowGui() {
String resource = "/imgFolder/PlanetEarth.jpg";
Image image = null;
try {
image = ImageIO.read(TestImagePanel.class.getResource(resource));
} catch (IOException e) {
e.printStackTrace();
System.exit(-1);
}
ImagePanel mainPanel = new ImagePanel(image);
mainPanel.setLayout(new FlowLayout());
mainPanel.add(new JButton("Fubars Rule!"));
JFrame frame = new JFrame("TestImagePanel");
frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
frame.getContentPane().add(mainPanel);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
createAndShowGui();
}
});
}
}
#SuppressWarnings("serial")
class ImagePanel extends JComponent {
private Image image;
public ImagePanel(Image image) {
this.image = image;
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawImage(image, 0, 0, this);
}
#Override
public Dimension getPreferredSize() {
Dimension superSize = super.getPreferredSize();
int w = image == null ? superSize.width : Math.max(superSize.width, image.getWidth(null));
int h = image == null ? superSize.height : Math.max(superSize.height, image.getHeight(null));
Dimension d = new Dimension(w, h);
return d;
}
}
and showed this GUI:
I don't understand why the picture painted on my background isn't resized on JFrame resize.
Basically I create a JFrame and a JPanel inside this frame.
Then I set my background picture (animated gif) with the method "setBackground" that creates an object of another class. In this new class called "ImagePanel" I draw the picture and paint another smaller picture over the background picture. The result is ok unless I resize the JFrame.
The background picture "follows" the resize, while the smaller picture remains at the beginning point. I draw both the pictures with the paintComponent(), and I set the dimension of the pictures on the base of the Width and Height of the JFrame, but it doesn't seem to work.
I added an action listener too, to listen to the resize on the JFrame. When it listens the resize it calls "repaint()", but it doesn't work (I also tried "revalidate()" both on the JFrame and the JPanel without success).
It seems that when you enlarge the JFrame almost covering all the screen it has an update, on a fixed point the smaller picture is "updated" but in a wrong way, and only if the JFrame is very large.
Here is the code. The "GameWindow" class:
import java.awt.BorderLayout;
import java.awt.event.ComponentEvent;
import java.awt.event.ComponentListener;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
public class GameWindow extends JFrame {
private JPanel mapPicture = new JPanel();
public GameWindow(){
super("WELCOME!!!");
setSize(768, 768);
addComponentListener(new ResizeListener(this));
setLocationRelativeTo(null);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLayout(new BorderLayout());
setBackground();
setVisible(true);
}
private void setBackground() {
mapPicture = new ImagePanel("map.gif", this);
add(mapPicture, BorderLayout.CENTER);
mapPicture.setLayout(new BorderLayout());
}
public class ResizeListener implements ComponentListener {
private JFrame parentFrame;
public ResizeListener(JFrame parentFrame) {
this.parentFrame = parentFrame;
}
public void componentHidden(ComponentEvent e) {}
public void componentMoved(ComponentEvent e) {}
public void componentShown(ComponentEvent e) {}
public void componentResized(ComponentEvent e) {
repaint();
}
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
new GameWindow2();
}
});
}
}
And here is the "ImagePanel" class:
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class ImagePanel extends JPanel {
private ImageIcon background;
private JFrame parentFrame;
private ImageIcon smallerImage = new ImageIcon(getClass().getResource("car.png"));
public ImagePanel(String imgPath, JFrame parentFrame) {
this.parentFrame = parentFrame;
background = new ImageIcon(getClass().getResource(imgPath));
}
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
g2d.drawImage(background.getImage(), 0, 0, getWidth(), getHeight(), this);
g2d.drawImage(smallerImage.getImage(), 119*((parentFrame.getWidth()/768)), 172*((parentFrame.getHeight())/768), 32*((parentFrame.getWidth())/768), 32*((parentFrame.getHeight())/768),this);
}
}
I don't understand why the smaller picture isn't redrawn with the new proportions.
PS: I can't use a layout manager to set the position of the second picture, because I will have a lot of objects (in the future) to put in a casual way on the map (and possibly animate them).
it is because you are using integer arithmetic and dividing before multiplying :119*(parentFrame.getWidth()/768)
instead you floating point arithmetic and cast to an int : (int)(119.0*(parentFrame.getWidth()/768.0))
I'm creating a simple window with a background image by Swing java library.
The problem is :background image appear only when you resize window.
import java.awt.Container;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.LayoutManager;
import java.awt.MediaTracker;
import java.awt.event.ActionListener;
import javax.swing.*;
import java.awt.Toolkit;
public class StartWindow {
JFrame frame;
private JButton button;
private JButton button2;
public void CreateStartWindow() {
frame = Window.createwindow();
Container container = frame.getContentPane();
JpanelStart panel = new JpanelStart();
container.add(panel);
this.button = new JButton("Start");
this.button2 = new JButton("Classifica");
panel.add(button);
panel.add(button2);
}
public void addActionListener(ActionListener al) {
this.button.addActionListener(al);
this.button2.addActionListener(al);
}
public void chiudi() {
frame.dispose();
}
}
class JpanelStart extends JPanel {
private Image img;
private String path_img="img/sfondo.jpg";
public JpanelStart(){
img = Toolkit.getDefaultToolkit().createImage(path_img);
loadImage(img);
}
private void loadImage(Image img) {
try {
MediaTracker track = new MediaTracker(this);
track.addImage(img, 0);
track.waitForID(0);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
#Override
protected void paintComponent(Graphics g){
setOpaque(false);
g.drawImage(img,0, 0, null);
super.paintComponent(g);
}
}
Window
public class Window extends JFrame {
public static JFrame createwindow() {//fare singleton
JFrame frame = new JFrame("Battaglia navale");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(640, 640);
frame.setVisible(true);
Dimension dim = Toolkit.getDefaultToolkit().getScreenSize();
frame.setLocation(((int)dim.getWidth()-(int)frame.getWidth())/2,
((int)dim.getHeight()-(int)frame.getHeight())/2);
return frame;
}
;
}
If possible, call setVisible on the frame after you've added the components to it, otherwise you'll need to use revalidate and repaint.
Don't call super.paintComponent after you've painted something, as it's likely to clear Graphics context
Don't change the state of any component from with the paintComponent method, call setOpaque is bad from within the paint method is a bad idea, as the Graphics context has already being prepared assuming that the component was opaque
As has already being suggest, you should be passing this as the last parameter to drawImage, especially because of the way you load the image. Personally, I prefer to use ImageIO to load images, as it provides more details when the image fails to load....
In this line...
g.drawImage(img,0, 0, null);
... you are passing null as the ImageObserver, so your component is not told to repaint when the image is loaded. You ought to pass this.