Androidでは便利なUIのAPIがたくさんありますが、便利なゆえにどうしてもそれらを適当に配置しがちです。効率的に表示するためにはHierarchy Viewerを活用して表示を高速化する必要があります。

Hierarchy Viewerとは

Hierarchy ViewerはActivityで利用するViewの表示にどのくらいの時間がかかったかを計測してくれるツールです。通常は、Android SDKに付属されており、Android SDKのインストールされているディレクトリのtoolsディレクトリ以下に存在します。

Hierarchy Viewerを利用する

では実際にHierarchy Viewerを利用してみましょう。
Android Studioの場合には、メニューから、Tools > Android > Monitor (DDMS included)とたどってMonitorを起動します。

起動後は任意のアプリを起動して、Load View Hierarchyをクリックします。するとViewが木構造で図示されます。Viewの構造が図示された後に、任意のノード上でクリックすると、Viewの表示にかかった時間を表示します。

Hierarchy Viewerを利用するとViewが階層構造で表示される

Hierarchy Viewerを利用するとViewが階層構造で表示される

Hierarchy Viewerを使って画面の表示を高速化する

続いてはアプリを高速化するためにソースコードを改善していきましょう。例えば、以下のようなListViewを表示するアプリが存在したとします。

ListViewを表示するアプリ。タイムラインを表示するようなレイアウト構造になっている

ListViewを表示するアプリ。タイムラインを表示するようなレイアウト構造になっている


このActivityのレイアウトのxmlファイルは、高速化前はこのようになっていました。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/list_item_imageView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@android:drawable/sym_def_app_icon"/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="@+id/list_item_mainTextView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="This is a listViewItem."
android:textSize="16dp"/>
<TextView
android:id="@+id/list_item_timeStampTextView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="03/01 10:08 2014"/>
</LinearLayout>
</LinearLayout>
このソースコードを利用したアプリを起動して、Hierarchy Viewerで表示にかかった時間を確認すると、以下のようになりました。
  • 51views
  • Measure: 20.000ms
  • Layout: 20.000ms
  • Draw: 40.000ms
高速化前のxmlファイルを利用したアプリの表示にかかった時間

高速化前のxmlファイルアプリの表示にかかった時間


LinearLayoutの中にさらにLinearLayoutが存在するので、構造が深くなり、表示に遅れが生じています。基本的にAndroidで画面レイアウトする際は、なるべく構造が深くならないようにします。そこで、画面レイアウトの見た目はそのままに、先ほどのソースコードを以下のように改善しました。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/list_item_imageView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@android:drawable/sym_def_app_icon"
android:layout_alignParentLeft="true"/>

<TextView
android:id="@+id/list_item_mainTextView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="This is a listViewItem."
android:textSize="16dp"
android:layout_toRightOf="@+id/list_item_imageView"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"/>

<TextView
android:id="@+id/list_item_timeStampTextView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="03/01 10:08 2014"
android:layout_toRightOf="@+id/list_item_imageView"
android:layout_below="@+id/list_item_mainTextView"
android:layout_marginLeft="5dp"/>
</RelativeLayout>
LinearLayoutを減らして子要素をRelativeLayoutにまとめることで階層構造が1段階減りました。この変更でも、Activityの見た目には何ら影響がありません。

改善をしたのでもう一度Hierarchy Viewerを使い、表示にかかった時間を調べます。結果は以下の通りです。
  • 41views
  • Measure: 10.000ms
  • Layout: 20.000ms
  • Draw: 40.000ms
レイアウトの階層を1段階減らしたもの。表示速度が改善されている

レイアウトの階層を1段階減らしたもの。表示速度が改善されている

階層を減らしたので、表示するViewの数が減っています。さらに、表示にかかった時間も減少しています。

今回は非常に簡単な構造のアプリでしたので、レイアウトの改善による表示パフォーマンスの向上はわずかでしたが、アプリに機能がたくさん加わっていくと、表示するViewの数も増えていくと思います。そのような場合には今一度、無駄なViewを利用していないか確認されると良いと思います。



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。