Java，Java FX的流畅设计风格进度栏


Fluent Design Style Progress Bar for Java, Java FX

按照承诺，JMetro 4.6版中刚刚发布的Java JavaFX主题为进度栏带来了新样式。

进度栏有两种可能的状态：确定和不确定，新的JMetro版本针对这两种具有不同的样式。 在本文中，我将详细介绍我在JMetro中遵守的一些API设计原则。

JMetro API设计原则

关于JMetro的API，我有一些原则。 其中之一是它应要求最少的设置并具有最少的必需API。 这意味着，例如，仅需很少的方法调用，就可以将JMetro应用为主题。 现在，只需要这两行代码(可以很容易地折叠为一行)：

1
2
JMetro jMetro = newJMetro(Style.LIGHT);
jMetro.applyTheme(root);

这也意味着我要尝试不引入新控件，除非应该绝对引入它们。 例如，使用新的"文本字段"和"密码字段"样式，我可以引入新的控件，因为这两个控件都添加了新功能，例如"清除"和"显示密码"按钮。 相反，我选择通过引入可以在原始控件中使用的新外观类来添加这些新功能。

这种方法有两个优点：

  • 开发人员可以轻松更改主题-从JMetro更改为其他主题，反之亦然。 由于JMetro仅在严格必要时才引入新控件，因此与JMetro没有紧密的联系。 例如，您可能决定在移动设备或其他操作系统上使用其他主题。 使用JMetro非常简单。

  • 有一个浅黄色的学习曲线。 开始使用JMetro应该真的很容易。 至少，您需要知道的是配置和应用JMetro的两行代码。 大多数控件已经在JavaFX SDK中。 在后台将新外观应用于这些控件。

    • 您还可以通过CSS属性配置大多数控件的新外观，从而使您可以继续使用与以前相同的Java代码(不使用JMetro时)。 将来，我可能会添加一个新的API，以通过代码(例如Java代码)配置这些功能，但我仍然计划保留所需的最少API。

    旧的JMetro进度栏

    像往常一样，我首先要展示进度条在以前版本中的外观：

    Progressbar 旧 JMetro轻主题

    Progressbar 旧 JMetro黑暗主题

    这是用于确定状态的简单平面设计样式。 在旧版本中，不确定状态没有样式。

    <但是>
    新的JMetro进度栏
    <铅>

    在继续展示新进度条的外观之前，我想解释为什么存在两种可能的状态。 当您可以确定地确定特定任务已完成多少进度时，您将使用确定状态。 在这种状态下，您将显示已完成了多少进度。 进度量由进度栏的"填充"程度决定。 当任务即将完成时，进度栏将被"填满"或几乎"填满"。

    相反，当您无法确定已完成的进度或由于某种原因而不想计算进度时，可以将状态设置为不 这不会显示已取得多少进展。 但是，这将(至少)表明正在进行一些计算。

    受Fluent Design的启发，您可以在下面看到进度栏的新样式。 现在，两个新的不同外观代表了这两个状态。 自从我在Twitter上的最后一篇文章以来，我对不确定的动画进行了一些调整。

    Progress bar JMetro theme, Java, JavaFX theme, inspired by Fluent Design (previously was Metro)

    进度栏JMetro主题，Java，JavaFX主题，灵感来自Fluent Design(以前是Metro)。" data-comments-opened =" 1" data-attachment-id =" 2262">

    Progressbar 新 JMetro主题

    动画上方的外观可能不如实时版本中的平滑。 我没有时间发布视频而不是GIF。 这可能会更好地证明实际结果。

    深色和浅色版本之间没有区别。

    进度栏详细信息

    我试图使新进度条的CSS样式与原始JavaFX Modena CSS尽可能相似。 您仍然可以找到" track"和" bar" CSS样式类，它们可以像在Modena样式表中一样进行样式设置。 对于不确定状态，这是不可能的，因为外观完全不同。

    对于不确定状态，每个"点"都是具有样式类：dot和dot_<number>的Region。 是点的位置，从1开始。您可以根据需要设置每个"点"的样式，因为每个点都是一个Region。

    例如，如果您希望点逐渐变暗，则可以添加以下CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .progress-bar:indeterminate .dot_1 {
        -fx-background-color: ACCENT_COLOR;
    }

    .progress-bar:indeterminate .dot_2 {
        -fx-background-color: derive(ACCENT_COLOR, -15%);
    }

    .progress-bar:indeterminate .dot_3 {
        -fx-background-color: derive(ACCENT_COLOR, -30%);
    }

    .progress-bar:indeterminate .dot_4 {
        -fx-background-color: derive(ACCENT_COLOR, -45%);
    }

    .progress-bar:indeterminate .dot_5 {
        -fx-background-color: derive(ACCENT_COLOR, -60%);
    }

    ACCENT_COLOR是JMetro中定义的JavaFX CSS变量，用于指定JMetro主题的强调色。 derive(..)是JavaFX CSS帮助器函数，根据传入的百分比是负数还是正数，它可以使给定的颜色变暗或变亮。

    此示例将给出以下结果：

    Progress bar JMetro theme, Java, JavaFX theme. Custom CSS example.

    JMetro即将达到版本5.0。 我计划添加到版本5中的所有更困难的控件都已完成。 在接下来的几个发行版中，我计划清理并重新调整一些样式，并增加指定控件的强调颜色的可能性。 可能的话，我还可以添加新的控件样式。 设计愉快！