可调整大小的BorderPane w /抽屉在JavaFX中

时间：2017-07-03 09:55:43

标签： java layout javafx

我正在尝试使用左侧的抽屉制作可调整大小的BorderPane。我做了一个过渡，转移了＃左边的AnchorPane＆＃34;到外面 - 但不幸的是，BorderPane的左侧占位符没有调整大小/移位/折叠。我希望它会做一个。

无论如何，这里有一些更好地描述正在发生的事情的照片。注意第一张图片中的空白区域。这就是问题所在。

抽屉式 enter image description here

抽屉 enter image description here

爪哇

import java.io.IOException;

import com.jfoenix.controls.JFXHamburger;
import com.jfoenix.transitions.hamburger.HamburgerBasicCloseTransition;

import javafx.animation.TranslateTransition;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class ResizeableBorderPane extends BorderPane {  

    @FXML
    private BorderPane root;

    @FXML
    private AnchorPane topAnchor;

    @FXML
    private AnchorPane leftAnchor;

    @FXML
    private AnchorPane centerAnchor;

    @FXML
    private AnchorPane rightAnchor;

    @FXML
    private AnchorPane bottomAnchor;

    @FXML
    private JFXHamburger hamburger;

    private Stage stage;

    public ResizeableBorderPane(){

        try {
            FXMLLoader loader = new FXMLLoader(getClass()
                    .getResource("/application/prototypes/custom/resizableborderpane/ResizableBorderPaneView.fxml"));
            loader.setController(this);
            loader.setRoot(this);
            loader.load();

        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        root.setPrefWidth(1000);
        root.setPrefHeight(800);

        setStage();
    }

    @FXML
    public void initialize() {

        leftAnchor.setPrefWidth(200);
        topAnchor.setPrefHeight(50);
        bottomAnchor.setPrefHeight(50);

        final TranslateTransition translateLeftAnchor =
                new TranslateTransition(Duration.millis(1000), leftAnchor);

        translateLeftAnchor.setFromX(50);
        translateLeftAnchor.setToX(-200 + 50);  
        translateLeftAnchor.play();

        HamburgerBasicCloseTransition burgerTask = new HamburgerBasicCloseTransition(hamburger);
        burgerTask.setRate(-1);

        hamburger.addEventHandler(MouseEvent.MOUSE_PRESSED,(e)->{

            if (burgerTask.getRate() == -1){
                burgerTask.setRate(burgerTask.getRate()*-1);
                burgerTask.play();

                translateLeftAnchor.setFromX(-200 + 50);
                translateLeftAnchor.setToX(0);

                translateLeftAnchor.play();

            } else {

                burgerTask.setRate(burgerTask.getRate()*-1);
                burgerTask.play();

                translateLeftAnchor.setFromX(0);
                translateLeftAnchor.setToX(-200 + 50);

                translateLeftAnchor.play();
            }           
        });

        translateLeftAnchor.currentTimeProperty().addListener( e -> {

            System.out.println("Layout X: " + leftAnchor.getTranslateX());

        });
    }

    // =========== GETTERS AND SETTERS ===========

    public Stage getStage(){
        return (Stage) root.getScene().getWindow();
    }

    public void setStage(){
        try{
            this.stage = (Stage) root.getScene().getWindow();
        } catch (NullPointerException n){
            System.out.println("The stage is null!");
        }
    }

    public BorderPane getRoot() {
        return root;
    }

    public void setRoot(BorderPane root) {
        this.root = root;
    }

    public AnchorPane getTopAnchor() {
        return topAnchor;
    }

    public void setTopAnchor(AnchorPane topAnchor) {
        this.topAnchor = topAnchor;
    }

    public AnchorPane getLeftAnchor() {
        return leftAnchor;
    }

    public void setLeftAnchor(AnchorPane leftAnchor) {
        this.leftAnchor = leftAnchor;
    }

    public AnchorPane getCenterAnchor() {
        return centerAnchor;
    }

    public void setCenterAnchor(AnchorPane centerAnchor) {
        this.centerAnchor = centerAnchor;
    }

    public AnchorPane getRightAnchor() {
        return rightAnchor;
    }

    public void setRightAnchor(AnchorPane rightAnchor) {
        this.rightAnchor = rightAnchor;
    }

    public AnchorPane getBottomAnchor() {
        return bottomAnchor;
    }

    public void setBottomAnchor(AnchorPane bottomAnchor) {
        this.bottomAnchor = bottomAnchor;
    }
}

FXML 

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXHamburger?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>

<fx:root fx:id="root" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" type="BorderPane" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <AnchorPane fx:id="topAnchor" maxWidth="1.7976931348623157E308" style="-fx-background-color: #999999;" BorderPane.alignment="CENTER">
         <children>
            <JFXHamburger fx:id="hamburger" alignment="CENTER_LEFT" AnchorPane.bottomAnchor="5.0" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="5.0" />
         </children></AnchorPane>
   </top>
   <left>
      <AnchorPane fx:id="leftAnchor" maxHeight="1.7976931348623157E308" style="-fx-background-color: #FF0000;" BorderPane.alignment="CENTER" />
   </left>
   <center>
      <AnchorPane fx:id="centerAnchor" focusTraversable="true" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="200.0" minWidth="200.0" style="-fx-background-color: #454545;" BorderPane.alignment="CENTER_LEFT" />
   </center>
   <right>
      <AnchorPane fx:id="rightAnchor" maxHeight="1.7976931348623157E308" style="-fx-background-color: #00FF00;" BorderPane.alignment="CENTER" />
   </right>
   <bottom>
      <AnchorPane fx:id="bottomAnchor" maxWidth="1.7976931348623157E308" style="-fx-background-color: #0000FF;" BorderPane.alignment="CENTER" />
   </bottom>
</fx:root>

有关如何修复空白区的任何建议吗？我有点卡住了。

更新

我通过在time属性侦听器中添加这一行几乎可以工作：

translateLeftAnchor.currentTimeProperty().addListener( e -> {

            setMargin(leftAnchor, new Insets(0, leftAnchor.translateXProperty().doubleValue(), 0, 0));
        });

然而，当抽屉进入时 - 它的移动速度比中心的速度快一些。扩展;因此，人们可以看到两者之间的白线。

enter image description here

更新2

使用了translate属性监听器，它可以正常工作

leftAnchor.translateXProperty().addListener( e -> {

    setMargin(leftAnchor, new Insets(0, leftAnchor.translateXProperty().doubleValue(), 0, 0));
});

1 个答案:

答案 0 :(得分：2)

上面的解决方案对我来说似乎很有用。根据需要增强它。这是我的工作范例。

<强>爪哇 

package application.prototypes.custom.resizableborderpane;

import java.io.IOException;

import com.jfoenix.controls.JFXHamburger;
import com.jfoenix.transitions.hamburger.HamburgerBasicCloseTransition;

import javafx.animation.TranslateTransition;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Insets;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class ResizeableBorderPane extends BorderPane {  

    @FXML
    private BorderPane root;

    @FXML
    private AnchorPane topAnchor;

    @FXML
    private AnchorPane leftAnchor;

    @FXML
    private AnchorPane centerAnchor;

    @FXML
    private AnchorPane rightAnchor;

    @FXML
    private AnchorPane bottomAnchor;

    @FXML
    private JFXHamburger hamburger;

    private Stage stage;

    public ResizeableBorderPane(){

        try {
            FXMLLoader loader = new FXMLLoader(getClass()
                    .getResource("/application/prototypes/custom/resizableborderpane/ResizableBorderPaneView.fxml"));
            loader.setController(this);
            loader.setRoot(this);
            loader.load();

        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        root.setPrefWidth(1000);
        root.setPrefHeight(600);
    }

    @FXML
    public void initialize() {

        leftAnchor.setPrefWidth(200);
        leftAnchor.setTranslateX(-150);
        setMargin(leftAnchor, new Insets(0, leftAnchor.translateXProperty().doubleValue(), 0, 0));

        topAnchor.setPrefHeight(50);
        bottomAnchor.setPrefHeight(50);
        rightAnchor.setPrefWidth(50);

        final TranslateTransition translateLeftAnchor =
                new TranslateTransition(Duration.millis(500), leftAnchor);

        HamburgerBasicCloseTransition burgerTask = new HamburgerBasicCloseTransition(hamburger);
        burgerTask.setRate(-1);

        hamburger.addEventHandler(MouseEvent.MOUSE_PRESSED,(e)->{

            if (burgerTask.getRate() == -1){
                burgerTask.setRate(burgerTask.getRate()*-1);
                burgerTask.play();

                translateLeftAnchor.setFromX(-200 + 50);
                translateLeftAnchor.setToX(0);

                translateLeftAnchor.play();

            } else {

                burgerTask.setRate(burgerTask.getRate()*-1);
                burgerTask.play();

                translateLeftAnchor.setFromX(0);
                translateLeftAnchor.setToX(-200 + 50);

                translateLeftAnchor.play();
            }           
        });

        leftAnchor.translateXProperty().addListener( e -> {

            setMargin(leftAnchor, new Insets(0, leftAnchor.translateXProperty().doubleValue(), 0, 0));
        });
    }

    // =========== GETTERS AND SETTERS ===========

    public Stage getStage(){
        return (Stage) root.getScene().getWindow();
    }

    public BorderPane getRoot() {
        return root;
    }

    public AnchorPane getTopAnchor() {
        return topAnchor;
    }

    public AnchorPane getLeftAnchor() {
        return leftAnchor;
    }

    public AnchorPane getCenterAnchor() {
        return centerAnchor;
    }

    public AnchorPane getRightAnchor() {
        return rightAnchor;
    }

    public AnchorPane getBottomAnchor() {
        return bottomAnchor;
    }
}

<强> FXML 

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXHamburger?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>

<fx:root fx:id="root" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" type="BorderPane" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <AnchorPane fx:id="topAnchor" maxWidth="1.7976931348623157E308" style="-fx-background-color: #999999;" BorderPane.alignment="CENTER">
         <children>
            <JFXHamburger fx:id="hamburger" alignment="CENTER_LEFT" AnchorPane.bottomAnchor="5.0" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="5.0" />
         </children></AnchorPane>
   </top>
   <left>
      <AnchorPane fx:id="leftAnchor" maxHeight="1.7976931348623157E308" style="-fx-background-color: #FF0000;" BorderPane.alignment="CENTER_LEFT" />
   </left>
   <center>
      <AnchorPane fx:id="centerAnchor" focusTraversable="true" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="200.0" minWidth="200.0" style="-fx-background-color: #454545;" BorderPane.alignment="CENTER_LEFT" />
   </center>
   <right>
      <AnchorPane fx:id="rightAnchor" maxHeight="1.7976931348623157E308" style="-fx-background-color: #00FF00;" BorderPane.alignment="CENTER" />
   </right>
   <bottom>
      <AnchorPane fx:id="bottomAnchor" maxWidth="1.7976931348623157E308" style="-fx-background-color: #0000FF;" BorderPane.alignment="CENTER" />
   </bottom>
</fx:root>
相关问题
最新问题