提升Android Studio開發體驗：使用Kelp插件實現顏色和圖標預覽

在Android開發中，自動補全功能對于提高開發效率至關重要。然而，默認的Android Studio并不能預覽顏色和圖標，這使得開發者在選擇資源時常常感到困惑。本文將介紹如何使用Kelp插件，為Android Studio添加顏色和圖標預覽功能，從而提升開發體驗。

Kelp插件簡介

Kelp插件是一款功能強大的工具，旨在為Android Studio添加各種增強功能，改善開發者體驗。它支持以下關鍵功能：

• 自動補全中的暗色和亮色預覽 🎨
• 自動補全中的圖標預覽 🔍
• 組件函數的可自定義圖標
• 可在Git中存儲和共享的Live Templates ??
• KDoc圖像渲染等

安裝Kelp插件

首先，從Kelp GitHub倉庫下載最新版本的插件，并通過以下路徑手動安裝：

Settings/Preferences > Plugins > ?? > Install plugin from disk....

接下來，創建一個名為config.json的配置文件，放置在.idea/kelp目錄中。該文件將用于配置插件的各種功能。此外，為確保團隊中的每個人都在使用該插件，您可以創建一個externalDependencies.xml文件進行通知。

注意：確保您使用的是Android Studio Koala 2024.1.1 Canary 3或更高版本。

設置顏色預覽 🎨

要啟用顏色預覽功能，首先需要按照以下方式實現您的顏色系統：

class GetcontactColor(val primary: Color,val secondary: Color,
) {/*** This class must have MUST structure and name.* It MUST be placed here.* You can create it manually or autogenerate it using code generators.*/private class KelpColorPreview {/*** The pattern is "name_lightColor_darkColor"* If you don't have a dark theme, you MUST set `darkColor`* to be the same as `lightColor`, then it won't be rendered.* * Colors MUST be in ARGB:* The format of an ARGB hexadecimal color is AARRGGBB. * AA is the alpha channel. It represents the opacity of the color. * RR is the red value, GG is the green, and BB is the blue.* * If your colors are in RGB format, just add FF to them, * representing no transparency.*/val primary_FFD0BCFF_FF6650A4 = Unitval secondary_12CCC2DC_FF625B71 = Unit}
}// or it can be declared like this
// it's just important for the color to be a val apperantly.
class GetcontactColor2 {private var _primary: Color by mutableStateOf(...)val primary: Color = _primaryprivate var _secondary: Color by mutableStateOf(...)val secondary: Color = _secondaryprivate class KelpColorPreview {val primary_FFD0BCFF_FF6650A4 = Unitval secondary_12CCC2DC_FF625B71 = Unit}
}

然后，在config.json文件中添加以下配置，以啟用代碼補全和gutter預覽：

{"colorPreview": {"codeCompletionEnabled": true,"gutterEnabled": true}
}

保存config.json文件后，插件將自動應用新的更改。效果如下：

設置圖標預覽 🔍

圖標預覽功能使得開發者在使用圖標時能夠更直觀地看到實際效果。我們團隊有20多名Android開發者，使用圖標時經常會遇到重復問題。通過使用ImageVector這種穩定類型管理圖標，我們實現了高效的圖標管理。

以下是圖標管理的實現示例：

class AwesomeIcon {val direction: ImageVector@Composableget() = ImageVector.vectorResource(id = R.drawable.ic_direction)val feedback: ImageVector@Composableget() = ImageVector.vectorResource(id = R.drawable.ic_feedback)// 其他圖標定義...
}internal val LocaleIcon = staticCompositionLocalOf { AwesomeIcon() }object AwesomeTheme {val icons: AwesomeIcon@Composable@ReadOnlyComposableget() = LocaleIcon.current
}@Composable
fun AwesomeTheme(icons: AwesomeIcon = AwesomeTheme.icons,content: @Composable () -> Unit,
) {CompositionLocalProvider(LocaleIcon provides icons,) {content()}
}

要啟用圖標預覽功能，在config.json文件中添加以下配置：

{"iconsRendering": {"codeCompletionEnabled": true,"gutterEnabled": true,"containerClassName": "com.yourpackage.AwesomeIcon"}
}

由于插件將類中的圖標名稱映射到實際資源以進行預覽，變量名必須與資源匹配。我們的資源通常以“ic_”開頭，因此可以在配置文件中添加映射器：

{"iconsRendering": {"propertyToResourceMapper": {"addPrefix": "ic_","convertToSnakeCase": true}}
}

保存配置文件后，您將看到圖標預覽效果：

為設計系統組件添加預覽圖標

此功能允許您為設計系統的組件添加預覽圖標，特別適用于擁有大量組件的UI套件。要啟用該功能：

1. 在.idea/kelp目錄中添加一個名為dsComponentFunIcon的40x40 SVG圖標。

注意：您還可以選擇添加一個名為dsComponentFunIcon_dark.svg的暗色版本。

2. 在config.json文件中添加以下配置：

{"componentFunHighlighting": {"functionFqnPrefix": "app.source.getcontact.uikit.component.","functionSimpleNamePrefix": "Getcontact" // 可選，用于限制僅針對具有特定前綴的組件}
}

插件將僅為您提供的包下的可組合組件添加此預覽圖標。

設置共享Live Templates ??

即使可以通過不同方式實現，Kelp插件使得通過Git共享Live Templates變得更加容易。只需將Live Templates添加到config.json文件中：

{"liveTemplates": [{"abbreviation": "gth","text": "GetcontactTheme.dimensions.$CODE_COMPLETION$","description": "Writes \"GetcontactTheme.\""},{"abbreviation": "gco","text": "GetcontactTheme.colors.$CODE_COMPLETION$","description": "Writes \"GetcontactTheme.colors\""},{"abbreviation": "gty","text": "GetcontactTheme.typography.$CODE_COMPLETION$","description": "Writes \"GetcontactTheme.typography\""},{"abbreviation": "gic","text": "GetcontactTheme.icons.$CODE_COMPLETION$","description": "Writes \"GetcontactTheme.icons\""}// 其他模板...]
}

保存后，您可以通過Git共享這些模板文件。

結語

Kelp插件為Android Studio帶來了諸多強大功能，極大地提升了開發體驗。通過本文介紹的方法，您可以輕松設置顏色和圖標預覽功能，并在設計系統組件中添加預覽圖標。此外，Kelp插件還提供了便捷的Live Templates共享方式，進一步提高了團隊協作效率。

好了，kelp基本功能介紹完畢，下面是kelp的倉庫地址。

Github

https://github.com/ozontech/kelp