動(dòng)機(jī)

自2013年以來(lái)，我一直在編寫(xiě)JavaFX應(yīng)用程序和庫(kù)的代碼，它們的共同點(diǎn)是，我需要找到可以用于它們的良好圖標(biāo)/圖形。 作為前Swing開(kāi)發(fā)人員，我首先使用圖像文件，GIF或PNG。 通常，我會(huì)從IconExperience（ www.incors.com ）許可類(lèi)似“ O-Collection”的庫(kù)。 但是很快對(duì)我來(lái)說(shuō)，使用圖像文件太痛苦了。

試想一下，您想支持節(jié)點(diǎn)的不同偽狀態(tài)（例如，“懸?！?#xff0c;“按下”，“集中”）。 您最終會(huì)為每個(gè)州使用相同圖標(biāo)的不同版本。 如果要支持不同大小（小，中，大）或屏幕分辨率（例如Mac上的“ Retina Display”，2x圖標(biāo)），則需要更多文件。 最終，您最終陷入了圖像文件的地獄。

剛開(kāi)始我并不在乎，因?yàn)槲覐目蚣荛_(kāi)發(fā)開(kāi)始。 CalendarFX或FlexGanttFX之類(lèi)的項(xiàng)目?jī)H需要很少的圖標(biāo)。 因此，將PNG文件用于這些庫(kù)不是問(wèn)題。 但是，一旦我開(kāi)始從事較大的項(xiàng)目，就需要支持?jǐn)?shù)百個(gè)圖標(biāo)。

圖標(biāo)字體

幸運(yùn)的是，我們所有人都已經(jīng)為該問(wèn)題提出了解決方案，該解決方案稱(chēng)為“圖標(biāo)字體”。 圖標(biāo)字體的最大優(yōu)點(diǎn)是所有圖標(biāo)都包含在一個(gè)文件中。 這使得在工作區(qū)中對(duì)其進(jìn)行管理非常容易。 另一個(gè)優(yōu)點(diǎn)是可以通過(guò)CSS設(shè)置字體圖標(biāo)的樣式。 這樣，單個(gè)圖標(biāo)可以以許多不同的顏色或大小顯示。

最流行的圖標(biāo)字體，至少在開(kāi)始的時(shí)候，是FontAwesome并有一個(gè)JavaFX實(shí)施叫FontAwesomeFX由延阻止。 我將這個(gè)庫(kù)用于我所有的項(xiàng)目很長(zhǎng)時(shí)間了，從沒(méi)想過(guò)我需要其他任何東西。 直到我偶然發(fā)現(xiàn)了Andres Almiray出色的圖書(shū)館“ Ikonli”。 您可以在GitHub上找到它 。 之后，我將其用于所有與JavaFX相關(guān)的工作。 對(duì)于我的大型應(yīng)用程序，也對(duì)于我的庫(kù)。

我喜歡Ikonli的地方是，它與現(xiàn)有的JavaFX API無(wú)縫集成。 圖標(biāo)只是“文本”節(jié)點(diǎn)（duh！）的擴(kuò)展，它帶有可設(shè)置樣式的屬性。 圖標(biāo)本身具有屬性，包括圖標(biāo)“代碼”，其顏色和大小。 CSS文件中這些屬性的名稱(chēng)也遵循約定。 在這里，它們被稱(chēng)為-fx-icon-code，-fx-icon-color和-fx-icon-size。

積分

Ikonli不僅隨FontAwesome一起提供，而且總共提供31種（！）不同字體。 其中包括材料設(shè)計(jì)圖標(biāo)，天氣圖標(biāo)，付款圖標(biāo)（信用卡等）。 其中的每一個(gè)都在各自的模塊/工件中，并且可以分別導(dǎo)入，例如通過(guò)Maven依賴(lài)項(xiàng)。 如果要使用Material Design圖標(biāo)字體，則需要將以下依賴(lài)項(xiàng)添加到Maven項(xiàng)目的POM文件中。

< dependencies > < dependency > < groupId >org.kordamp.ikonli</ groupId > < artifactId >ikonli-javafx</ artifactId > < version >11.3.5</ version > </ dependency > </ dependencies > < dependency > < groupId >org.kordamp.ikonli</ groupId > < artifactId >ikonli-materialdesign-pack</ artifactId > < version >11.3.5</ version > </ dependency >

備忘單

圖標(biāo)字體通常帶有很多圖標(biāo)。 因此，找到合適的人很困難。 Ikonli通過(guò)為每種字體提供一個(gè)“備忘單”來(lái)簡(jiǎn)化此過(guò)程。 可以在下面看到“材料設(shè)計(jì)”圖標(biāo)。

