提升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套件。要启用该功能：

在.idea/kelp目录中添加一个名为dsComponentFunIcon的40x40 SVG图标。

注意：您还可以选择添加一个名为dsComponentFunIcon_dark.svg的暗色版本。

在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\""}// 其他模板...]
}