java - 在 JavaFX 中制作视频(媒体)播放器占用尽可能多的空间，但不能超过

Question

我之前问过这个问题:How do I make JavaFX MediaView stretch and shrink media to fill/fit parent container?关于使 JavaFX 媒体播放器扩展以填充父级。不幸的是，视频周围有一个 Pane 的黑客将 Controller 推离视频很远:

颜色只是为了了解布局的作用。视频播放器由以下 FXML 组成:

<VBox alignment="TOP_CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" spacing="10.0" style="-fx-background-color: red;" HBox.hgrow="ALWAYS">
    <Pane fx:id="mediaViewPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0"
          minWidth="0.0" VBox.vgrow="ALWAYS"  style="-fx-background-color: green;">
        <MediaView fx:id="tutorialPlayer" managed="false" />
    </Pane>
    <Slider fx:id="timeSlider" VBox.vgrow="NEVER">
        <VBox.margin>
            <Insets />
        </VBox.margin>
    </Slider>
    <HBox alignment="TOP_CENTER" spacing="10.0" style="-fx-background-color: magenta;" VBox.vgrow="SOMETIMES">
        <padding>
            <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
        </padding>
        <Button fx:id="playButton" minHeight="40.0" minWidth="40.0" mnemonicParsing="false" onAction="#play">
            <graphic>
                <FontIcon iconLiteral="fas-play" iconSize="25" />
            </graphic>
        </Button>
        <Button fx:id="pauseButton" managed="false" minHeight="40.0" minWidth="40.0" mnemonicParsing="false" onAction="#pause" visible="false">
            <graphic>
                <FontIcon iconLiteral="fas-pause" iconSize="25" />
            </graphic>
        </Button>
        <Button fx:id="restartButton" disable="true" minHeight="40.0" minWidth="40.0" mnemonicParsing="false" onAction="#restart">
            <graphic>
                <FontIcon iconLiteral="fas-retweet" iconSize="25" />
            </graphic>
        </Button>
        <Button fx:id="muteButton" minHeight="40.0" minWidth="40.0" mnemonicParsing="false" onAction="#mute">
            <graphic>
                <FontIcon iconLiteral="fas-volume-up" iconSize="25" />
            </graphic>
        </Button>
        <Button fx:id="unmuteButton" managed="false" minHeight="40.0" minWidth="40.0" mnemonicParsing="false" onAction="#unmute" visible="false">
            <graphic>
                <FontIcon iconLiteral="fas-volume-off" iconSize="25" />
            </graphic>
        </Button>
        <Slider fx:id="volumeSlider" blockIncrement="0.1" max="1.0" value="1.0" />
    </HBox>
    <HBox.margin>
        <Insets />
    </HBox.margin>
    <opaqueInsets>
        <Insets />
    </opaqueInsets>
    <padding>
        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
    </padding>
</VBox>

虽然调整大小的黑客代码是这样的:

    // Resize the video to fit and fill the allocated space. Why isn't this the default?????
    InvalidationListener resizeTutorialPlayer = observable -> {
        tutorialPlayer.setFitWidth(mediaViewPane.getWidth());
        tutorialPlayer.setFitHeight(mediaViewPane.getHeight());

        Bounds actualVideoSize = tutorialPlayer.getLayoutBounds(); // After setting a big fit width and height, the layout bounds match the video size. Not sure why and this feels fragile.
        tutorialPlayer.setX((mediaViewPane.getWidth() - actualVideoSize.getWidth()) / 2);
        tutorialPlayer.setY((mediaViewPane.getHeight() - actualVideoSize.getHeight()) / 2);
    };
    mediaViewPane.heightProperty().addListener(resizeTutorialPlayer);
    mediaViewPane.widthProperty().addListener(resizeTutorialPlayer);

有什么想法如何在尊重宽高比功能的同时使视频尽可能大并居中，但将视频 Controller 保持在视频旁边？

Answer 1

您可以通过将控件和媒体 View 包装在另一个 Pane 中(VBox？)，然后在设置媒体 View 的fitHeight时减去控件的高度，从而使此工作与您当前的策略一起工作。属性(property)。然后只需配置该 Pane ，使其居中所有内容。

但说实话，我尽量避免使用绑定(bind)和监听器来管理布局。有时这是不可避免的，但一旦达到某个关键点，最好通过子类化 Pane 来定义自定义布局。 。根据我的判断，我上面概述的策略超出了该临界点(当然，您的里程可能会有所不同)。

所以我会专门定义一个布局 Pane 来管理它。还不错；只需覆盖各种 computeXXWidth/Height()方法和 layoutChildren()方法:

package mediaviewlayout;
import javafx.beans.NamedArg;
import javafx.geometry.Bounds;
import javafx.scene.Node;
import javafx.scene.layout.Pane;
import javafx.scene.media.MediaView;

