DOC-05-03 使用CSS调整布局面板样式

这个主题描述如何使用CSS来调整JavaFX SDK中可用的布局面板的样式。

布局面板使用一些属性来控制面板显示的元素,例如内边距(Padding)、间距(Spacing)和对齐(Alignment)等。CSS允许你可以定义一系列属性,并将它们设置给多个布局面板,以此来给你的JavaFX应用程序提供一个标准的外观。你也可以使用CSS来自定义单个布局面板。

这个主题使用与第1章”使用内置的布局面板”中相同的样例来展示使用CSS为不同布局面板设置样式。图3-1显示了被创建的新外观。

图3-1 带有自定义样式的布局样例

5-3-1 styled_final

附录C中的LayoutSampleCSS.java文件包含了构建该界面的源代码。LayoutSampleCSS.zip文件包含了样例应用程序的NetBeans IDE工程。

创建样式定义

与按钮或者复选框控件不同,它们有各自对应的样式类.button和.check-box,而布局面板没有预定义的样式类。如果要调整布局面板的样式,你需要创建一个样式表并定义你需要的样式类。然后在你的应用程序的代码中,将合适的样式类指定给你创建的布局面板。

例如,如果你希望所有的HBox面板拥有同样的背景色、内边距和间距属性,可以创建一个名为.hbox的样式类,如例3-1所示。

例3-1 HBox面板的样例样式

通过将样式类指定给面板来为每个你创建的HBox使用这个样式。例3-2展示了对应的样式被指定给了两个面板。

例2-3 给HBox面板设置样式

布局面板的样式属性

你可以使用CSS来为所有类型的布局面板设置背景(Background)、边框(Border)和内边距(Padding)属性。有些类型的布局面板还有一些其它的属性可以被设置。例如,你可以为HBox和VBox设置间距(Spacing)和对齐(Alignment)属性,为TilePane设置方向(Orientation)、预设行数(PrefRows)、预设列数(PrefColumns)和其它属性。图像可以用于设置一个面板的背景和边框。

查看JavaFX CSS Reference Guide以了解每种类型的布局面板的可用属性列表。Region类的属性可以用于所有的布局面板,因为这些面板都继承自Region类。

给Scene指定一个样式表

在准备好你的样式表后,你必须将样式表添加到应用程序scene中。然后所有的节点就都可以使用样式表中定义的样式了。例3-3展示了如何在LayoutSample样例中添加样式表。在这个样例中,样式表和类文件放在在同一个目录下。

例3-3 添加样式表

为Layout Sample设置样式

Layout Sample中包括JavaFX layout包中提供的内置布局面板的一些例子。通过为这个样例设置样式可以展示如何对不同的布局面板使用CSS。

样式表layoutstyles.css包含了图3-1中使用的所有样式。

为共享的属性定义一个样式

所有的布局面板有一套可以使用CSS操作的基本属性。这些属性包括背景(Background)、边框(Border)、内边距(Padding)和形状(Shape)。如果你对多个面板的这些属性采用同样的样式,你可以定义一个样式类,然后将它指定给每个面板。

在自定义的Layout Sample中,大部分布局面板使用同样的背景色。例3-4中的样式类.pane用于设置这个颜色。

例3-4样式类.pane

如果设置背景色是一个面板所需要的全部样式,则只需要将样式.pane设置给面板。如果还需要其它的样式,你可以设置多个样式类给面板。例3-5展示了样式.pane被设置给指定的Anchor Pane,样式.pane和.gird被设置给了Grid Pane。

例3-5 设置样式.pane给布局面板

为Border Pane设置样式

除了“为共享的属性定义一个样式”小节中提到的基本属性之外,Border Pane没有其他的任何属性。在Layout Sample中边框面板没有使用样式。但是,如果要为一个Border Pane设置样式,则可以先定义一个样式类,然后将其设置给对应的面板,这与给其它面板设置样式是一样的。

为HBox设置样式

除了所有布局面板都拥有的基本属性之外,HBox还有对齐(Alignment)、间距(Spacing)和填充高度(FillHeight)属性。

图3-1中的Layout Sample包含了两个HBox面板。第一个HBox面板在最上方,包含Current和Projected两个按钮。第二个HBox面板靠近底部,包含Save和Cancel两个按钮。

在自定义的Layout Sample,两个HBox面板拥有相同的背景色和间距。这些属性已经定义在例3-1所示的样式中。

第二个包含Save和Cancel按钮的HBox还有一个圆角效果,并且拥更少的内边距,如图3-2所示。

图3-2 为HBox设置样式

5-3-2 styled_hbox

