专栏首页Android补给站只需三步实现Databinding插件化

只需三步实现Databinding插件化

首先为何我要实现Databinding这个小插件,主要是在日常开发中,发现每次通过Android Studio的Layout resource file来创建xml布局文件时,布局文件的格式都没有包含Databinding所要的标签。导致的问题就是每次都要重复手动修改布局文件,添加标签等。

所以为了能够偷懒,就有个这个一步生成符合Databinding的布局文件。

这篇文章不会详细讲每一个代码的实现,因为这样太浪费大家的时间,我会通过几个要点与关键代码来梳理实现过程,而且感兴趣的之后再去看源码也会很容易理解。

源码地址(欢迎来这点击start?):

https://github.com/idisfkj/databinding_autorun

废话不多说,先来看下这个插件的效果

1 三步走

实现上面的插件,我这里归纳为三步,只要你掌握了这三步,你也能够实现自己的插件,提高日常开发,减少不必要的重复操作。

  1. 创建Actions
  2. 生成Panel布局
  3. 配置持久化Component

2 创建Actions

至于如何使用Gradle来创建plugin项目,这不是今天的主题,所以就不多介绍了。我这里提供一个链接,可以帮助你快速使用Gradle创建plugin项目

http://www.jetbrains.org/intellij/sdk/docs/tutorials/build_system.html

就如上面的gif效果图一样,首先第一步是通过layout文件节点,弹出菜单列表,最后在New选项子列表中呈现Databinding layout resource file选项。如下图所示

上面的这整个步骤,可以归纳为一点,就是Action,所以我们接下来需要自定义Action。

但所幸的是intellij openapi已经为我们提供了AnAction类,我们要做的只需继承它,来实现具体的update与actionPerformed方法即可。

2.1 cconfig

在实现方法之前,我们需要在resources/META-INF/plugin.xml文件中进行配置。

    <actions>
        <!-- Add your actions here -->
        <action class="com.idisfkj.databinding.autorun.actions.DataBindingAutorunAction"
                id="DataBindingAutorunAction"
                text="_DataBinding layout resource file"
                description="Create DataBinding Resource File">
            <add-to-group group-id="NewGroup" anchor="first"/>
        </action>
    </actions>

该配置最重要的是最后一条add-to-group,这里我们需要将当前Action添加到NewGroup的系统列表中,这样我们才能在上图中的New的扩展列表中看到Databinding layout resources file选项。

原则上我们在AS能够看到的列表,都能够进行插入。例如顶部的File、Edit、View等菜单栏,同时也可以创建新的顶部菜单栏。

2.2

update

这个方法主要是用来更新Action的状态,它的回调会非常频繁与迅速。通过这个回调方法来控制Databinding layout resource file这个选项的显隐。

为什么要控制显隐呢?很简单,一方面我们创建.xml资源文件只能在layout文件夹下,所以我们要控制它的创建位置;另一方面也是为了与原生的Layout resource file选项保持一致,不至于违和。

而Action的显隐是可以通过presentation.isVisible来控制。

那么最终效果与控制量都知道了,最后我们要做的就是逻辑判断。我们直接来Look at the code

    override fun update(e: AnActionEvent) {
        with(e) {
            // 默认不显示
            presentation.isVisible = false
            // AnActionEvent的扩展方法,目的是找到当前操作的虚拟文件
            handleVirtualFile { project, virtualFile ->
                // 找到当前module,并且定位到layout文件目录
                ModuleUtil.findModuleForFile(virtualFile, project)?.sourceRoots?.map {
                    val layout = PsiManager.getInstance(project)
                        .findDirectory(it)
                        ?.findSubdirectory("layout")

                    // 当前操作范围在layout节点下
                    if (layout != null && virtualFile.path.contains(layout.virtualFile.path)) {
                        // 显示
                        presentation.isVisible = true
                        return@map
                    }
                }
            }
        }
    }