編碼

創(chuàng)建FontIcon節(jié)點(diǎn)/實(shí)例后，就可以在JavaFX場(chǎng)景圖中的任何位置使用它。 在下面，您會(huì)看到一個(gè)通過(guò)代碼將其設(shè)置在按鈕上的示例。

Button button = new Button( "User Account" ); button.setGraphic( new FontIcon()); button.setId( "account-button" );

要設(shè)置圖標(biāo)樣式，請(qǐng)將以下內(nèi)容添加到CSS文件中：

#account-button .ikonli-font-icon { -fx-icon-code: "mdi-account" ; -fx-icon-color: blue; -fx-icon-size: 1.2em; }

要在FXML文件中使用圖標(biāo)，您可以編寫(xiě)以下代碼：

<Button text= "User Account" id = "account-button" > <graphic> <FontIcon iconLiteral= "mdi-account" /> < /graphic > <Button>

自定義字體

您還可以基于Ikonli為JavaFX創(chuàng)建自己的自定義圖標(biāo)字體。 顯然，您需要的第一件事是字體文件。 有幾種在線服務(wù)可用于創(chuàng)建這種字體。 它們使您可以從各種現(xiàn)有字體中選擇圖標(biāo)，但也可以使您上載自己的SVG文件。 我使用的一個(gè)叫做Fontello。 它具有三個(gè)主要區(qū)域：圖標(biāo)選擇和/或上傳，自定義名稱(chēng)，自定義代碼。

在線正確配置圖標(biāo)后，即可將結(jié)果下載為ZIP文件。 在ZIP文件中，您會(huì)找到各種格式的圖標(biāo)字體。

要確認(rèn)所有圖標(biāo)實(shí)際上都在字體內(nèi)，您可以通過(guò)“字體簿”（在Mac上）打開(kāi)文件。 它看起來(lái)應(yīng)該像這樣：

圖標(biāo)枚舉

為了使該字體在JavaFX應(yīng)用程序中可用，您必須首先實(shí)現(xiàn)一個(gè)枚舉，每個(gè)圖標(biāo)都有一個(gè)值。 它看起來(lái)類(lèi)似于：

package com.acme.font; import org.kordamp.ikonli.Ikon; public enum MyIcon implements Ikon { HOUSE( "my-icon-house" , '\ue815' ), CAR( "my-icon-car" , '\ue816' ), DOG( "my-icon-dog" , '\ue817' ), CAT( "my-icon-cat" , '\ue818' ), KID( "my-icon-kid" , '\ue819' ); private String description; private char icon; MyIcon(String description, char icon) { this .description = description; this .icon = icon; } public String getDescription() { return description; } public char getCode() { return icon; } public static MyIcon findByDescription(String description) { for (MyIcon icon : values()) { if (icon.description.equals(description)) { return icon; } } throw new IllegalArgumentException( "Icon not supported: " + description); } }

伊康·漢德勒

接下來(lái)要實(shí)現(xiàn)的是AbstractIkonHandler的擴(kuò)展。 對(duì)于此示例，其中所有圖標(biāo)文字均以“ my-icon”作為前綴，“ supports”方法將精確返回該前綴。

package com.acme.font; import org.kordamp.ikonli.AbstractIkonHandler; import org.kordamp.ikonli.Ikon; public class MyIkonliHandler extends AbstractIkonHandler { public boolean supports(String description) { return description != null && description.startsWith( "my-icon-" ); } public Ikon resolve(String description) { return MyIcon.findByDescription(description); } public String getFontResourcePath() { return "com/acme/fonts/my-icons.ttf" ; } public String getFontFamily() { return "my-icons" ; } }

服務(wù)查詢(xún)

現(xiàn)在剩下要做的就是使字體可供全世界使用。 這是通過(guò)服務(wù)查找完成的，這意味著您必須在文件夾META-INF / services中創(chuàng)建一個(gè)名為“ org.kordamp.ikonli.IkonHandler”的文件。 在此文件內(nèi)，您需要添加處理程序類(lèi)的完整類(lèi)名（com.acme.font.MyIkonliHandler）。

例

以下屏幕截圖顯示了我們?cè)贛aven項(xiàng)目中使用的字體模塊。 您的項(xiàng)目應(yīng)類(lèi)似于此。

而已！ 祝大家編碼愉快！

翻譯自: https://www.javacodegeeks.com/2020/03/javafx-tip-32-need-icons-use-ikonli.html

總結(jié)

以上是生活随笔為你收集整理的JavaFX技巧32：需要图标吗？ 使用Ikonli！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。