HierarchyViewer a lo loco

HierarchyViewer a lo loco

Gracias a Fernando Cejas (@fernando_cejas, un gran tipo) de Android 10, llego a un pequeño módulo escrito por Romain Guy que sirve para utilitzar Activites en un dispositivo Android real como servidor de vistas para HierarchyViewer.

¿Lo que de lo cualo? Calma, que ahora me explico. Ya sabes…. “leer más”….
Gracias a Fernando Cejas (@fernando_cejas, un gran tipo) de Android 10, llego a un pequeño módulo escrito por Romain Guy que sirve para utilitzar Activites en un dispositivo Android real como servidor de vistas para HierarchyViewer.

¿Lo que de lo cualo? Calma, que ahora me explico. Ya sabes…. “leer más”….

Un visor para atarlos a todos en las sombras

HierarchyViewer es una fabulosa herramienta del SDK de Android que todo desarrollador de Android debería utilitza asiduamente. ¿Y para que sirve? pues es capaz de mostrarnos la jerarquía de objetos de los layouts cargados en el emulador de Android que tengamos arrancado (en principio, luego veremos cómo saltarnos esta restricción).De esta manera, disponemos de información muy valiosa de como se inflan las vistas en runtime, así como tamaños finales que obtenemos.

Para utilizarlos, debemos ejecutar el programa hierarchyviewer.bat, que encontrareis en la carpeta tools del SDK de Android.

Una vez arrancado, busca dispositivos a los que poder preguntar por layouts cuya jerarquía pueda cargar. Repito, sólo os funcionará con el emulador o bien con alguna ROM que lo tenga activado, los dispositivos físicos con el SO de fábrica suelen tenerlo desactivado.

Si seleccionamos uno de estos layouts y hacemos clic en el botón “Load View Hierarchy”, nos mostrará un bonito esquema de árbol con toda la jerarquía de nuestro layout. Aquí un ejemplo:


Hay varios elementos interesantes, como por ejemplo la ventana de propiedades que hay a la derecha, que nos mostrará las propiedades del elemento seleccionado, o el mapa del layout justo debajo, donde vemos la “sombra” de todos los elementos, y si seleccionamos uno elemento aquí también se seleccionará en el arbol.

En el arbol, en cada nodo se nos muestra:

  • El tipo de View (TextView, RelativeLayout, etc, etc, etc…)
  • Su id interno
  • Su id dentro de la colección android:id
  • Tres semáforos que nos indican el rendimiento del View al calcular las medidas, al inflarlo en la layout y dibujarlo en pantalla.
  • El índice relativo del objeto dentro de su padre

Si hacemos clic en estos nodos nos da más información (cómo por ejemplo, los tiempos exactos de medida, layout y dibujo).

Tiene algunas cosas más, pero os invito a descubrirlo, que la herramienta es de uso bastante simple pero muy potente. Mi favorita es la opción Capture Layers, que nos guarda un archivo psd de Photoshop que contiene una capa por View todas ordenaditas y con la visibilidad correcta. Lo cual va de perlas para hacer prototipado (y robar la interfaz de otras apps, jiji).

ViewServer, por que no sólo de emuladores vive el desarrollador

Y todo esto venía por que yo quería hablar de la clase ViewServer del señor Romain. Pues al asunto.

La clase se puede descargar de su sitio de github: http://github.com/romainguy/ViewServer

En realidad solo necesitais el fichero ViewServer.java (/src/com/android/debug/hv). Os lo descargais y lo poneis en cualquier paquete de vuestra app (si no es el paquete com.android.debug.hv recordad que debeis cambiar la instrucción package del fichero).

Ahora es necesario añadir al permiso INTERNET al manifest, sin este permiso no funciona.  Recordad quitarlo al publicar la app si no lo necesita.

Por último debemos arrancar y parar en el sitio correcto el ViewServer en las activies cuyo layout deseemos analizar con el Hierarchy Viewer:

Y nada más. Ya podemos ejecutar nuestra aplicación en un dispositivo físico y el Hierarchy Viewer será capaz de verlo y dejarnos estrujar los layouts hasta que confiesen. ¡Disfrutadlo!

Más info:

ViewServer en gitHub | http://github.com/romainguy/ViewServer

Depuración sobre la interfaz de Android en el Developer site de Android | http://developer.android.com/guide/developing/debugging/debugging-ui.html

Un visor para atarlos a todos en las sombras

