同事用Compose写的Ui,怎么找代码在哪里?

304 阅读2分钟

一个阳光明媚的早晨,有个产品需求从天而降,说要在这个弹窗上加个文案:

当然这个页面过分简单,只是举了个Demo

即然要接盘别人写的代码,首先,就得根据UI把对应的代码找出来。再品一品。

但是!!!

这个弹窗是写在哪里了呢?

最快的方法,就是群里找同事问问:

“谁见过这个代码[通常还带一个狗头] ?”

然后答案就来了~

但是!!!

万一这段陈年老码,已经隐世多年,无人知晓了呢?

只能使出搜索大法,看看Ui附近都出现了哪些字符串,赶紧全局搜一搜

终于搜到了,才下眉头,却上心头。

居然只是个资源id,还要顺藤摸瓜地找上去。

但是!!!

万一根本搜不到呢?这个弹窗居然是张可配的图片!

遇到是非固定文本的Ui怎么办呢?

甚至想看Dialog有多少个引用的心都有了?

不怕!!!

说时迟,那时快,果断打开了一个找代码神器:

只要手指点击屏幕上要找的元素,面板上就会出现Ui的层级以及对应的代码位置

好家伙,果然是个图片[狗头]~

这里看到Image所在的位置是DemoDialogFragment.kt的57行~

在IDE里面打开看看:

成功的找到了Ui对应的代码! 接下来就可以磨刀霍霍了。

有了这个工具,再也不怕老板问我今天干了啥,

我只能说

“——正在深入了解业务体系,并做好充分的心理建设,顺便熟悉下代码。”

回想起当年接入这个工具的时候,就只需要在build.gradle中声明:

dependencies { //在mavenCentral
    debugImplementation "io.github.yvescheung:Uinspector:2.0.10"
    // 如果有用Jetpack compose,要加这个
    debugImplementation "io.github.yvescheung:Uinspector-optional-compose:2.0.10"
    // 如果要支持 Glide 等额外的属性,要加这个
    debugImplementation "io.github.yvescheung:Uinspector-optional-glide:2.0.10"
    // 还有其他一些扩展库,可以在github上面查看... 
}

然后就完事了!不需要写任何代码,就可以在通知栏中开启这个工具!

除了Jetpack compose以外,普通的View也可以用它来找所在的Fragment

如果对实现原理有兴趣的话,就到github/UInspector上看看吧。

一个阳光明媚的早晨,要开始去写弹窗了。告辞。