Jak tworzyć zakładki z ikonami w JavaFX

Question

Chcę utworzyć panel zakładki z ikon podobnych do panelu konfiguracyjnego Firefox z JavaFX:

Czy istnieje jakiś przykład, który można użyć, aby zobaczyć, jak wdrożyć to?

Answer 1

Karty, podobnie jak wiele innych elementów w JavaFX, mają metodę o nazwie setGraphic(Node value), w której można umieścić dowolny węzeł JavaFX. Przykład:

import javafx.application.Application; 
import javafx.geometry.Pos; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.control.Label; 
import javafx.scene.control.Tab; 
import javafx.scene.control.TabPane; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.HBox; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Circle; 
import javafx.stage.Stage; 

public class TabPaneTest extends Application { 
    public static void main(String[] args) { 
    Application.launch(args); 
    } 
    @Override 
    public void start(Stage primaryStage) { 
    primaryStage.setTitle("Tabs"); 
    Group root = new Group(); 
    Scene scene = new Scene(root, 400, 250, Color.WHITE); 
    TabPane tabPane = new TabPane(); 
    BorderPane borderPane = new BorderPane(); 
    for (int i = 0; i < 5; i++) { 
     Tab tab = new Tab(); 
     tab.setGraphic(new Circle(0, 0, 10)); 
     HBox hbox = new HBox(); 
     hbox.getChildren().add(new Label("Tab" + i)); 
     hbox.setAlignment(Pos.CENTER); 
     tab.setContent(hbox); 
     tabPane.getTabs().add(tab); 
    } 
    // bind to take available space 
    borderPane.prefHeightProperty().bind(scene.heightProperty()); 
    borderPane.prefWidthProperty().bind(scene.widthProperty()); 

    borderPane.setCenter(tabPane); 
    root.getChildren().add(borderPane); 
    primaryStage.setScene(scene); 
    primaryStage.show(); 
    } 
} 

Wynik:

Answer 2

Znam Jego stary wątek, ale nie zrobił znaleźć bezpośredniej odpowiedzi w dowolnym miejscu. Pomyślałem więc o opublikowaniu tego, że będzie pomocny dla niektórych szukających go.

Oto, co zrobiłem, aby uzyskać kartę, na przykład ekran preferencji firefox.

Dodaj obraz do zakładki za pomocą setGraphics i dodaj następujący kod do pliku css aplikacji. Mój rozmiar obrazu wynosił 48x48. Więc poszedłem do wysokości jak 70

.tab-label { 
    -fx-content-display: top; 
} 
.tab-pane { 
    -fx-tab-min-height: 70; 
    -fx-tab-max-height: 70; 
} 

Answer 3

Jak dodać zdjęcie bezpośrednio z obrazu URL:

  Tab tab = new Tab(); 
      tab.setGraphic(buildImage("patch/to/image"); 

    // Helper method to create image from image patch 
    private static ImageView buildImage(String imgPatch) { 
      Image i = new Image(imgPatch); 
      ImageView imageView = new ImageView(); 
      //You can set width and height 
      imageView.setFitHeight(16); 
      imageView.setFitWidth(16); 
      imageView.setImage(i); 
      return imageView; 
     }