这里有两个知识点

  1. VirtualFile: 简单的来说可以理解为项目中的文件与文件夹。这里通过它来定位当前所处的module。更多信息可以查看下面的链接: http://www.jetbrains.org/intellij/sdk/docs/basics/virtual_file_system.html
  2. PsiManager:项目结构管理器,这里通过它来找到layout文件目录,后续还会使用它来实现自动添加文件。更多信息可以查看下面的链接: http://www.jetbrains.org/intellij/sdk/docs/basics/architectural_overview/psi.html

2.3

actionPerformed

现在我们已经控制了Action的显隐,接下来我们要做的就是实现它的点击事件。

逻辑很简单,就是一个简单的点击事件,弹出一个编辑框。

    override fun actionPerformed(e: AnActionEvent) {
        // AnActionEvent的扩展方法,目的是找到当前操作的虚拟文件
        e.handleVirtualFile { project, virtualFile ->
            NewLayoutDialog(project, virtualFile).show()
        }
    }

重点是NewLayoutDialog的内部处理逻辑,那么我们继续。

3

生成Panel布局

现在我们要做的是

  1. 创建Dialog弹窗
  2. 绘制弹窗布局
  3. 实现点击事件
  4. 创建资源布局文件

3.1

创建Dialog弹窗

对于Dialog弹窗的创建也是非常方便的,只需继承DialogWrapper。在初始化时调用它的init方法,之后就是实现具体的布局createCenterPanel与点击事件doOKAction方法。

    init {
        title = "New DataBinding Layout Resource File"
        init()
    }

    override fun createCenterPanel(): JComponent? = panel

    override fun doOKAction() {}

3.2

绘制弹窗布局

如果使用传统的GUI布局,个人感觉非常麻烦。因为项目使用的是kotlin,所以我这里使用了Kotlin UI DSL,如果你不了解的话可以查看下面的链接。

http://www.jetbrains.org/intellij/sdk/docs/user_interface_components/kotlin_ui_dsl.html

要实现上述的布局效果,需要继承JPanel,然后添加两个文本label与输入框JTextField。具体如下

class NewLayoutPanel(project: Project) : JPanel() {

    val fileName = JTextField()
    val rootElement = JTextField()

    init {
        layout = BorderLayout()
        val panel = panel(LCFlags.fill) {
            row("File name:") { fileName() }
            row("Root element:") { rootElement() }
        }
        rootElement.text = SettingsComponent.getInstance(project).defaultRootElement

        add(panel, BorderLayout.CENTER)
    }

    override fun getPreferredSize(): Dimension = Dimension(300, 40)
}

代码中的SettingsComponent是用来保存持久化配置的,而这里是获取设置页面配置的数据,后续会提及到。

现在已经有了布局,再将自定义的布局添加到createCenterPanel方法中。接下来要做的是实现弹窗的OK点击

3.3

实现点击事件

点击的逻辑是,首先查看当前将要创建的文件名称是否已经存在,其次才是创建文件,添加到目录中。

对于文件名称是否重名,开始我是通过查找该目录下的所有文件来进行判断的,但后来发现无需这么麻烦。因为在添加文件的时候会进行自动判断,如果有重名会抛出异常,所以可以通过捕获异常来进行弹窗提示。

文件的创建通过PsiFileFactory的createFileFromText方法

val file = PsiFileFactory.getInstance(project)
    .createFileFromText(
        (panel.fileName.text
            ?: TemplateUtils.TEMPLATE_DATABINDING_FILE_NAME) + TemplateUtils.TEMPLATE_LAYOUT_SUFFIX,
        XMLLanguage.INSTANCE,
        TemplateUtils.getTemplateContent(panel.rootElement.text)
    )

三个参数值分别为

  • 文件名: 通过布局panel获取text
  • 语言: 因为是.xml布局文件,所用是xml语言
  • 内容: 这里使用了预先定制的模板(可任意修改)

接下来就是将文件添加到layout下,这里还是要使用之前的PsiManager来定位到layout目录下

