使用GridBagLayout和JScrollPane创建Instagram类型的Feed

Question

如何在Swing中使用GridBagLayout和JScrollPane创建Instagram类型的Feed？

oki所以我试图创建一个类似于Instagram提要的画廊类似的东西（三个图像并排，行可以是多少）。

我尝试使用网格布局到jpanel，然后将此jpanel添加到jscrollpane。

//只是代码的主要部分

       rightbottom=new JPanel();       
    rightbottom.setPreferredSize(new Dimension(200,200));
    rightbottom.setLayout(new GridBagLayout());
    GridBagConstraints c1=new GridBagConstraints();
    c1.insets = new Insets(1, 1, 1, 1);
    gallery = new JScrollPane(rightbottom);


 gallery.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_ALWAYS); 

//aetherfirst，aethersecond..etc是根据我的首选尺寸自定义的图像标签

    c1.gridx=0;
    c1.gridy=0;
    c1.weightx=1;
    c1.weighty=1;
    c1.fill = GridBagConstraints.BOTH;

    rightbottom.add(aetherfirst,c1);

    c1.gridx=1;
    c1.gridy=0;
    rightbottom.add(aethersecond,c1);
    c1.gridx=2;
    c1.gridy=0;
    rightbottom.add(aetherthird,c1);
    c1.gridx=0;
    c1.gridy=1;
    rightbottom.add(aetherfourth,c1);
    c1.gridx=1;
    c1.gridy=1;
    rightbottom.add(aetherfifth,c1);
    c1.gridx=2;
    c1.gridy=1;
    rightbottom.add(aethersixth,c1);
    c1.gridx=0;
    c1.gridy=2;
    rightbottom.add(aetherseventh,c1);

它并没有像预期的那样出现，每次我添加更多的图像而不是使用空间，这样我可以向下滚动以查看在可见空间中看不到的图像，它缩小了其他图像，使其适合所有可见的相同空间。

Answer 1

你为什么要使用GridBagLayout？它可以简单地使用FlowLayout（水平滚动）或GridLayout（垂直滚动）来实现。

请参阅以下示例：

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.GridLayout;
import java.util.Random;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.WindowConstants;

public class InstaFeedSimulation{

    public static void main(String[] args) {
        JScrollPane flowPanelScrollPane = new JScrollPane(new FlowFeed());
        JFrame flowFrame = new JFrame("Instagram Feed Panel Simulation");
        flowFrame.setBounds(200, 200, 187, 120);
        flowFrame.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
        flowFrame.setLayout(new BorderLayout());
        flowFrame.add(flowPanelScrollPane, BorderLayout.CENTER);
        flowFrame.setVisible(true);
        //
        JScrollPane gridPanelScrollPane = new JScrollPane(new GridFeed());
        JFrame gridFrame = new JFrame("Instagram Feed Panel Simulation");
        gridFrame.setBounds(400, 400, 190, 250);
        gridFrame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        gridFrame.setLayout(new BorderLayout());
        gridFrame.add(gridPanelScrollPane, BorderLayout.CENTER);
        gridFrame.setVisible(true);
    }
}

class FlowFeed extends JPanel{
    private Color[] COLORS = new Color[] {Color.BLUE, Color.CYAN, Color.DARK_GRAY, Color.GRAY, Color.GREEN,
              Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE, Color.PINK, Color.RED,
              Color.YELLOW, Color.WHITE};

    public FlowFeed() {
        this.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 5));
        //
        Random rand = new Random();
        for (int i = 0; i < 28; i++) {
            JPanel aPanel = new JPanel();
            aPanel.setPreferredSize(new Dimension(50, 50));
            aPanel.setBackground(COLORS[rand.nextInt(COLORS.length)]);
            this.add(aPanel);
        }
    }
}

class GridFeed extends JPanel{
    private Color[] COLORS = new Color[] {Color.BLUE, Color.CYAN, Color.DARK_GRAY, Color.GRAY, Color.GREEN,
                                  Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE, Color.PINK, Color.RED,
                                  Color.YELLOW, Color.WHITE};
    public GridFeed() {
        this.setLayout(new GridLayout(10,3,3,3));
        //
        Random rand = new Random();
        for (int i = 0; i < 28; i++) {
            JPanel aPanel = new JPanel();
            aPanel.setPreferredSize(new Dimension(50, 50));
            aPanel.setBackground(COLORS[rand.nextInt(COLORS.length)]);
            this.add(aPanel);
        }
    }
}

希望这有帮助，告诉我，如果我的想法是错误的。