JavaFX专业开发者与业余开发者之间就差一个一个Icon packs

JavaFX开发者之图标

在使用JavaFX开发桌面程序时,为什么有些人的程序就那么专业,有些人的一看就很业余。

程序中的图标扮演了很重要的角色!

CSDN写文章的界面就很典型:
在这里插入图片描述
一看就很专业吧!

应用程序也是一样的,IDEA神器也满屏幕都是各种小小的图标。
在这里插入图片描述
图标,可以更加直观的为用户提供交互提示,看到图标,马上就能联想到功能,相类似或者相同的图标马上就能把不能的分类方式呈现在用户面前。

使用专业的图标,是开发专业应用程序的重要一环。

那么怎么才能找到这些图标呢?作为JavaFX开发者,有现成的轮子。

Icon packs for Java applications

Icon packs for Java applications

Ikonli提供的图标包可以在Java应用程序中使用。目前支持Swing和JavaFX UI工具包。

使用起来也很简单,对于Java FX开发者,两个版本,根据JDK需求选择

  • ikonli-javafx-12.3.1 (JDK 11+)
  • ikonli-javafx-2.6.0 (JDK 8)

这个工具包提供的核心类是一个Nodeorg.kordamp.ikonli.javafx.FontIcon

首先这个类是一个Node,所以,可以使用Node的地方都可以使用。其次,这个类是javafx.scene.text.Text的子类,所有可以使用的地方都能够使用。这个类最常见的使用是用于任何具有graphic属性的控件。

FXML中可以这样写:

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.GridPane?>
<?import org.kordamp.ikonli.javafx.FontIcon?>

<GridPane prefHeight="60.0" prefWidth="200.0"
          xmlns:fx="http://javafx.com/fxml"
          fx:controller="org.example.AppController">
    <Button GridPane.columnIndex="0" GridPane.rowIndex="0"
            mnemonicParsing="false"
            prefWidth="200.0">
        <graphic>
            <FontIcon iconLiteral="di-java" iconSize="64"/>
        </graphic>
    </Button>
</GridPane>

使用的时候在创建FontIcon对象可以通过字符串设定使用什么图标/图标尺寸/图标颜色。这个字符串可以是以下三种形式:

  • icon-code
  • icon-code:icon-size
  • icon-code:icon-size:icon-color
    Icon-code下面专门会讲,icon-size是用像素作为单位的图标宽度,icon-color则是javafx.scene.paint.Color, javafx.scene.paint.LinearGradient, or javafx.scene.paint.RadialGradient三类常量。例子:
val i1 = FontIcon("di-java")
val i2 = FontIcon("di-java:32")
val i3 = FontIcon("di-java:64:BLUE")

在Gradle项目中使用也很简单:

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.kordamp.ikonli:ikonli-javafx:12.3.1'
}

Maven:

<dependencies>
    <dependency>
        <groupId>org.kordamp.ikonli</groupId>
        <artifactId>ikonli-javafx</artifactId>
        <version>12.3.1</version>
    </dependency>
</dependencies>

此外记得在module-info.java中增加语句:

module com.acme.demo {
    requires javafx.base;
    requires javafx.graphics;
    requires javafx.controls;
    requires org.kordamp.ikonli.core;
    requires org.kordamp.ikonli.javafx;
    // 增加图标包
    requires org.kordamp.ikonli.fontawesome5;
}

最关键的问题?

怎么才能在Icon packs for Java applications提供的居多的包里面找到自己想要的图标呢?并且:

  1. 应用相应的图标包,
  2. 得到该图标的icon-code呢?

我特意编了一个软件来浏览Andres Almiray提供的所有图标,还有搜索功能。

软件的源代码开源在:java-ikon

安装下载:JavaFX 图标浏览与搜索软件

具体界面和操作太简单就不提,可以在java-ikon那里看得到。

结束语

值得注意的是,这个软件本身也用了一些Icon packs for Java applications提供的图标,给我孱弱的UI/UX设计增加唯一一点亮点……因为我实在太弱啦……

posted @ 2022-04-11 14:22  大福是小强  阅读(40)  评论(0编辑  收藏  举报  来源