Làm thế nào để tạo ra các tab với các biểu tượng trong JavaFX

Question

Tôi muốn tạo bảng điều khiển các tab với các biểu tượng tương tự vào bảng cấu hình Firefox với JavaFX:

Có bất kỳ ví dụ mà tôi có thể sử dụng để xem làm thế nào để thực hiện điều này?

Answer 1

Tab, giống như nhiều yếu tố khác trong JavaFX, có phương thức được gọi là setGraphic(Node value), trong đó bạn có thể đặt bất kỳ nút JavaFX nào. Ví dụ:

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(); 
    } 
} 

Kết quả:

Answer 2

Tôi biết nó là một chủ đề cũ, nhưng tôi không tìm thấy một câu trả lời trực tiếp bất cứ nơi nào. Vì vậy, tôi nghĩ đến việc đăng tải nó một số rằng nó sẽ giúp ích cho một số người tìm kiếm nó.

Đây là những gì tôi đã làm để có được một tab như màn hình tùy chọn firefox.

Thêm hình ảnh vào tab bằng setGraphics và thêm mã sau vào tệp css của ứng dụng. Kích thước hình ảnh của tôi là 48x48. Vì vậy, tôi đã đi cho chiều cao như 70.

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

Answer 3

Làm thế nào để thêm hình ảnh trực tiếp từ url hình ảnh:

  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; 
     }