// 通过Swing dispatch thread来进行写操作
ApplicationManager.getApplication().runWriteAction {
    // module的扩展方法,目的是通过PsiManager定位到layout目录下
    getModule()?.handleVirtualFile {
        // 判断该操作是否在可接受的范围内
        if (actionVirtualFile.path.contains(it.virtualFile.path)) {
            try {
                // 添加文件
                it.add(file)
                // 关闭弹窗
                close(OK_EXIT_CODE)
            } catch (e: IncorrectOperationException) {
                // 异常弹窗提醒
                NotificationUtils.showMessage(
                    project, "error",
                    e.localizedMessage
                )
                e.printStackTrace()
            }
        }
    }
}

现在,如果你将要创建的文件存在重名,将会弹出如下提示

当然如果成功,文件就已经创建在layout目录下,同时是Databinding模式的xml文件。

4 配置持久化Component

其实到这里基本已经可以正常使用了,但为了该插件能更灵活点,我还是增加了配置功能。

这是插件的设置页面,我在这里提供了Default Root Element的设置,它是创建xml文件的布局根节点标签,默认是LinearLayout,所以你可以通过修改它来改变每次弹窗的默认根布局节点标签。

当然这只是一个小功能,在这里提出是为了让大家了解设置页的实现。

之前我还实现了可以自定义xml的内容模板,但后来想意义并不大就删除掉了,因为我们日常开发中布局的内容都是多变的,唯一能稍微固定的也就是布局的根节点了。

4.1 Setting布局

对于设置页的布局,其实也是一个label与JTextField,所以我这里就不多说了,具体可以查看源码

4.2 Configurable

设置页需要实现Configurable接口,它会提供是4个方法

    override fun isModified(): Boolean = modified

    override fun getDisplayName(): String = "DataBinding Autorun"

    override fun apply() {
        SettingsComponent.getInstance(project).defaultRootElement = settingsPanel.defaultRootElement.text
        modified = false
    }

    override fun createComponent(): JComponent? = settingsPanel.apply {
        defaultRootElement.text = SettingsComponent.getInstance(project).defaultRootElement
        defaultRootElement.document.addDocumentListener(this@SettingsConfigurable)
    }

  • isModified: 是否进行了修改,为true的话设置页的Apply就会变成可点击
  • getDisplayName: 在Android Studio的OtherSettings中展示的名称
  • apply: Apply的点击回调
  • createComponent: 布局

对于isModified的判断逻辑,引入对document的监听DocumentListener

    override fun changedUpdate(e: DocumentEvent?) {
        modified = true
    }

    override fun insertUpdate(e: DocumentEvent?) {
        modified = true
    }

    override fun removeUpdate(e: DocumentEvent?) {
        modified = true
    }

它提供的三个方法只要发生了回调,就认为是编辑了该设置页。

最后在apply与createComponent中都用到了SettingsComponent,它是用来保存数据的,保证设置的defaultRootElement能够实时保存,类似于Android的sharedpreferences

4.3 PersistentStateComponent

要实现数据的持久话,需要实现PersistentStateComponent接口。它会暴露getState与loadState两个方法,让我们来获取与保存状态。

它的保存方式也是通过.xml的文件方式进行保存,所以需要使用@state来进行配置,具体如下

@State(
    name = "SettingsConfiguration",
    storages = [Storage(value = "settingsConfiguration.xml")]
)
class SettingsComponent : PersistentStateComponent<SettingsComponent> {

    var defaultRootElement = "LinearLayout"

    companion object {
        fun getInstance(project: Project): SettingsComponent =
            ServiceManager.getService(project, SettingsComponent::class.java)
    }

    override fun getState(): SettingsComponent? = this

    override fun loadState(state: SettingsComponent) {
        XmlSerializerUtil.copyBean(state, this)
    }
}

该状态名为SettingConfiguration,保存在settingConfiguration.xml文件中。保存方式会借助XmlSerializerUtil来实现。

