I would like each element of the list to have multiple components. Maybe a title, some text below it or even a button? Is that possible? I'm hoping to find something similar to SwiftUI's list view.
Something like this: https://www.appcoda.com/wp-content/uploads/2019/06/image-8-1024x607.png (not enough reputation to add images)
@ewramner's answer is correct. A custom ListCellRenderer will get it done. Here is an example using a JPanel as the renderering component which includes a nested JPanel (named rightPanel).
(Some comments inside code)
public class MultiComponentListCellRenderer {
public static void main(String[] args) {
Person mike = new Person("Mike", 25);
Person alice = new Person("Alice", 30);
DefaultListModel<Person> model = new DefaultListModel<>();
model.addElement(mike);
model.addElement(alice);
JList<Person> personJList = new JList<>(model);
personJList.setCellRenderer(new PersonListCellRenderer());
JOptionPane.showMessageDialog(null, personJList);
}
public static class Person {
private String name;
private int age;
public Person(String name, int age) {
super();
this.name = name;
this.age = age;
}
}
public static class PersonListCellRenderer extends JPanel implements ListCellRenderer<Person> {
private JLabel nameLabel;
private JLabel ageLabel;
private JLabel iconLabel;
private JPanel rightPanel;
public PersonListCellRenderer() {
super(new BorderLayout());
nameLabel = new JLabel();
ageLabel = new JLabel();
iconLabel = new JLabel();
try {
Image personImg = ImageIO.read(new URL("https://cdn2.iconfinder.com/data/icons/people-80/96/Picture1-512.png"));
ImageIcon personIcon = new ImageIcon(personImg.getScaledInstance(20, 20, Image.SCALE_SMOOTH));
iconLabel.setIcon(personIcon);
} catch (IOException e) {
e.printStackTrace();
}
add(iconLabel, BorderLayout.LINE_START);
//Right panel will contain name and age, top and bottom respectively
rightPanel = new JPanel(new BorderLayout());
rightPanel.add(nameLabel, BorderLayout.PAGE_START);
rightPanel.add(ageLabel, BorderLayout.PAGE_END);
add(rightPanel, BorderLayout.CENTER);
setOpaque(true); //for visible backgrounds
rightPanel.setOpaque(true);//for visible backgrounds
}
@Override
public Component getListCellRendererComponent(JList<? extends Person> list, Person value, int index, boolean isSelected,
boolean cellHasFocus) {
nameLabel.setText(value.name);
ageLabel.setText(String.valueOf(value.age));
if (isSelected) {
setBackground(list.getSelectionBackground());
setForeground(list.getSelectionForeground());
rightPanel.setBackground(list.getSelectionBackground());
rightPanel.setForeground(list.getSelectionForeground());
} else {
setBackground(list.getBackground());
setForeground(list.getForeground());
rightPanel.setBackground(list.getBackground());
rightPanel.setForeground(list.getForeground());
}
return this;
}
}
}
The result:

It is not very detailed, but the Java tutorial mentions that you can use a custom ListCellRenderer. That should do the job!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With