#iOS | #Android ファショ通

「アプリを作ったけど なぜか表示が遅い」

そのようなレンダリング時間の改善するための方法のひとつとして GPUオーバードローツールを利用しましょう.

「オーバードロー」とは?

アプリがシステムに他の何かの上に描画することを「オーバードロー」といいます.「GPUオーバードロー」ツールを使うとそのピクセルが何回再描画されたか画面上に色をかぶせて表示させることができます.

GPUオーバードローツールを有効化する

以下ので順で有効化します.

1.「設定」
2.「開発者向けオプション」
3.「GPUオーバードローをデバッグ」
4.「オーバードロー領域の表示」

画面の色が変化したと思います.

あなたのアプリを開いてレイアウトの改善を行ってみましょう.

変化した色の違いは何を表しているのか?

画面上のピクセルに対してオーバードローを行った回数を表しています.

オリジナル色
– オーバードローなし
– そのピクセルは一度だけ塗りつぶされた
青
- 1回 オーバードロー
- そのピクセルは2回塗りつぶされた
緑
...
ピンク
...
赤
...

どのようにオーバードローを改善するか?

たとえば, RelativeLayout のbackground color を削除して テーマのみにbackground color を描画させる.

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFFFFF">

↓

<RelativeLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent">

これにより, オリジナル色と青色のオーバードローが少しに改善させることができました. いくつかのオーバードローは避けることができません.

オーバードローがすべて背景色に関連しているわけではありません. 非常に複雑なレイアウト階層構造の多すぎるビューの中にたくさん存在すると思われます。

オーバードローが発生している理由は, Hierarchy Viewer や GL Tracer などのツールで確認することができます.

Hierarchy Viewer Walkthrough | Android Developers

Tracer for OpenGL ES | Android Developers

まずは, 最大で2回のオーバードロー(緑)を目指してみましょう.

Optimizing Layouts in Android - Reducing Overdraw - Riggaroo

Debug GPU Overdraw Walkthrough | Android Developers