Android studio 中使用 Hierarchy Viewer

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mwthe/article/details/81043674

开发环境:Android studio 2.3.1 ;模拟器:夜神4.4

(一个小插曲,编写的过程看了一个玄门XX的电视剧,里面的女主角在我编写的时候说了一句话,“有的人一直在选择,却从未迈出过一步”,各行各业万事万物岂不都是如此)

1. 功能

Hierarchy Viewer工具提供了一个可视化界面显示布局的层次结构,让我们可以进行调试,从而优化界面布局结构。

2. 开启该功能

本人使用的工具是 AS 2.3.1,具体操作步骤如下:

2.1先打开相关工具

2.2 打开分层view视图界面


2.3 hierarchy view


如图所示,在最右侧控制台会报出一系列的错误,具体内容如下:

----------------------------------------------------------------------

[2018-07-14 17:03:57 - DeviceMonitor]Connection attempts: 1
[2018-07-14 17:03:59 - DeviceMonitor]Connection attempts: 2
[2018-07-14 17:04:01 - hierarchyviewer]Unable to get view server version from device 127.0.0.1:62001
[2018-07-14 17:04:01 - hierarchyviewer]Unable to get view server protocol version from device 127.0.0.1:62001
[2018-07-14 17:04:02 - ViewServerDevice]Unable to debug device: samsung-nexus-127.0.0.1:62001
[2018-07-14 17:04:02 - hierarchyviewer]Missing forwarded port for 127.0.0.1:62001
[2018-07-14 17:04:02 - hierarchyviewer]Unable to get the focused window from device 127.0.0.1:62001

--------------------------------------------------------------------

127.0.0.1:62001 为我夜神模拟器的地址,从字面上可以看出,当前的hierarchyviewer获取不了view server,下面给出解决方案:

第零步,在project 的builde.gradle 中配置maven库

allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

第一步,在module 的 builde.gradle中配置

compile 'com.github.romainguy:ViewServer:017c01cd512cac3ec054d9eee05fc48c5a9d2de'

 第二步,在activity中的配置

 
 
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewServer.get(this).addWindow(this);
    }

    @Override
    protected void onResume() {
        super.onResume();
        ViewServer.get(this).setFocusedWindow(this);
    }
    @Override
    protected void onDestroy() {
        super.onDestroy();
        ViewServer.get(this).removeWindow(this);
    }
}

 
 

OK,到了这一步,可能是我的PC慢吧,需要稍微等一会才能加载出来,接着应该可以在工具中呈现出了咱们需要分析的视图了


注意看上图红框内容:选中咱们需要查看的模块,然后点击可以查看子View的测量时间、布局时间和绘制时间

这里我们主要关注下面的三个圆圈,从左到右依次,代表View的Measure, Layout和Draw的性能,不同颜色代表不同的性能等级:
1) 绿: 表示该View的此项性能比该View Tree中超过50%的View都要快;例如,一个绿点的测量时间意味着这个视图的测量时间快于树中的视图对象的50%。
2)黄: 表示该View的此项性能比该View Tree中超过50%的View都要慢;例如,一个黄点布局意味着这种观点有较慢的布局时间超过50%的树视图对象。
3)红: 表示该View的此项性能是View Tree中最慢的;例如,一个红点的绘制时间意味着花费时间最多的这一观点在树上画所有的视图对象。


3.凡是爆红的绘制,那就的注意它们了,有三点优化建议,如下:

    3.1、我们可以把没有用的父布局(例如,无背景,或对UI无影响的布局),通过<merge/>标签合并来减少UI的层次;
    3.2、使用线性排版导致UI层次变深,如果有这类问题,我们就使用相对布局代替LinearLayout,减少UI的层次;
    3.3、不常用的UI,比如异常的错误页面,我们需要用<ViewStub/>标签,代替GONE提高UI性能。


###注意,以上做法只是对某一个activity的分析###


4. 上面的方法,已经可以分析UI绘制耗时了,但是需要每个activity都配置,比较麻烦,也不好维护;那么有两个方案可以解决全局的viewUI渲染分析;

        4.1  创建baseActivity ,在oncreate、onResumeonDestroy中设置,其他的activity都继承该 baseActivity    

      4.2 实现了ActivityLifecycleCallbacks接口的类,并在onActivityCreated()、onActivityResumed()和onActivityDestroyed()回调方法中添加ViewServer相关的代码;

       4.3 在应用自定义的Application类中注册监听器
         
            public void onCreate() {
            super.onCreate();
            // 如果是Debug版本,那么才注册ActivityLifecycleCallbacks监听器
            if (BuildConfig.DEBUG) {
                    registerActivityLifecycleCallbacks(new ActivityLifecycleCallbacksImpl(this));
                }
            }
     

到此,我的总结已经完毕,不知道该步骤在其他大神那表现的如何,有问题直接留言噢

示例代码: https://github.com/mawantong/MyHierarchy



猜你喜欢

转载自blog.csdn.net/mwthe/article/details/81043674