90
97

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Viewの構造を丸見えにするHierarchy Viewerの使い方

Posted at

Android SDKにはViewの階層を確認できるHierarchy Viewerというツールが入っています。

Activityの中にViewPagerが入っててFragmentがあって中にListViewがあってアイテムのレイアウトがあって中にはpartialレイアウトがあって、実際今見ている画面のレイアウトどうなってんの?みたいな時も一目で階層構造がわかります。

Viewの中でどこがどのくらいの時間でレンダリングされたかも確認できるので、ボトルネックを探す時にも役立ちます。そんなHierarchy Viewerの使い方メモです。

#ViewerServerの導入

Hierarchy Viewerは、ルート化された端末 or エミュレータじゃないと動きません。最新のAndroid SDKのツールだと動くらしいんですが、自分のGalaxy Note3だと動きませんでした。

そういう時は、ViewServerを入れると動きます。導入の仕方はこちらの記事がわかりやすかったです。 ⇒ 非rootなAndroid端末でHierarchy Viewerを使う方法

#起動
公式ドキュメントにはAndroidSdk/tools/hierarchyviewer で起動すると書いてあるんですが、実際に打ってみるとそれは古いからAndroid Device Monitorを使えと言われます。

% ~/AndroidSdk/tools/monitor

Android Studioを使っている場合は、ツールバーのアイコンをクリックします。

fragment_home_timeline_shallow_xml_-app-android-layout-performance-__work_android-layout-performance-_Android_Studio__Beta__0_8_14.png

起動直後はHierarchyViewが表示されていないので、右上の方のアイコンから起動します。

Android_Device_Monitor.png

#端末に表示されているView階層を見る
端末をUSBでつないで、接続が確認できると、右側にアプリが表示されます。

Android_Device_Monitor.png

最初は何も表示されていないので、手動でリロードしてやる必要があります。

Android_Device_Monitor_と_Android_Tools_Updated.png

表示はできてもこんな感じでMeasureやLayoutにかかった時間が表示されないことがあります。

Android_Device_Monitor.png

そういう時は、このアイコンをクリックして少し待つと表示されるようになります。

Android_Device_Monitor_と_Android_Tools_Updated.png

ビューの簡単な説明

Tree Overview

オーバービューには全体の階層が表示されています。□でかこまれた領域がTreeViewに表示されます。

Layout View

現在のレイアウトが表示されています。ここを見たい、というレイアウトを選択すると、その位置にTreeViewが移動します。

Tree View

各レイアウトの要素の詳しい情報が表示されます。Measure、Layout、Drawにかかった時間や、どこが遅いか等が視覚的にわかります。

Android_Device_Monitor.png


Googleの提唱するパフォーマンスTipsでは、Viewの構成は浅く広く作るのがよいとされています。

Hierarchy Viewで言えば、Tree Overviewを見た時に横に長くなるレイアウトよりも縦に長くなるレイアウトの方が望ましいということです。

結構動きが重くて若干使いづらいツールですが、Viewの最適化の第一歩として現状のレイアウトの状態を知るのにはとてもよいと思うので、参考にどうぞ!

90
97
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
90
97

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?