javafx
Diseños

StackPane

StackPane pone a sus hijos en una pila de atrás para adelante.

El orden z de los hijos se define por el orden de la lista de hijos (accesible mediante una llamada a getChildren ): el niño número 0 es el último y el último hijo en la parte superior de la pila.

El stackpane intenta cambiar el tamaño de cada niño para llenar su propia área de contenido. En el caso de que no se pueda cambiar el tamaño de un niño para llenar el área de StackPane (ya sea porque no fue de tamaño variable o su tamaño máximo no lo StackPane ), entonces se alineará dentro del área usando la propiedad de alignmentProperty del stackpane, que por defecto es Pos.CENTER.

Ejemplo

// Create a StackPane
StackPane pane = new StackPane();

// Create three squares
Rectangle rectBottom = new Rectangle(250, 250);
rectBottom.setFill(Color.AQUA);
Rectangle rectMiddle = new Rectangle(200, 200);
rectMiddle.setFill(Color.CADETBLUE);
Rectangle rectUpper = new Rectangle(150, 150);
rectUpper.setFill(Color.CORAL);

// Place them on top of each other
pane.getChildren().addAll(rectBottom, rectMiddle, rectUpper);

HBox y VBox

Los diseños de HBox y VBox son muy similares, ambos presentan a sus hijos en una sola línea.

Características comunes

Si un HBox o un VBox tienen un borde y / o un conjunto de relleno, entonces el contenido se colocará dentro de esas inserciones.

Distribuyen a cada niño manejado independientemente del valor de propiedad visible del niño; Los niños no administrados son ignorados.

La alineación del contenido está controlada por la propiedad de alineación, que por defecto es Pos.TOP_LEFT .

HBox

HBox distribuye a sus hijos en una sola fila horizontal de izquierda a derecha.

HBox cambiará el tamaño de los niños (si se puede cambiar el tamaño) a su ancho preferido y usa su propiedad fillHeight para determinar si cambiar el tamaño de sus alturas para llenar su propia altura o mantener sus alturas a sus preferidas (fillHeight por defecto es verdadero).

Creando un HBox

// HBox example
HBox row = new HBox();
Label first = new Label("First");
Label second = new Label("Second");
row.getChildren().addAll(first, second);

VBox

VBox expone a sus hijos en una sola columna vertical de arriba a abajo.

VBox cambiará el tamaño de los niños (si se puede cambiar el tamaño) a sus alturas preferidas y utiliza su propiedad fillWidth para determinar si cambiar el tamaño de sus anchos para completar su propio ancho o mantener sus anchos a su preferido (el valor predeterminado de fillWidth es verdadero).

Creando un VBox

// VBox example
VBox column = new VBox();
Label upper = new Label("Upper");
Label lower = new Label("Lower");
column.getChildren().addAll(upper, lower);

BorderPane

El BorderPane está separado en cinco áreas diferentes.

Las áreas de borde ( Top , Right , Bottom , Left ) tienen un tamaño preferido según su contenido. Por defecto, solo tomarán lo que necesiten, mientras que el área del Center tomará el espacio restante. Cuando las áreas fronterizas están vacías, no ocupan espacio.

Cada área puede contener solo un elemento. Se puede agregar utilizando los métodos setTop(Node) , setRight(Node) , setBottom(Node) , setLeft(Node) , setCenter(Node) . Puede utilizar otros diseños para colocar más de un elemento en un área única.

//BorderPane example
BorderPane pane = new BorderPane();

Label top = new Label("Top");

Label right = new Label("Right");

HBox bottom = new HBox();
bottom.getChildren().addAll(new Label("First"), new Label("Second"));

VBox left = new VBox();
left.getChildren().addAll(new Label("Upper"), new Label("Lower"));

StackPane center = new StackPane();
center.getChildren().addAll(new Label("Lorem"), new Label("ipsum"));

pane.setTop(top);        //The text "Top"
pane.setRight(right);    //The text "Right"
pane.setBottom(bottom);  //Row of two texts
pane.setLeft(left);      //Column of two texts
pane.setCenter(center);  //Two texts on each other

FlowPane

