openplanning

Hướng dẫn và ví dụ JavaFX TilePane Layout

Xem thêm các chuyên mục:

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- TilePane Layout

TilePane là một bộ chứa (Container), TilePane rất giống với FlowPane, nó sắp xếp các thành phần con liên tiếp nhau trên một dòng, và tự động đẩy phần tử con xuống dòng tiếp theo nếu dòng hiện tại không còn chỗ trống. Tuy nhiên nó khác với FlowPane là các thành phần con nằm trên các ô có kích thước giống nhau.
Các thành phần con nằm trên các ô lưới có kích thước giống nhau:

2- Ví dụ TilePane

TilePaneDemo.java

package org.o7planning.javafx.tilepane;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;

public class TilePaneDemo extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        TilePane root = new TilePane();
        
        root.setPadding(new Insets(10,10,10,10));        
        root.setHgap(20);
        root.setVgap(30);
        
        Button button = new Button("Java");
        root.getChildren().add(button);
        
        // Short Button
        Button button1 = new Button("C/C++");
        button1.setPrefSize(70, 50);
        root.getChildren().add(button1);
        
        // Short Button
        Button button2 = new Button("C#");
        
        root.getChildren().add(button2);
        
        // Button
        Button longButton3 = new Button("Objective C");
        root.getChildren().add(longButton3);
        
        // Button
        Button button4 = new Button("Swift");
        root.getChildren().add(button4);

        Scene scene = new Scene(root, 500, 300);
        primaryStage.setTitle("TilePanel Layout Demo (o7planning.org)");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}
Chạy ví dụ:

3- Thiết kế TilePane trên Scene Builder

Sử dụng JavaFX Scane Builder bạn dễ dàng thiết kế giao diện. Ví dụ dưới đây minh họa thiết kế TilePane với Scane Builder.
  • File/New/Other..
Mở với Scene Builder:
Thêm các Node vào TilePane.
Sét đặt Vgap, Hgap padding.
Căn lề dòng và căn lề cột (Row Valignment & Column Halignment).

Xem thêm các chuyên mục: