JavaFx 使用字體圖標記錄

原文:JavaFx 使用字體圖標記錄 - Stars-One的雜貨小窩

之前其實也是研究過關於字體圖標的使用,還整了個庫Tornadofx學習筆記（4）——IconTextFx開源庫,整合5000+個字體圖標 - Stars-one - 博客園

由於之前並不是太過於講解字體圖標,最近又是抽空研究了一番

介紹

字體圖標在JavaFx中的Label控制項和Text控制項進行使用,使用字體圖標的好處:

• 可以不用每次都需要圖標的時候去拷貝圖片到項目
• 可以通過樣式直接更改字體顏色從而實現更改圖標顏色

提供字體圖標的網站有很多,比如阿裡的iconfont-阿裡巴巴矢量圖標庫

比如另外的Remix IconRemix Icon - Open source icon library,裡面的基礎圖標很全,推薦大家可以集成一下,ttf文件大小不到400KB

我們以阿裡巴巴矢量圖標庫來說明下使用方法

使用

1.下載圖標文件

使用github賬號登錄一下阿裡巴巴矢量圖標庫,之後選擇我們需要的圖標,添加到購物車

註意: 字體圖標選用純色的比較好

之後點擊購物車,可以查看自己選擇的圖標,選擇添加到項目(如果沒有項目,可以在之後彈窗中新建項目)

之後可以查看我們的項目,從頂頭的導航菜單進來(資源管理->我的項目),選擇下載到本地

之後你會得到一個壓縮包,解壓如下所示

可以看到有個簡單的html文件,這個文件我們可以打開,是用來預覽圖標,如下所示

除此之外,我們還可以看到json文件,裡面的內容實際上就是關於各圖標的名稱,unicode等數據,之後我們可以用到此份json文件

ttf文件則是我們需要的字體文件,需要複製到我們項目中進行使用

2.代碼中使用

我們將ttf文件複製到項目中,該如何使用呢?下麵我按照兩種語言進行簡單說明

Java

//讀取字體文件,第二個參數是字體大小
Font font = Font.loadFont(getClass().getResourceAsStream("/ttf/icon.ttf"), 20.0);
//某個圖標的unicode
char unicode = '\ue001';
Text text = new Text();
//設置字體和文字
text.setFont(font);
text.setText(Character.toString(unicode));
//這裡根據情況輸入填寫,主要就是修改顏色和字體
text.setStyle("-fx-font-size:20px;-fx-fill:red;");

上述代碼中,unicode數據是怎麼來的呢?各位通過html文件應該就能明白了,圖標下麵有所標明,我們需要把#$x給替換成了\u即可

註意上面,我們的unicode是char類型的,在設置的時候使用了此方法Character.toString(unicode),將其轉為了String類型,我們暫且將此結果稱為unicode字體數據

實際上,我們直接列印出來使不會有任何顯示的,因為我們當前系統沒有此unicode對應的字體

但是,實際上,我們一般都是直接獲取到一個String對象而不是一個char類型,如String s = "\\ue001",

PS:雙斜杠是因為需要轉義,實際上變數s的內容為\ue001

上面的變數s不是unicode字體數據,該如何轉換呢?

這裡,可以使用commons-text庫中的StringEscapeUtils工具類進行轉換

首先,是引用maven依賴

<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-text -->
<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-text</artifactId>
    <version>1.9</version> 
</dependency>

• StringEscapeUtils.unescapeJava() 將unicode形式的字元串轉為unicode字體數據
• StringEscapeUtils.escapeJava() 將unicode字體數據轉為unicode形式的字元串,中文其實也算做unicode字體數據, 如中文的"我"得到的返回結果為\u6211 或者可以複製一些特殊表情也可以進行轉換哦

使用如下代碼所示:

//讀取字體文件,第二個參數是字體大小
Font font = Font.loadFont(getClass().getResourceAsStream("/ttf/iconfont.ttf"), 20.0);
//某個圖標的unicode
String unicode = "\\ue001";
Text text = new Text();
//設置字體和文字
text.setFont(font);
text.setText(StringEscapeUtils.unescapeJava(unicode));
//這裡根據情況輸入填寫,主要就是修改顏色和字體
text.setStyle("-fx-font-size:20px;-fx-fill:red;");

Kotlin

在Kotlin中,和Java不同,我們可以直接把char類型當成字元串String類型,如下代碼所示:

text {
    //第二個參數是字體大小
    font = loadFont("/font/iconfont.ttf", 25.0)!!
    //如果只有一個\,在Kotlin中就是字體數據
    text ="\ueDEF"
    style {
        fill = c("red")
    }
}

但是如果我們是動態讀入的一個unicode數據,則是沒法使用的,原因和上述說的一樣,因為不是unicode字體數據,所以text控制項會什麼都不顯示

text {
    font = loadFont("/font/iconfont.ttf", 25.0)!!
    //兩個斜杠,需要調用方法轉為unicode字體數據
    text = StringEscapeUtils.unescapeJava("\\ueDEF")
    style {
        fill = c("red")
    }
}

補充

最後,上述也是提到了,我們解壓出來的字體目錄下有一份json文件,實際上,我們可以將此份json數據也放在項目文件夾里

在應用運行開始的時候讀取,構建一個Map<String,String>,key為名稱,而value則是unicode字體數據

之後我們需要用到的時候,可以直接根據名稱從中拿去unicode字體數據直接顯示

參考

• Java實現字元串和unicode互轉_HaHa_Sir的博客-CSDN博客_java轉換unicode