IconFontPreview——一款預覽IconFont的插件

時間 2019-11-08

標籤 iconfontpreview 一款預覽 iconfont 插件简体版

原文原文鏈接

背景

使用過IconFont的應該都深有體會，每次使用IconFont的時候，因爲不知道Unicode和Icon的對應關係，每次都要到對應的文件夾下找到默認生成的html文件，打開後才能尋找到咱們須要的IconFont。而每次找文件這個過程真的很麻煩，並且當公司IconFont的版本更新的時候，這個路徑也會相應改變，那就更痛苦了。爲了解決這個問題，我就考慮能不能作一款預覽IconFont的插件，避免這種痛苦的尋找文件過程，提升開發效率。css

功能特性

支持已定義的IconFont的預覽
支持緩存避免每次查找
使用方便

源碼地址

IconFontPreviewhtml

歡迎Star👏～歡迎提issue和PR～這裏再推薦一下個人另外一個開源項目EasyTextView，一款高效利用IconFont的TextView，功能豐富，用過的人都說好～git

jar包地址

我已經發布到Intellij的官網上了，不知道爲啥搜不到github

IconFontPreview.zip瀏覽器

使用步驟

1.安裝完插件後,在操做面板會生成一個草帽的Icon，點擊操做面版的草帽icon(ONE PIECE)

2.第一次須要設置工程下ttf字體文件路徑和定義iconfont的string.xml路徑

這一步只會在第一次纔會使用，由於本地會有緩存，後面的會讀取緩存的目錄（根目錄下的PlugCache）緩存

3.點擊肯定後或者之後在點擊草帽就會在瀏覽器中打開預覽定義的IconFont圖標了

4.後面再使用就能夠直接點擊操做面板的草帽Icon就會直接彈出預覽頁面了

實現原理

1.IntelliJ插件開發

這個網上博客不少，這裏就不專門講解了bash

2.XML解析

這裏原本一開始是準備直接讀取ttf文件，而後直接生成ttf文件中全部定義的IconFont的，可是我好像沒有找到實現方式（你們有好的實現方式能夠告訴我～，或者提PR）咱們通常定義IconFont的都會在String.xml定義unicode相似於下面app

<resources>
    <!--後退-->
    <string name="icon_font_606">\ue606</string>
    <!--評論-->
    <string name="icon_font_comment">\ue68f</string>
    <!--收藏-->
    <string name="icon_font_collection">\ue68e</string>
    <!--贊-->
    <string name="icon_font_like">\ue695</string>
</resources>
複製代碼

因此這裏就須要咱們遍歷XML了，這裏我選擇了SAX解析的方式，取出了定義的Key，和對應的Unicode，並保存起來ide

3.Jsoup動態渲染HTML

拿到咱們的數據集後，咱們就須要生成咱們最終的預覽頁面了，這裏直接利用IconFont固定的HTMl模版，下載下來，利用Jsoup這個HTMl解析庫，遍歷咱們生成的數據集，並對應在固定位置插入HTML代碼，最後利用File保存到PluginCache文件夾下這裏有幾個問題：組件化

3.1 jar包中HTML讀取css文件路徑問題

因爲插件最終生成的是jar文件，全部html中的css文件，因爲路徑沒法讀取，須要將css文件拷貝到html中

3.2 緩存文件須要利用文件流保存，這裏涉及到插件的數據持久化。

由於用戶設置的ttf文件路徑和string.xml文件路徑不能每次點擊都要從新設置，哪還要這個插件幹啥...，因此我就想將用戶設置的這兩個路徑緩存起來，因此這裏就涉及到插件的數據持久化。網上提供的插件持久化的兩種方式我都試了一下，發現無法真正意義上的持久化，當你idea關閉後，這些數據都會被對應清理掉，對應於 1.使用PersistentStateComponent 2.使用PersistentStateComponent 因此最後我是用了文件流的方式緩存目錄路徑（你們若是有更好的方式能夠告訴我～）

/**
     * 建立li
     */
public static final String ICON_ITEM = "<li>\n" +
            " <i class=\"icon iconfont\">%s</i>\n" +
            " <div class=\"name\">%s</div>\n" +
            " <div class=\"code\">%s</div>\n" +
            " </li>";
public void printer(String ttfPath) {
        InputStream html = this.getClass().getResourceAsStream(Common.HTML_PATH);
        try {
            Document doc = Jsoup.parse(html, "UTF-8", "");
            if (data != null) {
                Elements style = doc.select("style");
                style.prepend(String.format(Common.STYLE_DF, ttfPath));
                Elements container = doc.getElementsByClass("icon_lists clear");
                if (Common.MODE_ALL) {
                    //全量模式，從16進制最小值到16進制最大值
                    printerAll(container);
                } else {
                    //自定義模式,只輸出定義的資源文件
                    printerDefine(container);
                }
            }
            File result = CreateFileUtil.createFile(RESULT_PATH);
            if (result == null) {
                return;
            }
            FileOutputStream outStream = new FileOutputStream(result);    //文件輸出流用於將數據寫入文件
            outStream.write(doc.toString().getBytes(StandardCharsets.UTF_8));
            outStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private void printerDefine(Elements container) {
        for (Map.Entry<String, XmlIconFontModel> entry : data.getFonts().entrySet()) {
            String code = entry.getValue().getFontValue();
            if (code.startsWith(Common.ICON_START)) {
                String value = "&#xe" + code.substring(3) + ";";
                container.append(String.format(Common.ICON_ITEM, value,
                        entry.getValue().getFontKey(), code));
            } else if (code.startsWith(Common.ICON_START_SUB)) {
                container.append(String.format(Common.ICON_ITEM, code,
                        entry.getValue().getFontKey(), code));
            }
        }
    }
複製代碼

4.利用exec執行命令，打開生成的html文件

/**
         * 執行展現
         */
        try {
            if (OSinfo.isWindows()) {
                Runtime.getRuntime().exec("cmd.exe /c start " + RESULT_PATH);
            } else {
                Runtime.getRuntime().exec("open " + RESULT_PATH);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
複製代碼