FlowPane establece los nodos en filas o columnas según el espacio disponible horizontal o vertical disponible. Envuelve los nodos a la siguiente línea cuando el espacio horizontal es menor que el total de los anchos de todos los nodos; envuelve los nodos a la siguiente columna cuando el espacio vertical es menor que el total de las alturas de todos los nodos. Este ejemplo ilustra el diseño horizontal predeterminado:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception{
        FlowPane root = new FlowPane();
        for (int i=1; i<=15; i++) {
            Button b1=new Button("Button "+String.valueOf(i));
            root.getChildren().add(b1); //for adding button to root
        }
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("FlowPane Layout");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

FlowPane predeterminado de FlowPane :

FlowPane root = new FlowPane();

FlowPane adicionales FlowPane :

FlowPane() //Creates a horizontal FlowPane layout with hgap/vgap = 0 by default.
FlowPane(double hgap, double gap) //Creates a horizontal FlowPane layout with the specified hgap/vgap.
FlowPane(double hgap, double vgap, Node... children) //Creates a horizontal FlowPane layout with the specified hgap/vgap.
FlowPane(Node... children) //Creates a horizontal FlowPane layout with hgap/vgap = 0.
FlowPane(Orientation orientation) //Creates a FlowPane layout with the specified orientation and hgap/vgap = 0.
FlowPane(Orientation orientation, double hgap, double gap) //Creates a FlowPane layout with the specified orientation and hgap/vgap.
FlowPane(Orientation orientation, double hgap, double vgap, Node... children) //Creates a FlowPane layout with the specified orientation and hgap/vgap.
FlowPane(Orientation orientation, Node... children) //Creates a FlowPane layout with the specified orientation and hgap/vgap = 0.

La adición de nodos al diseño utiliza los métodos add() o addAll() del Pane principal:

Button btn = new Button("Demo Button");    
root.getChildren().add(btn); 
root.getChildren().addAll(…); 

Por defecto, un FlowPane despliega nodos secundarios de izquierda a derecha. Para cambiar la alineación del flujo, llame al método setAlignment() pasando un valor enumerado de tipo Pos .

Algunas alineaciones de flujo de uso común:

root.setAlignment(Pos.TOP_RIGHT);     //for top right
root.setAlignment(Pos.TOP_CENTER);    //for top Center
root.setAlignment(Pos.CENTER);        //for Center
root.setAlignment(Pos.BOTTOM_RIGHT);  //for bottom right

GridPane

GridPane distribuye a sus hijos dentro de una cuadrícula flexible de filas y columnas.

Hijos del GridPane

Un niño puede colocarse en cualquier lugar dentro de GridPane y puede abarcar varias filas / columnas (el intervalo predeterminado es 1) y su ubicación dentro de la cuadrícula se define por sus restricciones de diseño:

No es necesario especificar el número total de filas / columnas por adelantado ya que la cuadrícula expandirá / contraerá automáticamente la cuadrícula para acomodar el contenido.

Añadiendo niños al GridPane

Para agregar nuevos Node a un GridPane las restricciones de diseño en los hijos deben establecerse utilizando el método estático de la clase GridPane , luego esos niños pueden agregarse a una instancia de GridPane .

GridPane gridPane = new GridPane();

// Set the constraints: first row and first column
Label label = new Label("Example");
GridPane.setRowIndex(label, 0);
GridPane.setColumnIndex(label, 0);
// Add the child to the grid
gridpane.getChildren().add(label);

GridPane proporciona métodos convenientes para combinar estos pasos:

gridPane.add(new Button("Press me!"), 1, 0); // column=1 row=0

La clase GridPane también proporciona métodos de establecimiento estático para establecer la fila y la columna de elementos secundarios:

Label labelLong = new Label("Its a long text that should span several rows");
GridPane.setColumnSpan(labelLong, 2);
gridPane.add(labelLong, 0, 1);  // column=0 row=1

Tamaño de columnas y filas

De forma predeterminada, las filas y columnas se ajustarán al tamaño de su contenido. En caso de que sea necesario el control explícito de los tamaños de fila y columna , las instancias de RowConstraints y ColumnConstraints se pueden agregar a GridPane . Agregar estas dos restricciones cambiará el tamaño del ejemplo anterior para tener la primera columna de 100 píxeles, la segunda columna de 200 píxeles de longitud.

gridPane.getColumnConstraints().add(new ColumnConstraints(100));
gridPane.getColumnConstraints().add(new ColumnConstraints(200));

Por defecto, GridPane cambiará el tamaño de las filas / columnas a sus tamaños preferidos, incluso si el gridpane se redimensiona más que su tamaño preferido. Para admitir los tamaños dinámicos de columna / fila , ambas clases de contención proporcionan tres propiedades: tamaño mínimo, tamaño máximo y tamaño preferido.

Además, ColumnConstraints proporciona setHGrow y RowConstraints proporciona los métodos setVGrow para afectar la prioridad del crecimiento y la reducción . Las tres prioridades predefinidas son:

• Prioridad . SIEMPRE: siempre trate de crecer (o reducir), compartiendo el aumento (o disminución) en el espacio con otras áreas de diseño que tengan un aumento (o reducción) de SIEMPRE
• Prioridad . ALGUNAS VECES : Si no hay otras áreas de diseño con crecimiento (o reducción) establecido SIEMPRE o si esas áreas de diseño no absorbieron todo el espacio aumentado (o disminuido), compartirán el aumento (o disminución) en el espacio con otra área de diseño de ALGUNAS VECES.
• Prioridad . NUNCA: el área de diseño nunca crecerá (o disminuirá) cuando haya un aumento (o disminución) en el espacio disponible en la región.

ColumnConstraints column1 = new ColumnConstraints(100, 100, 300);
column1.setHgrow(Priority.ALWAYS);

La columna definida anteriormente tiene un tamaño mínimo de 100 píxeles y siempre intentará crecer hasta que alcance su máximo ancho de 300 píxeles.

También es posible definir el tamaño del porcentaje para filas y columnas. El siguiente ejemplo define un GridPane donde la primera columna llena el 40% del ancho del gridpane, la segunda llena el 60%.

GridPane gridpane = new GridPane();
ColumnConstraints column1 = new ColumnConstraints();
column1.setPercentWidth(40);
ColumnConstraints column2 = new ColumnConstraints();
column2.setPercentWidth(60);
gridpane.getColumnConstraints().addAll(column1, column2);

Alineación de elementos dentro de las celdas de la cuadrícula.

La alineación de los Node se puede definir utilizando el setHalignment (horizontal) de ColumnConstraints clase ColumnConstraints y el setValignment (vertical) de la clase RowConstraints .

ColumnConstraints column1 = new ColumnConstraints();
column1.setHalignment(HPos.RIGHT);

RowConstraints row1 = new RowConstraints();
row1.setValignment(VPos.CENTER);

TilePane

El diseño del panel de mosaico es similar al diseño FlowPane. TilePane coloca todos los nodos en una cuadrícula en la que cada celda o mosaico tiene el mismo tamaño. Organiza los nodos en filas y columnas ordenadas, ya sea horizontal o verticalmente.

    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.layout.TilePane;
    import javafx.stage.Stage;
    
    public class Main extends Application {
    
        @Override
        public void start(Stage primaryStage) {
            primaryStage.setTitle("TilePane Demo");
            double width = 400;
            double height = 300;
            TilePane root = new TilePane();
            root.setStyle("-fx-background-color:blue");
            // to set horizontal and vertical gap
            root.setHgap(20);
            root.setVgap(50);
            Button bl = new Button("Buttons");
            root.getChildren().add(bl);
            Button btn = new Button("Button");
            root.getChildren().add(btn);
            Button btn1 = new Button("Button 1");
            root.getChildren().add(btn1);
            Button btn2 = new Button("Button 2");
            root.getChildren().add(btn2);
            Button btn3 = new Button("Button 3");
            root.getChildren().add(btn3);
            Button btn4 = new Button("Button 4");
            root.getChildren().add(btn4);
    
            Scene scene = new Scene(root, width, height);
            primaryStage.setScene(scene);
            primaryStage.show();
        }
    
    
        public static void main(String[] args) {
            launch(args);
        }
    }

salida

Para crear Tilepane

TilePane root = new TilePane();

setHgap () Y el método setVgap () se usa para hacer espacio entre la columna y la columna. También podemos establecer las columnas para el diseño utilizando

int columnCount = 2;
root.setPrefColumns(columnCount);

AnchorPane

AnchorPane a es un diseño que permite colocar el contenido a una distancia específica de sus lados.

Hay 4 métodos para configurar y 4 métodos para obtener las distancias en AnchorPane . El primer parámetro de estos métodos es el Node secundario. El segundo parámetro de los configuradores es el valor Double a utilizar. Este valor puede ser null indica que no hay restricciones para el lado dado.

En el siguiente ejemplo se colocan nodos a distancias especificadas de los lados.

La región center también se redimensiona para mantener las distancias especificadas de los lados. Observe el comportamiento cuando la ventana se redimensiona.

public static void setBackgroundColor(Region region, Color color) {
    // change to 50% opacity
    color = color.deriveColor(0, 1, 1, 0.5);
    region.setBackground(new Background(new BackgroundFill(color, CornerRadii.EMPTY, Insets.EMPTY)));
}

@Override
public void start(Stage primaryStage) {
    Region right = new Region();
    Region top = new Region();
    Region left = new Region();
    Region bottom = new Region();
    Region center = new Region();
    
    right.setPrefSize(50, 150);
    top.setPrefSize(150, 50);
    left.setPrefSize(50, 150);
    bottom.setPrefSize(150, 50);
    
    // fill with different half-transparent colors
    setBackgroundColor(right, Color.RED);
    setBackgroundColor(left, Color.LIME);
    setBackgroundColor(top, Color.BLUE);
    setBackgroundColor(bottom, Color.YELLOW);
    setBackgroundColor(center, Color.BLACK);
    
    // set distances to sides
    AnchorPane.setBottomAnchor(bottom, 50d);
    AnchorPane.setTopAnchor(top, 50d);
    AnchorPane.setLeftAnchor(left, 50d);
    AnchorPane.setRightAnchor(right, 50d);
    
    AnchorPane.setBottomAnchor(center, 50d);
    AnchorPane.setTopAnchor(center, 50d);
    AnchorPane.setLeftAnchor(center, 50d);
    AnchorPane.setRightAnchor(center, 50d);
    
    // create AnchorPane with specified children
    AnchorPane anchorPane = new AnchorPane(left, top, right, bottom, center);

    Scene scene = new Scene(anchorPane, 200, 200);
    
    primaryStage.setScene(scene);
    primaryStage.show();
}