如何在给定的代码中镜像选项卡? [英] How can I mirror the tab in the given code?

问题描述

一段时间以前，我从一个陌生人那里收到了这段代码，从那以后的一段时间，我一直试图将这段代码的效果镜像成徒劳.

I received this code from a kind stranger some time ago, a while from then, I've been trying to mirror the effects of this code to no avail.

我希望标签从左侧(而不是右侧)滑入，这是当前代码的作用.

I want the tab to slide in from the left, as opposed to the right, which is what the code currently does.

import javafx.application.Application;
import javafx.animation.TranslateTransition;    
import javafx.geometry.Insets;
import javafx.geometry.Side;    
import javafx.util.Duration;    
import javafx.stage.Stage;
import javafx.scene.Scene;  
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;  
import javafx.scene.layout.Region;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;

public class PlaylistDemo
extends Application {
    private static final Duration ANIMATION_SPEED = Duration.seconds(0.5);

    private enum ExpandState { EXPANDED, HIDDEN, CHANGING }

    private ExpandState expandState = ExpandState.HIDDEN;

    @Override
    public void start(Stage stage) {
        TableView<Object> musicList = new TableView<>();
        musicList.getColumns().add(new TableColumn<Object, Object>("Name"));
        musicList.getColumns().add(new TableColumn<Object, Object>("Artist"));
        musicList.getColumns().add(new TableColumn<Object, Object>("Album"));

        Region playlist = new BorderPane(musicList);
        playlist.setMaxWidth(Region.USE_PREF_SIZE);
        playlist.setStyle("-fx-background-color: white;");

        Label tabLabel = new Label("PlayList");
        Tab playlistTab = new Tab(null, playlist);
        playlistTab.setGraphic(tabLabel);
        playlistTab.setClosable(false);

        TabPane tabPane = new TabPane(playlistTab);
        tabPane.setSide(Side.LEFT);
        tabPane.setRotateGraphic(true);

        // Placeholder, to reserve space for playlist tab.
        TabPane dummyTabPane = new TabPane(new Tab("Dummy", new Label()));
        dummyTabPane.setSide(Side.LEFT);
        dummyTabPane.setVisible(false);

        Label player = new Label("Music player goes here");
        player.setPadding(new Insets(200));

        BorderPane musicPane =
            new BorderPane(player, null, dummyTabPane, null, null);
        BorderPane.setMargin(player, new Insets(0, 24, 0, 0));

        StackPane applicationPane = new StackPane(musicPane, tabPane);

        playlist.layoutBoundsProperty().addListener((o, old, b) -> {
            double tabWidth = playlist.localToScene(b).getMinX() -
                tabPane.localToScene(0, 0).getX();
            tabPane.setTranslateX(applicationPane.getWidth() - tabWidth);
        });
        applicationPane.widthProperty().addListener((o, old, width) -> {
            double tabWidth =
                playlist.localToScene(playlist.getLayoutBounds()).getMinX() -
                tabPane.localToScene(0, 0).getX();
            tabPane.setTranslateX(applicationPane.getWidth() - tabWidth);
        });

        tabLabel.setOnMouseEntered(e -> {
            if (expandState == ExpandState.HIDDEN) {
                TranslateTransition transition =
                    new TranslateTransition(ANIMATION_SPEED, tabPane);
                transition.setByX(-playlist.getWidth());

                expandState = ExpandState.CHANGING;
                transition.setOnFinished(ae -> {
                    expandState = ExpandState.EXPANDED;
                });

                transition.play();
            }
        });

        playlist.setOnMouseExited(e -> {
            if (expandState == ExpandState.EXPANDED) {
                TranslateTransition transition =
                    new TranslateTransition(ANIMATION_SPEED, tabPane);
                transition.setByX(playlist.getWidth());

                expandState = ExpandState.CHANGING;
                transition.setOnFinished(ae -> {
                    expandState = ExpandState.HIDDEN;
                });

                transition.play();
            }
        });

        stage.setScene(new Scene(applicationPane));
        stage.setTitle("Player");
        stage.show();
    }

    public static class Main {
        public static void main(String[] args) {
            Application.launch(PlaylistDemo.class, args);
        }
    }
}

如果您可以解释在对代码进行以下更改后，为什么选项卡不连贯的原因

If you could explain why the tab gets disjointed when the following changes are made to the code

        tabPane.setSide(Side.RIGHT);

        dummyTabPane.setSide(Side.RIGHT);

那太好了！

推荐答案

我将 TableView 和 TabPane 旋转了180度.然后，我将起始宽度设置为等于 TabPane 宽度.我将 Animation 设置为从给定位置扩展到 TableView 的宽度.您可能需要玩数字游戏.更新:原始代码确实解决了您的原始问题.

