JavaFX技巧17：带有AnchorPane的动画工作台布局

最近，我不得不为应用程序实现一个布局，其中可以根据用户是否登录来隐藏或通过滑入/滑出动画显示或显示菜单区域和状态区域。以下视频显示了实际的布局：

在过去，我可能会使用自定义控件和自定义布局代码来实现这种行为（如“皮肤中的layoutChildren（）方法”）。但是这次我的设置有所不同，因为我使用的是Adam Bien的afterburner.fx ，现在有了FXML和一个控制器类。

那该怎么办呢？我决定尝试使用锚定窗格来实现运气，并通过时间轴实例更新堆栈窗格上的约束。约束存储在堆栈窗格的可观察属性映射中。只要这些限制发生变化，就会自动请求锚定窗格的布局。如果发生这种情况而没有任何闪烁，那么我们最终将获得一个流畅的动画。顺便说一句，来自Swing，我总是希望闪烁，但是JavaFX通常不会发生闪烁。

最后，我写了下面的控制器类来管理锚窗格及其子堆栈窗格。请注意中间属性menuPaneLocation和bottomPaneLocation的小技巧。它们是必需的，因为动画时间轴可与属性一起使用。因此，它会更新这些属性，并且每当它们更改时，都会应用新的锚定窗格约束。

import static javafx.scene.layout.AnchorPane.setBottomAnchor;
import static javafx.scene.layout.AnchorPane.setLeftAnchor;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.fxml.FXML;
import javafx.scene.layout.StackPane;
import javafx.util.Duration;</code>/*** This presenter covers the top-level layout concepts of the workbench.*/
public class WorkbenchPresenter {@FXML
private StackPane topPane;@FXML
private StackPane menuPane;@FXML
private StackPane centerPane;@FXML
private StackPane bottomPane;public WorkbenchPresenter() {
}private final BooleanProperty showMenuPane = new SimpleBooleanProperty(this, "showMenuPane", true);public final boolean isShowMenuPane() {return showMenuPane.get();
}public final void setShowMenuPane(boolean showMenu) {showMenuPane.set(showMenu);
}/**
* Returns the property used to control the visibility of the menu panel.
* When the value of this property changes to false then the menu panel will
* slide out to the left).
*
* @return the property used to control the menu panel
*/
public final BooleanProperty showMenuPaneProperty() {return showMenuPane;
}private final BooleanProperty showBottomPane = new SimpleBooleanProperty(this, "showBottomPane", true);public final boolean isShowBottomPane() {return showBottomPane.get();
}public final void setShowBottomPane(boolean showBottom) {showBottomPane.set(showBottom);
}/**
* Returns the property used to control the visibility of the bottom panel.
* When the value of this property changes to false then the bottom panel
* will slide out to the left).
*
* @return the property used to control the bottom panel
*/
public final BooleanProperty showBottomPaneProperty() {return showBottomPane;
}public final void initialize() {menuPaneLocation.addListener(it -> updateMenuPaneAnchors());bottomPaneLocation.addListener(it -> updateBottomPaneAnchors());showMenuPaneProperty().addListener(it -> animateMenuPane());showBottomPaneProperty().addListener(it -> animateBottomPane());menuPane.setOnMouseClicked(evt -> setShowMenuPane(false));centerPane.setOnMouseClicked(evt -> {setShowMenuPane(true);setShowBottomPane(true);});bottomPane.setOnMouseClicked(evt -> setShowBottomPane(false));
}/** The updateMenu/BottomPaneAnchors methods get called whenever the value of* menuPaneLocation or bottomPaneLocation changes. Setting anchor pane* constraints will automatically trigger a relayout of the anchor pane* children.*/private void updateMenuPaneAnchors() {setLeftAnchor(menuPane, getMenuPaneLocation());setLeftAnchor(centerPane, getMenuPaneLocation() + menuPane.getWidth());
}private void updateBottomPaneAnchors() {setBottomAnchor(bottomPane, getBottomPaneLocation());setBottomAnchor(centerPane, getBottomPaneLocation() + bottomPane.getHeight());setBottomAnchor(menuPane,getBottomPaneLocation() + bottomPane.getHeight());
}/*
* Starts the animation for the menu pane.
*/
private void animateMenuPane() {if (isShowMenuPane()) {slideMenuPane(0);} else {slideMenuPane(-menuPane.prefWidth(-1));}
}/*
* Starts the animation for the bottom pane.
*/
private void animateBottomPane() {if (isShowBottomPane()) {slideBottomPane(0);} else {slideBottomPane(-bottomPane.prefHeight(-1));}
}/** The animations are using the JavaFX timeline concept. The timeline updates* properties. In this case we have to introduce our own properties further* below (menuPaneLocation, bottomPaneLocation) because ultimately we need to* update layout constraints, which are not properties. So this is a little* work-around.*/private void slideMenuPane(double toX) {KeyValue keyValue = new KeyValue(menuPaneLocation, toX);KeyFrame keyFrame = new KeyFrame(Duration.millis(300), keyValue);Timeline timeline = new Timeline(keyFrame);timeline.play();
}private void slideBottomPane(double toY) {KeyValue keyValue = new KeyValue(bottomPaneLocation, toY);KeyFrame keyFrame = new KeyFrame(Duration.millis(300), keyValue);Timeline timeline = new Timeline(keyFrame);timeline.play();
}private DoubleProperty menuPaneLocation = new SimpleDoubleProperty(this, "menuPaneLocation");private double getMenuPaneLocation() {return menuPaneLocation.get();
}private DoubleProperty bottomPaneLocation = new SimpleDoubleProperty(this, "bottomPaneLocation");private double getBottomPaneLocation() {return bottomPaneLocation.get();
}
}

以下是此项工作所需的FXML：

<?xml version="1.0" encoding="UTF-8"?><?import java.lang.*?>
<?import javafx.scene.layout.*?><AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.workbench.WorkbenchPresenter"><children><StackPane fx:id="bottomPane" layoutX="-4.0" layoutY="356.0" prefHeight="40.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" /><StackPane fx:id="menuPane" layoutY="28.0" prefWidth="200.0" AnchorPane.bottomAnchor="40.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="40.0" /><StackPane fx:id="topPane" prefHeight="40.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /><StackPane fx:id="centerPane" layoutX="72.0" layoutY="44.0" AnchorPane.bottomAnchor="40.0" AnchorPane.leftAnchor="200.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="40.0" /></children>
</AnchorPane>