为了给HBox使用已定义的样式,样式.hbox被设置给了对应的面板。为了覆盖内边距以及设置圆角,第二个HBox使用了在例3-6中所定义的样式,并且为其设置了一个ID。

例3-6 自定义HBox样式

例3-7展示了是如何给第二个HBox面板设置样式的。

例3-7 设置自定义的HBox样式给面板

为VBox设置样式

除了所有布局面板都拥有的基本属性之外,VBox还有对齐(Alignment)、间距(Spacing)和填充宽度(FillWidth)属性。

图3-1中左边区域的VBox面板使用了样式类.pane的背景设置。边框、内边距和间距属性则在例3-8中的样式类.vbox中设置。

例3-8 样式类.vbox

例3-9展示了是如何给VBox面板设置样式的。

例3-9 设置样式给VBox面板

为Stack Pane设置样式

除了所有布局面板都拥有的基本属性之外,Stack Pane还有对齐(Alignment)属性。在Layout Sample中,Stack Pane没有使用样式。然后,如果要为Stack Pane设置样式的话,则可以先定义一个样式类,然后将它设置给对应面板,这与给其它面板设置样式是一样的。

为Grid Pane设置样式

除了所有布局面板都拥有的基本属性之外,Grid Pane还有行列间距(HGap、VGap)、网格对齐方式(Alignment)和网格线可见性(GridLinesVisible)属性。

图3-1中间区域的Grid Pane带有有圆角和一个比面板自身稍小的白色背景。例3-10中的样式类.grid提供了对内边距和行列间距属性进行设置的样式。

例3-10 样式类.grid

例3-11展示了如何给GridPane设置样式。

例3-11 设置样式给Grid Pane

请注意,GridPane没有使用和样例中其它布局面板一样的背景色。但是,包含Grid Pane的Anchor Pane使用了那个统一背景色。为了不让GridPane从其父组件中继承背景色设置,你必须要为GridPane设置你所期望的背景色。

为FlowPane和TilePane设置样式

除了所有布局面板都拥有的基本属性之外,FlowPane还有对齐(Alignment)、方向(Orientation)和行列间距(HGap、VGap)属性,TilePane还有对齐(Alignment)、方向(Orientation)、行列间距(HGap、VGap)、预设行列数(PrefRows、PrefColumns)和预设高度(PrefTileHeight)和宽度(PrefTileWidth)属性。

在Layout Sample中,图3-1右边区域可以采用FlowPane或者TilePane中的任意一个。样式类中设置的属性对这两个面板都同样可用,所以在样例中我们使用同一个样式类。例3-12中的样式类.flow-tile设置了内边距和行列间距属性。

例3-12 样式类.flow-tile

Flow Pane和Tile Pane还使用了样式类.pane来设置背景色。例3-13展示了样式是如何设置给FlowPane和TilePane的。

例3-13 设置样式给FlowPane和TilePane

给AnchorPane设置样式

除了所有布局面板都拥有的基本属性之外,AnchorPane没有其它的任何属性。

图3-1中的中间区域的AnchorPane包含一个GridPane和一个HBox,这两个面板都有各自的样式设置。唯一指定给AnchorPane的样式就是例3-4中的样式类.pane中的背景色。

例3-14展示了是如何给Anchor Pane设置样式的。

例3-14 设置样式给Anchor Pane

使用背景图像

通过设置背景图像属性(backgroundImage),图像可以被设置为布局面板的背景。你可以在样式类中指定图像(Image)、大小(Size)、位置(Position)和重复(Repetition)属性。图3-3显示了Layout Sample的UI的另一个版本,其中为左边的VBox和包含了Save和Cancel两个按钮的HBox设置了背景图像。

图3-3 使用图像设置样式

5-3-3 styled_with_images

例3-15展示了添加背景图像的样式类定义。

例3-15 使用背景图像设置样式

请注意以下信息:

● 图像被放置在/graphics目录下,它和应用程序的类文件在同一个层次。

● 箭头图像比期望的大小要小,而云图像比期望的大小要大,所以这些图像使用了-fx-background-size 属性来改变大小。

● 为了避免VBox的背景中的箭头图像重复,将-fx-background-repeat 属性设置为了no repeat。

● 为了让按钮的摆放有一定的角度,新定义了一个名为#button-custom的样式类,Save和Cancel按钮的ID被设置为了button-custom。

其它资源

请查看以下文档来了解更多关于CSS和JavaFX的信息:

● JavaFX CSS参考指南(JavaFX CSS Reference Guide)

● 在JavaFX应用中使用CSS样式来管理外观(第3篇《使用JavaFX UI组件》的第四部分)

应用程序文件

源代码

LayoutSampleCSS.java

layoutstyles.css

NetBeans工程

LayoutSampleCSS.zip

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