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)
这个工具包提供的核心类是一个Node
,org.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提供的居多的包里面找到自己想要的图标呢?并且:
- 应用相应的图标包,
- 得到该图标的icon-code呢?
我特意编了一个软件来浏览Andres Almiray提供的所有图标,还有搜索功能。
软件的源代码开源在:java-ikon
安装下载:JavaFX 图标浏览与搜索软件
具体界面和操作太简单就不提,可以在java-ikon那里看得到。
结束语
值得注意的是,这个软件本身也用了一些Icon packs for Java applications提供的图标,给我孱弱的UI/UX设计增加唯一一点亮点……因为我实在太弱啦……