DOC-03-11 滚动面板(Scroll Pane)

在本章中你将学会如何在应用程序中构建滚动面板。滚动面板为UI元素提供了一个可滚动的视图。此控件允许用户使用滚动条或移动视口(Viewport)来滚动界面内容。下图展示了具有默认设置并且添加了图片的滚动面板:

11-1 滚动面板

3-11-1 scroll-pane-default

创建一个滚动面板

下面的例子展示了如何在应用程序中创建滚动面板:

11–1 使用滚动面板来展示图片

setContent方法定义了滚动面板的内容节点。你只能为滚动面板的内容设置一个内容节点。如果希望创建包含多个组件的滚动面板,你可以使用布局容器或Group类。如果希望通过单击图片并移动鼠标来预览图像,你可以使用setPannable方法,并将其值设置为true。在预览时,滚动条的位置将会相应地进行改变。

设置滚动条的显示策略

对于何时展现滚动条,ScrollPane类提供了不同的策略:总是展现、永不展现或者只有需要时展现。使用setHbarPolicy和setVbarPolicy方法来分别为横向和纵向滚动条指定显示策略。因此,在例11-2中,纵向滚动条将会显示出来,而横向滚动条则不会显示。

11–2 设置横向和纵向滚动条的显示策略

根据上面样例的运行结果,你只可以纵向滚动图片,如图11-2。

11-2 禁用横向滚动条的效果

3-11-2 scroll-pane-policy

改变滚动面板内部组件的大小

在设计UI界面时,你可能会需要改变滚动面板内部组件的大小,以使其能适应滚动面板的宽和高。可以通过使用setFitToWidth或setFitToHeight方法将对应属性设置为true来在对应维度上适应大小变化。

在图11-3中展示的滚动面板包括了几个单选按钮、一个文本框、一个密码框。这些组件的大小超出了滚动面板预定义的范围,因此出现了一个纵向滚动条。然而,由于对滚动面板使用了setFitToWidht方法并设置其参数值为true,因此滚动面板的内容将会在水平方向上被压缩,并且永不会显示横向滚动条。

11-3自适应宽度的滚动面板

3-11-3 scroll-pane-fit

在默认情况下,FIT_TO_WIDHT和FIT_TO_HEIGHT属性值都是false,并且所有的内容均会保持其初始大小。如果从代码中移除了对setFitToWidth方法的调用,那么将会看到如图11-4的效果。

11-4面板内容采用自适应大小属性采用默认值

3-11-4 scroll-pane-do-not-fit

ScrollPane类允许你获取和设置面板内容宽度和高度的当前值、最小值、最大值。你可以在应用程序中尝试使用这些的功能。

滚动面板样例程序

例11-3使用了一个滚动面板来展示一个带有图片的VBox。ScrollPanle类的VVALUE属性用于帮助确定当前展示的图片并显示图片文件名。

11-3 使用滚动面板来展示图片

编译并运行此应用程序将会产生如图11-5所示的界面效果。

11-5 滚动的图片

3-11-5 scroll-pane-app

纵向滚动条的最大值与vbox的高度相等。例11-4的代码片段显示了当前被展示图片的文件名。

11-4 跟踪滚动条的纵向坐标值的变化

在样例代码中ImageView对象限制图片的高为100像素。因此new_val.intValue()-1除以100的值就是在imageNames数组中当前图片的索引值。

在你的程序中,你可以通过改变纵向和横向滚动条的最大和最小值来动态地更新用户界面。

相关的API文档

    · ScrollPane

    · ScrollBar

 

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_scrollpane/
百度已收录