I rotated the TableView and the TabPane by 180 degrees. I then set the starting width equal to the TabPane width. I set the Animation to expand from the given position to the width of the TableView. You may need to play with the numbers. Update: The original code did solve your original question.

我希望标签从左侧(而不是右侧)滑入，这是当前代码的作用.

I want the tab to slide in from the left, as opposed to the right, which is what the code currently does.

有人可能有更好的方法来做到这一点.随着您的评论更新，事情变得更加棘手.我必须在某些节点上使用.setScaleY(-1).

Someone may have a better way to do this. With your comment update, things got trickier. I had to use .setScaleY(-1) on some nodes.

import javafx.application.Application;

import javafx.animation.TranslateTransition;

import javafx.geometry.Insets;
import javafx.geometry.NodeOrientation;
import javafx.geometry.Side;

import javafx.util.Duration;

import javafx.stage.Stage;
import javafx.scene.Scene;

import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;

import javafx.scene.layout.Region;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;

public class App
extends Application {
    private static final Duration ANIMATION_SPEED = Duration.seconds(0.5);

    private enum ExpandState { EXPANDED, HIDDEN, CHANGING }

    private ExpandState expandState = ExpandState.HIDDEN;

    @Override
    public void start(Stage stage) {
        TableView<Object> musicList = new TableView<>();
        musicList.getColumns().add(new TableColumn<>("Name"));
        musicList.getColumns().add(new TableColumn<>("Artist"));
        musicList.getColumns().add(new TableColumn<>("Album"));
        musicList.setScaleY(-1);
        musicList.setRotate(180);

        Region playlist = new BorderPane(musicList);
        playlist.setMaxWidth(Region.USE_PREF_SIZE);
        playlist.setStyle("-fx-background-color: white;");

        Label tabLabel = new Label("PlayList");
        tabLabel.setScaleY(-1);
        tabLabel.setRotate(360);
        Tab playlistTab = new Tab(null, playlist);
        playlistTab.setGraphic(tabLabel);
        playlistTab.setClosable(false);


        TabPane tabPane = new TabPane(playlistTab);
        tabPane.setNodeOrientation(NodeOrientation.LEFT_TO_RIGHT);
        tabPane.setSide(Side.LEFT);
        tabPane.setRotateGraphic(true);
        tabPane.setRotate(180);
        tabPane.setScaleY(-1);

        // Placeholder, to reserve space for playlist tab.
        TabPane dummyTabPane = new TabPane(new Tab("Dummy", new Label()));
        dummyTabPane.setSide(Side.LEFT);
        dummyTabPane.setVisible(false);
        Label player = new Label("Music player goes here");
        player.setPadding(new Insets(200));

        BorderPane musicPane =
            new BorderPane(dummyTabPane, null, player, null, null);
        BorderPane.setMargin(player, new Insets(0, 0, 0, 24));

        StackPane applicationPane = new StackPane(musicPane, tabPane);

        playlist.layoutBoundsProperty().addListener((o, old, b) -> {
            double tabWidth = playlist.localToScene(b).getMinX() -
                tabPane.localToScene(0, 0).getX();
            tabPane.setTranslateX(-playlist.getWidth() - 20 + tabWidth);
        });
        applicationPane.widthProperty().addListener((o, old, width) -> {
            double tabWidth =
                playlist.localToScene(playlist.getLayoutBounds()).getMinX() -
                tabPane.localToScene(0, 0).getX();
            tabPane.setTranslateX(-playlist.getWidth() + tabWidth);
        });

        tabLabel.setOnMouseEntered(e -> {
            if (expandState == ExpandState.HIDDEN) {
                TranslateTransition transition =
                    new TranslateTransition(ANIMATION_SPEED, tabPane);
                transition.setByX(playlist.getWidth());

                expandState = ExpandState.CHANGING;
                transition.setOnFinished(ae -> {
                    expandState = ExpandState.EXPANDED;
                });

                transition.play();
            }
        });

        playlist.setOnMouseExited(e -> {
            if (expandState == ExpandState.EXPANDED) {
                TranslateTransition transition =
                    new TranslateTransition(ANIMATION_SPEED, tabPane);
                transition.setByX(-playlist.getWidth());

                expandState = ExpandState.CHANGING;
                transition.setOnFinished(ae -> {
                    expandState = ExpandState.HIDDEN;
                });

                transition.play();
            }
        });

        stage.setScene(new Scene(applicationPane));
        stage.setTitle("Player");
        stage.show();
    }

    public static class Main {
        public static void main(String[] args) {
            Application.launch(App.class, args);
        }
    }
}

这篇关于如何在给定的代码中镜像选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！