Android轻量级Layout Inspector工具

效果图

layout inspector工具效果

若想使用该工具,请点我

为什么要做这个工具

如果有更好的轮子用,谁愿意造轮子。

在21年年初的时候,我被调到公司的另外一个项目,这个项目有几个特点:历史非常的悠久,使用的技术落后,项目工程复杂,代码量巨大,界面布局层次特别深。
这么庞大的项目对于我这个“新人”来说,找个功能的实现,或者找某个view的点击事件是在哪实现的,或者某个view所属的layout是啥等等 都很困难。

通过阅读项目的源码来找具体功能点是可行的(比如找某个view的点击事件在哪,大致步骤是先找到Activity进而找到布局layout文件,进而找到view的id,再去找这个id在什么地方设置了click事件),这种方法确实可行,但是效率低下。

那有没有高效率的方法呢,我想到了android studio(以下简称as)自带的layout inspector工具,通过它可以知道界面中view的id及其他元素信息,通过view的id可以在as中全局搜索,从而定位到具体的layout和代码位置(这只是基于全局只存在一个唯一的id情况)。

当我使用as的layout inspector工具时候,现实给了我重重的一棒,不知道是我们app复杂的原因,as的layout inspector在检测中经常会导致app死掉(检测工具报oom导致app死掉),并且检测过程中经常会出现检测不到设备的问题或者一直处于检测中等问题(不可否认as后面的版本肯定会把这些问题都修好的)。

因此我就想自己是否能做一个这样的工具,这个工具可以 直接在手机上显示view的属性(宽高,坐标,id值等等,甚至开发者自己可以扩展属性,可以显示点击事件/长按事件的具体代码位置,view控件的所属的layout文件名称和被inflate的位置),不仅可以为开发人员提供服务,同时也可以为设计人员提供服务

轻量级Layout Inspector工具都有哪些功能

1.菜单

菜单会显示在每个activity上的左上部分,是可以拖动的(若阻碍了当前界面操作)

显示 菜单:点击它后,会把当前界面的所有view的边界,pading,margin 显示出来,这时候文本变为 隐藏。这时候点击每个view都会显示view信息的界面,view的真正点击事件不会触发(若需要触发,再次点击该菜单,隐藏上面的界面),如下图

view的margin, padding

更多 菜单

更多菜单内容

padding,margin显示样式说明
屏幕的宽 高
当前activity,activity layout的信息
当前的fragment以及总共显示了多少fragment
pading,margin等尺寸的单位:可以选择dp或px
ViewGroup显示View检测器:点击是表面显示它的检测器, 点击否 不显示
显示view margin:是 绘制所有view的margin, 否 不绘制
显示view padding:是 绘制所有view的padding, 否 不绘制

2.显示view的margin,padding
view的margin, padding
margin

上图 浅蓝色的箭头,代表view的margin,箭头的朝向分别代表不同方向的margin如left, right, top ,bottom,箭头的长度越大代表margin值越大

padding.png

上图 浅蓝色的矩形框,代表view的padding,处于view的上部分代表padding top,下部分代表padding bottom,左部分代表padding left,右部分代表padding right。矩形框高度越大代表padding值越大。

红色线条,代表view的边界线

3.显示view的属性
view的id,size,坐标,布局,click信息

图中元素说明:
绿色框代表当前被检测的view
弹出的深蓝色框包含:控件属性控件层级
文本为 可点击 背景框为红色的项:代表该项是可以点击的

3.1 显示view的id,类名

3.2 view检查器:点击不现实该view的检查器 它主要用于:view层级出现覆盖的时,想查看最底层view的属性时,可以点击此项,不显示最上层的view的检查器。

3.3 所属布局名称,布局被inflate位置 这两项非常的有用,前者可以显示当前的view所属的layout名称,后者可以显示layout布局被inflate的位置(类名#方法名#行号),甚至可以在as的logcat中搜索LayoutInspector的tag,可以直接点击这个log跳转到具体代码位置

3.4 是否设置onClickListener,onClickListener位置 这两项在查找view的onClickListener信息的时候非常有用,onClickListener位置包含 类名#方法名#行号 信息(可以在as的logcat中搜索LayoutInspector的tag,可以直接点击这个log跳转到具体代码位置

3.5 是否设置onLongClickListener,onLongClickListener位置 这两项在查找view的onLongClickListener信息的时候非常有用,onLongClickListener位置onClickListener位置

3.6 显示size, layout_width, layout_height, 坐标(x , y)

padding, margin, activity

3.7 显示view的padding,margin信息 这两项也是非常有用,在和设计同学走查ui的时候,开发同学深有体会,明明是按设计的尺寸写的值,设计同学会觉得不对,这时候咱们就可以用数据来说话了。同时也为设计同学带来了方便,想检查哪个view的信息时候,自己就可以操作了。

动态修改view属性 是一个小功能 ,比如点击paddingTop这一项,会弹出一个 对话框,可以动态的修改paddingTop的值,这个功能可以提高 与设计同学走查ui的效率(不需要重复 在代码或布局文件中修改属性值,启动app查看效果这个过程),动态修改到合适的值后,再去代码或布局文件中修改,启动查即可)

3.8 对于TextView显示textcolor,和textsize 同样它们也可以适用 动态修改view属性 这个功能

3.9 显示当前activity和activity layout信息

4.显示view的层级(点击上面的 view的margin, padding图 中的任意view会出现下面的图)
控件层级

上图元素说明:
绿色字体:代表当前被查看的view

由于担心显示的view实在过多的原因,暂时只会把当前view的子view和它的兄弟view给显示出来,当前view的祖先view不会罗列这些信息。
点击对应项的view会显示该view的属性和层级信息

5.显示Dialog的信息
dialog

Dialog的处理要稍微特殊一些,为了简洁化,把 更多 菜单去掉了,其他的操作,显示的属性信息都与上面介绍的一样。

6.显示PopupWindow的信息

在这就不展示图片了,可以查看文章开始的gif图

若想使用该工具,请点我

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,869评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,716评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,223评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,047评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,089评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,839评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,516评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,410评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,920评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,052评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,179评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,868评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,522评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,070评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,186评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,487评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,162评论 2 356

推荐阅读更多精彩内容