Java, Swing – jak umieścić grafikę (zdjęcie) w oknie?

Nauczyliśmy się już jak wczytać, wyświetlić, edytować i zapisać tekst a także jak w prosty sposób nim manipulować z poziomu kodu. Teraz przyszedł czas na umieszczenie w interfejsie grafiki, np. zdjęcia.

Bazując na poprzednich tutorialach tworzymy główne okno programu, umieszczamy w nim jLabel , rozciągamy go, tak by zmieściło się na nim zdjęcie, które chcemy umieścić.

Rys. 1: Dopasowanie wymiarów JLabel

Usuwamy domyślnie wyświetlany tekst oraz zmieniamy nazwę kontrolki na „labelFoto”.Dodajemy też przycisk („Otwórz”), nazywamy go „buttonOtworz”.

Teraz dokonamy małej korekty kontrolki jLabel. W zakładce z opcjami kontrolki znajdź pole „border” i kliknij w kwadrat po prawej. Pojawi się okno, w którym możesz wybrać rodzaj ramki, a także takie parametry jak kolor i grubość. Ustaw wartości wg. uznania, byleby ramka była widoczna.

Rys. 2: Dodawanie ramki do JLabel

Rys. 3: Wybór koloru ramki

Potrzebny nam jeszcze będzie jeden komponent – JTextField, który nazywamy „textFieldSciezka”. Teraz okno aplikacji po uruchomieniu powinno wyglądać mniej więcej tak:

Rys. 4: Okno programu

Czas dodać kod do metody wykonywanej po kliknięciu przycisku.

private void buttonOtworzActionPerformed(java.awt.event.ActionEvent evt) {
try {
String sciezka = textFieldSciezka.getText();
System.out.println("Scieżka "+sciezka);
File file = new File(sciezka);
BufferedImage bi = ImageIO.read(file);
ImageIcon imgIcon = new ImageIcon(bi);
labelFoto.setIcon(imgIcon);
} catch (IOException ex) {
Logger.getLogger(NewJFrame.class.getName()).log(Level.SEVERE, null, ex);
}
}

Nie wchodząc w szczegóły, kontrolka textFieldSciezka służy do wpisywania ścieżki do zdjęcia, które chcemy wyświetlać. W linii 3 program ją pobiera i przypisuje do zmiennej „sciezka”. Następnie ścieżka jest przekazywana do tworzonego obiektu klasy File (file). Jest on przekazywany do ImageIO.read() i tworzony jest obiekt bi klasy BufferedImage służący odczytaniu pliku, czyli w tym przypadku zdjęcia.

Kolejny utworzony obiekt imgIcon klasy ImageIcon jest przekazywany do kontrolki służącej wyświetlaniu zdjęcia przez wywołanie metody labelFoto.setIcon(imgIcon).

Po uruchomieniu programu, wpisaniu ścieżki i wciśnięciu przycisku program powinien wyświetlić zdjęcie.

Image 5: Aplikacja z wczytanym zdjęciem

Na koniec parę uwag.

Jak widać na powyższym obrazku, zdjęcie nie dopasowuje się automatycznie do ramki. Jeśli z góry wiemy jakie zdjęcie ma być wyświetlane można wcześniej dobrać wymiary i/lub zdjęcia, aby się zgadzały. Jeśli jednak użytkownik ma wybierać wyświetlaną grafikę, która może mieć dowolny rozmiar, to dobrze by było zadbać o automatyczne dopasowanie wielkości kontrolki do zdjęcia lub odwrotnie. To zagadnienie wybiega jednak poza zakres tego tutoriala (może za jakiś czas…).

Oczywiście stosowanie okienka tekstowego nie jest konieczne. Jeśli z góry wiemy jaki plik chcemy wczytać, na sztywno ustawiamy ścieżkę. Jeśli nasz program ma wyświetlać zdjęcie wybrane przez użytkownika, byłoby sensowniej użyć komponentu jFileChooser. Jak to zrobić opisałem tutaj i tutaj. Trzebaby wtedy zmodyfikować powyższy kod na mniej więcej taki:

Powinno działać.