This discussion is archived
9 Replies Latest reply: Feb 14, 2012 2:24 PM by morgalr RSS

Creating a horizontal list of images using JScrollPane.

915225 Newbie
Currently Being Moderated
Hey there, I m trying to creating a horizontal JScrollPane which includes multiple images.. i could able to find the how to do that and also can't think of that on my own.. i am quite stuck at that.. could anyone pls help me.. with some samples..
  • 1. Re: Creating a horizontal list of images using JScrollPane.
    DarrylBurke Guru Moderator
    Currently Being Moderated
    Let's see what you've already tried, in the form of a SSCCE (Short, Self Contained, Compilable and Executable) example. If you're clueless, read the API for JList and follow the link to the Swing tutorial on How to Use Lists.

    Be sure to read the announcements at the top of the forum listing before you post any code.

    db
  • 2. Re: Creating a horizontal list of images using JScrollPane.
    morgalr Explorer
    Currently Being Moderated
    Here are just a couple thouhts to get you started: you can add JLabels with the appropriate layout selected and add your images to the JLabels or you can paint each image you want onto a larger image and render it to the background of the JScrollPane.
  • 3. Re: Creating a horizontal list of images using JScrollPane.
    DarrylBurke Guru Moderator
    Currently Being Moderated
    morgalr wrote:
    Here are just a couple thouhts to get you started: you can add JLabels with the appropriate layout selected and add your images to the JLabels or you can paint each image you want onto a larger image and render it to the background of the JScrollPane.
    Why go to all that trouble when JList can do it for you?

    db
  • 4. Re: Creating a horizontal list of images using JScrollPane.
    morgalr Explorer
    Currently Being Moderated
    Merry Christmas... here's an example, it's slow around here today:
    import java.awt.Dimension;
    import java.awt.Graphics;
    import java.awt.Graphics2D;
    import java.awt.image.BufferedImage;
    
    import java.net.URL;
    
    import javax.swing.JFrame;
    import javax.swing.JPanel;
    import javax.swing.JScrollPane;
    
    import javax.imageio.ImageIO;
    
    public class JScrollPaneJunk {
      public JScrollPaneJunk(){
        JFrame f = new JFrame("JScrollPaneJunk 1.0");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        MyJPanel p = new MyJPanel();
        JScrollPane jp = new JScrollPane(p);
        jp.setPreferredSize(new Dimension(400, 300));
        f.add(jp);
        f.pack();
        f.setVisible(true);
      }
      public static void main(String[] args) {
        new JScrollPaneJunk();
      }
      class MyJPanel extends JPanel{
        BufferedImage bi = new BufferedImage(800, 282, BufferedImage.TYPE_INT_BGR);
        public MyJPanel(){
          this.setPreferredSize(new Dimension(800, 282));
          Graphics2D g = bi.createGraphics();
          int iState = 0;
          try{
            URL url1 = new URL("http://www.nss.org/tourism/SpaceShipTwo-1600.jpg");
            URL url2 = new URL("http://static.ddmcdn.com/gif/space-tourism-ring.jpg");
            BufferedImage biTemp = ImageIO.read(url1);
            g.drawImage(biTemp, 0, 0, 400, 282, this);
            biTemp = ImageIO.read(url2);
            g.drawImage(biTemp, 400, 0, 400, 282, this);
          }catch(Exception e){
            e.printStackTrace();
            iState = 1;
          }
          if(iState>0) bi = null;
        }
        public void paintComponent(Graphics g){
          super.paintComponent(g);
          if(bi!=null) g.drawImage(bi, 0, 0, this);
        }
      }
    }
  • 5. Re: Creating a horizontal list of images using JScrollPane.
    morgalr Explorer
    Currently Being Moderated
    It's going to take about the same amount of effort to control the size of the individual images and get them all looking nice together, so why not?
  • 6. Re: Creating a horizontal list of images using JScrollPane.
    DarrylBurke Guru Moderator
    Currently Being Moderated
    Try with images of different sizes if you like. The JList adjusts its preferredSize to the tallest image, you don't need to do anything extra for that. You may want to set the vertical alignment of the renderer to TOP or BOTTOM.

    Double brace initialization used for brevity.
    import java.awt.Component;
    import java.net.MalformedURLException;
    import java.net.URL;
    import javax.swing.*;
    
    public class HorizontalImageList {
    
      public static void main(String[] args) throws Exception {
        SwingUtilities.invokeLater(new Runnable() {
    
          @Override
          public void run() {
            new HorizontalImageList().makeUI();
          }
        });
      }
    
      public void makeUI() {
        try {
          JList list = new JList(
                  new Object[]{new ImageIcon(new URL("https://forums.oracle.com/forums/images/status/05-gold.gif")),
                    new ImageIcon(new URL("https://forums.oracle.com/forums/images/status/04-double-silver.gif")),
                    new ImageIcon(new URL("https://forums.oracle.com/forums/images/status/03-silver.gif")),
                    new ImageIcon(new URL("https://forums.oracle.com/forums/images/status/02-double-bronze.gif")),
                    new ImageIcon(new URL("https://forums.oracle.com/forums/images/status/01-bronze.gif")),
                    new ImageIcon(new URL("https://forums.oracle.com/forums/images/status/ace_director_gold.jpg")),
                    new ImageIcon(new URL("https://forums.oracle.com/forums/images/status/customer_aces_black.jpg")),
                    new ImageIcon(new URL("https://forums.oracle.com/forums/images/status/Oracle_aces_red.jpg")),
                    new ImageIcon(new URL("https://forums.oracle.com/forums/images/status/18x18_simplified_duke.jpg")),
                    new ImageIcon(new URL("https://forums.oracle.com/forums/images/answer-helpful-16x16.gif")),
                    new ImageIcon(new URL("https://forums.oracle.com/forums/images/answer-correct-16x16.gif")),}) {
    
            {
              setLayoutOrientation(JList.HORIZONTAL_WRAP);
              setVisibleRowCount(1);
              setCellRenderer(new DefaultListCellRenderer() {
    
                @Override
                public Component getListCellRendererComponent(JList list, Object value, int index,
                        boolean isSelected, boolean cellHasFocus) {
                  super.getListCellRendererComponent(list, value, index,
                          isSelected, cellHasFocus);
                  setBorder(BorderFactory.createEmptyBorder(20, 20, 20, 20));
                  setText("");
                  setIcon((Icon) value);
                  return this;
                }
              });
            }
          };
          JFrame frame = new JFrame();
          frame.add(new JScrollPane(list));
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          frame.setSize(200, 200);
          frame.setLocationRelativeTo(null);
          frame.setVisible(true);
        } catch (MalformedURLException ex) {
          ex.printStackTrace();
        }
      }
    }
    db
  • 7. Re: Creating a horizontal list of images using JScrollPane.
    morgalr Explorer
    Currently Being Moderated
    Darryl,

    Nice solution. I almost never look at solutions with ImageIcon, just perference from the old days, but you have a nice solution.

    Les
  • 8. Re: Creating a horizontal list of images using JScrollPane.
    DarrylBurke Guru Moderator
    Currently Being Moderated
    Thank you, Les. I like a solution where the core Swing code takes care of sizes and layouts; I have the same aversion to calling setPreferredSize(...) as I have for setLayout(null) ;)

    db
  • 9. Re: Creating a horizontal list of images using JScrollPane.
    morgalr Explorer
    Currently Being Moderated
    I'm a control freak, and tend to exploit some of the bad habbits from the old days to let me indulge in micro managing a GUI to death at times.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points