public class MediaViewLayout extends Pane {

    private final MediaView mediaView ;
    private final Node content ;

    private static final double SPACING = 5 ; // can make this configurable if needed...

    public MediaViewLayout(
            @NamedArg("mediaView") MediaView mediaView,
            @NamedArg("content") Node content) {

        this.mediaView = mediaView ;
        this.content = content ;

        this.getChildren().addAll(mediaView, content);
    }

    @Override
    public double computeMinWidth(double height) {
        return Math.max(mediaView.minWidth(height), content.minWidth(height));
    }

    @Override
    public double computePrefWidth(double height) {
        return Math.max(mediaView.prefWidth(height), content.prefWidth(height));
    }

    @Override
    public double computeMaxWidth(double height) {
        return Math.min(mediaView.maxWidth(height), content.maxWidth(height));
    }

    @Override
    public double computeMinHeight(double width) {
        return mediaView.minHeight(width) + content.minHeight(width) + SPACING ;
    }

    @Override
    public double computePrefHeight(double width) {
        return mediaView.prefHeight(width) + content.prefHeight(width) + SPACING ;
    }

    @Override
    public double computeMaxHeight(double width) {
        return mediaView.maxHeight(width) + content.minHeight(width) + SPACING ;
    }

    @Override
    protected void layoutChildren() {
        double width = getWidth();
        double height = getHeight();
        double contentHeight = content.prefHeight(-1);
        double availableHeight = height - SPACING - contentHeight ;
        mediaView.setFitWidth(width);
        mediaView.setFitHeight(availableHeight);
        Bounds actualMediaBounds = mediaView.getBoundsInLocal();
        double totalUsedHeight = actualMediaBounds.getHeight() + SPACING + contentHeight ;

        double mediaX = (width - actualMediaBounds.getWidth()) / 2 ;
        double mediaY = (height - totalUsedHeight) / 2;
        mediaView.relocate(mediaX, mediaY);

        content.resizeRelocate(0, mediaY+actualMediaBounds.getHeight()+SPACING, width, contentHeight);

    }
}

这总是放置 content位于媒体 View 下方。您可以引入其他属性，例如 ObjectProperty<Side>如果您想让它更具可配置性和可重复使用性。

然后您可以在 Java 中对此进行测试:

package mediaviewlayout;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Slider;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.stage.Stage;

public class MediaViewTest extends Application {

    private static final String MEDIA_URL = "http://download.oracle.com/otndocs/products/javafx/oow2010-2.flv";

    @Override
    public void start(Stage primaryStage) throws Exception {
        MediaView mediaView = new MediaView();
        mediaView.setPreserveRatio(true);

        MediaPlayer mediaPlayer = new MediaPlayer(new Media(MEDIA_URL));
        mediaPlayer.setAutoPlay(true);
        mediaView.setMediaPlayer(mediaPlayer);

        VBox controls = new VBox(5);
        controls.setAlignment(Pos.CENTER);
        Slider slider = new Slider();

        controls.getChildren().add(slider);

        Button play = new Button("Play");


        HBox buttons = new HBox(5, play, new Button("Restart"), new Button("Volume"), new Slider());
        buttons.setAlignment(Pos.TOP_CENTER);
        controls.getChildren().add(buttons);

        MediaViewLayout layout = new MediaViewLayout(mediaView, controls);

        Scene scene = new Scene(layout, 600, 600);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

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

或在 FXML 中:

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

<?import mediaviewlayout.MediaViewLayout?>

<?import javafx.scene.media.Media?>
<?import javafx.scene.media.MediaPlayer?>
<?import javafx.scene.media.MediaView?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Slider?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>

<MediaViewLayout xmlns:fx="http://javafx.com/fxml/1" style="-fx-background-color: green;">
    <mediaView>
       <MediaView>
           <mediaPlayer>
               <MediaPlayer autoPlay="true">
                   <media>
                       <Media source="http://download.oracle.com/otndocs/products/javafx/oow2010-2.flv"/>
                   </media>
               </MediaPlayer>
           </mediaPlayer>
       </MediaView>
    </mediaView>
    <content>
       <VBox spacing="5" style="-fx-background-color: red;">
           <Slider/>
           <HBox spacing="5" alignment="TOP_CENTER" style="-fx-background-color: magenta;">
               <Button text="Play"/>
               <Button text="Restart"/>
               <Button text="Volume"/>
               <Slider/>
           </HBox>
       </VBox>
    </content>
</MediaViewLayout>

与

package mediaviewlayout;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class MediaViewTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        MediaViewLayout layout = FXMLLoader.load(getClass().getResource("MediaViewLayoutTest.fxml"));

        Scene scene = new Scene(layout, 600, 600);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

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

FXML 版本的屏幕截图: