很早之前就想总结一篇关于怎么去查看视图结构的文章,今日终于抽了点时间来完成进阶霸业 ~
之所以会去学习这些查看视图结构的工具,主要是为了布局优化做准备
xml 自带视图分析
1.右侧的预览布局,根据图中操作
2.多个视图在同一部位覆盖,此方式查看结构就比较够呛了
3.在多个视图不覆盖同一区域下的话,简单查看结构还是可以做到的
正式讲解视图结构
主要通过三种方式全方位查看View结构,哪种也可以用,哪种也都在进步 ~
Component Tree(直观视图结构)
主要用于查看当前xml的层级结构,根布局为xml的根布局
1.选取Desgin
2.最终结果
3.扩展讲解Palette(翻译:调色板),个人认为主要作用于拖拽,不建议使用
Layout Inspector - Tree View(底层代码树形视图结构)
主要用于当前xml的总体布局,根布局为Phone Window,相比前者布局结构更完善
1.打开Layout Inspector工具
As3.0之前 - Tools - Android - Layout Inspector
As3.0之后 - Tools - Layout Inspector
2.执行流程
当运行的时候遇到这样的错误,请使用ADB关闭其他应用程序:Monitor、DDMS、Eclipse ,当然可以重启尝试,这里要记得系统会提示你让你允许调用调试权限,记得确定
3.选取对应的包名
4.最终结果
Hierarchy Viewer(可视化树形视图结构)
一种相对古老的工具了,兼容了Ecplise和As,最早的时候是通过DDMS进行启动的,后来As可以通过插件启动了 ~
据说AndroidStudio3.0、3.1之后此工具Android原开发团队将不再维护
前提
- 添加到你的 build.gradle
build.gradle(Project)
allprojects {
repositories {
google()
jcenter()
maven {url "https://jitpack.io"}
}
}
build.gradle(Module)
compile 'com.github.romainguy:ViewServer:017c01cd512cac3ec054d9eee05fc48c5a9d2de'
- 清单文件添加权限
<uses-permission android:name="android.permission.INTERNET" />
- 然后注册查看服务器到您想要检查的活动
public class MyActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set content view, etc.
ViewServer.get(this).addWindow(this);
}
public void onDestroy() {
super.onDestroy();
ViewServer.get(this).removeWindow(this);
}
public void onResume() {
super.onResume();
ViewServer.get(this).setFocusedWindow(this);
}
}
如您没有设置前提条件,那么如博友文中所说一样,由于一直都是用真机开发,启动之后,发现没有看到应有的效果,出现了下面的错误:
2016-04-15 15:44:26 - hierarchyviewer]Unable to get view server version from device 2d2843d
[2016-04-15 15:44:26 - hierarchyviewer]Unable to get view server protocol version from device 2d2843d
那么可以尝试使用下方的解决方案,此方案来自Stack Overflow 的这篇文章:Android Debug Monitor层次结构视图不显示
解决步骤:
主要就是通过DDMS去查看视图结构,但是As3.0之前与As3.0之后启动DDMS的方式不太一样;
此篇粗略介绍,如想具体了解的可以查看我的另一篇文章 - DDMS调试之旅
- As3.0之前 - 启动方式
1.AndroidStudio - Tools - Android - Andorid Device Monitor(设备监控)
2.打开后呈现的视图
3.因为初次进入的时候并没有Hierarchy View,所以我们需要进行添加
注:担心大图看不清楚,故放小图一张> <
4.最终效果
- DDMS通用 - 启动方式
1.通过sdk - tools 激活工具
2.成功激活工具
注:如无视图查看器,可看下图操作