HierarchyViewer es una fabulosa herramienta del SDK de Android que todo desarrollador de Android debería utilitza asiduamente. ¿Y para que sirve? pues es capaz de mostrarnos la jerarquía de objetos de los layouts cargados en el emulador de Android que tengamos arrancado (en principio, luego veremos cómo saltarnos esta restricción).De esta manera, disponemos de información muy valiosa de como se inflan las vistas en runtime, así como tamaños finales que obtenemos.

Para utilizarlos, debemos ejecutar el programa hierarchyviewer.bat, que encontrareis en la carpeta tools del SDK de Android.

Una vez arrancado, busca dispositivos a los que poder preguntar por layouts cuya jerarquía pueda cargar. Repito, sólo os funcionará con el emulador o bien con alguna ROM que lo tenga activado, los dispositivos físicos con el SO de fábrica suelen tenerlo desactivado.

Si seleccionamos uno de estos layouts y hacemos clic en el botón “Load View Hierarchy”, nos mostrará un bonito esquema de árbol con toda la jerarquía de nuestro layout. Aquí un ejemplo:

?
Hay varios elementos interesantes, como por ejemplo la ventana de propiedades que hay a la derecha, que nos mostrará las propiedades del elemento seleccionado, o el mapa del layout justo debajo, donde vemos la “sombra” de todos los elementos, y si seleccionamos uno elemento aquí también se seleccionará en el arbol.

En el arbol, en cada nodo se nos muestra:

  • El tipo de View (TextView, RelativeLayout, etc, etc, etc…)
  • Su id interno
  • Su id dentro de la colección android:id
  • Tres semáforos que nos indican el rendimiento del View al calcular las medidas, al inflarlo en la layout y dibujarlo en pantalla.
  • El índice relativo del objeto dentro de su padre

Si hacemos clic en estos nodos nos da más información (cómo por ejemplo, los tiempos exactos de medida, layout y dibujo).

Tiene algunas cosas más, pero os invito a descubrirlo, que la herramienta es de uso bastante simple pero muy potente. Mi favorita es la opción Capture Layers, que nos guarda un archivo psd de Photoshop que contiene una capa por View todas ordenaditas y con la visibilidad correcta. Lo cual va de perlas para hacer prototipado (y robar la interfaz de otras apps, jiji).

ViewServer, por que no sólo de emuladores vive el desarrollador

Y todo esto venía por que yo quería hablar de la clase ViewServer del señor Romain. Pues al asunto.

La clase se puede descargar de su sitio de github: http://github.com/romainguy/ViewServer

En realidad solo necesitais el fichero ViewServer.java (/src/com/android/debug/hv). Os lo descargais y lo poneis en cualquier paquete de vuestra app (si no es el paquete com.android.debug.hv recordad que debeis cambiar la instrucción package del fichero).

Ahora es necesario añadir al permiso INTERNET al manifest, sin este permiso no funciona.  Recordad quitarlo al publicar la app si no lo necesita.

Por último debemos arrancar y parar en el sitio correcto el ViewServer en las activies cuyo layout deseemos analizar con el Hierarchy Viewer:

Y nada más. Ya podemos ejecutar nuestra aplicación en un dispositivo físico y el Hierarchy Viewer será capaz de verlo y dejarnos estrujar los layouts hasta que confiesen. ¡Disfrutadlo!

Más info:

ViewServer en gitHub | http://github.com/romainguy/ViewServer

Depuración sobre la interfaz de Android en el Developer site de Android | http://developer.android.com/guide/developing/debugging/debugging-ui.html

5 Comments

  1. Fernando Cejas · July 22, 2011 Reply

    Sergi, realmente te pasaste!!!..Es buenísimo!!!..Muchas gracias por los mentions, pero el mérito es tuyo!!!.Soy fan de tu blog, sos un tipo que explica muy bien las cosas. Terminaré de implementar esta solución siguiendo tu post. Un saludo y Felicitaciones. Seguí así que tus lectores estamos muy contentos. 😉

  2. sergi · July 22, 2011 Reply

    Gracias Fernando, eres un rey :)

    Se me olvidó comentar que hay que tener el adt y las herramientas actualizadas a la versión 12 para que esto funcione. Aunque francamente, no veo razón para no actualizarse a la versión 12, que está genial

  3. Dani bISHOP · August 4, 2011 Reply

    Enorme.

    Esto va de cabeza a mi activity de librería xD

  4. Jose Gil · September 9, 2011 Reply

    Muchas gracias
    Salgo corriendo a probarlo!!

  5. monojones · February 27, 2012 Reply

    Enooooorme!
    Lo de ViewerServer se sale !!

Leave a Reply