当然为了保存该实例的单例模式,这里使用ServiceManager的getService方法来获取它的实例。所以在上面的Configurable中,使用的就是这个方式。

4.4 配置

自定义的SettingsConfigurable与SettingsComponent都需要到plugin.xml中进行配置,这与之前的Action类似。你可以理解为Android的四大组件。

    <extensions defaultExtensionNs="com.intellij">
        <!-- Add your extensions here -->
        <defaultProjectTypeProvider type="Android"/>
        <projectConfigurable instance="com.idisfkj.databinding.autorun.ui.settings.SettingsConfigurable"/>
        <projectService serviceInterface="com.idisfkj.databinding.autorun.component.SettingsComponent"
                        serviceImplementation="com.idisfkj.databinding.autorun.component.SettingsComponent"/>
    </extensions>

    <project-components>
        <component>
            <implementation-class>
                com.idisfkj.databinding.autorun.component.SettingsComponent
            </implementation-class>
        </component>
    </project-components>

由于SettingsComponent是project级别的,所以这里包含在project-components标签中;另一方面SettingsConfigurable在配置中统一归于extensions标签,至于为什么,这就涉及到扩展了,简单的说就是别人可以在你的插件基础上进行不同程度的扩展,就是基于这个的。由于这又是另外一个话题,所以就不多说了,感兴趣的可以自己去了解。

5 结语

关于Databinding插件化的定制就到这里了,源码已经在文章开头给出。

如果你对该插件有别的建议,欢迎@我;亦或者你在使用的过程中有什么不便的地方也可以在github中提issue,我也会第一时间进行优化。

本文分享自微信公众号 - Android补给站(PayneDev),作者:Rouse

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android Architecture Components Part2:LiveData

    感谢你的再次光临,欢迎来到Android Architecture Components(AAC)系列文章。上篇文章我们一起讨论了Room,通过Room我们能够...

    Rouse
  • What? 你还不知道Kotlin Coroutine?

    今天我们来聊聊Kotlin Coroutine,如果你还没有了解过,那么我要提前恭喜你,因为你将掌握一个新技能,对你的代码方面的提升将是很好的助力。

    Rouse
  • What? 你还不知道Kotlin Coroutine?

    今天我们来聊聊Kotlin Coroutine,如果你还没有了解过,那么我要提前恭喜你,因为你将掌握一个新技能,对你的代码方面的提升将是很好的助力。

    Rouse
  • 经典JS闭包面试题

    大部分人都会做错的经典JS闭包面试题 目录 由工作中演变而来的面试题 JS中有几种函数 创建函数的几种方式 三个fun函数的关系是什么? 函数作用域链的问题 到...

    逸鹏
  • CodeBlocks 安装及配置

    CodeBlocks 是最适合gfortran的IDE,可以说是量身打造,配置也不复杂。而且体量很小,跟vs动不动就几个G甚至十几个G相比,那是小巫见大巫了。C...

    fem178
  • SpringBoot整合shiro从初恋到失恋

    另外三个跳转页面就不贴出来了,panpan账号登录可以查看和删除,用xiaoli账号登录则只有查看而没有删除的权限,代码见下面,sql文件在resources包...

    道可道非常道
  • node模块加载层级优化

    模块加载痛点 大家也或多或少的了解node模块的加载机制,最为粗浅的表述就是依次从当前目录向上级查询node_modules目录,若发现依赖则加载。但是随着应用...

    欲休
  • AJAX跨域完全讲解

    AJAX跨域完全讲解 今天在慕课网上学习了AJAX跨域完全讲解:https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实...

    Java3y
  • 关于洗牌的研究(三)——洗牌过程建模

    写再前面:本系列作品由MathMagician独家首发,一共有七篇,从数学和魔术两个角度对日常生活中“洗牌”这一现象作了挂一漏万的分析。之所以说是挂一漏万,是因...

    magic2728
  • JS笔记(三):数组、函数、类

    free赖权华

扫码关注云+社区

领取腾讯云代金券