モーションエディタでビューを動かす
それでは、実際にビューを動かす設定をモーションエディタ上で行ってみましょう。今回は"Hello World"の 「TextView」を動かしてみます。
まずは開始状態を設定するために、モーションエディタ上の「start」を選択します。プレビューを見ると、まだ開始状態の「ConstraintSet」にレイアウト上の「TextView」が紐づいていないことがわかります(図7)。
この場合は、ビューを選択して、右上の編集ボタンをクリックすると「Create Constraint」のメニューが現れるので、これをクリックして実行します(図8)。
すると、図7では空だった「Constraint」の欄にチェックが入ります(図9)。
これで、「TextView」が 「MotionLayout」の操作対象になりました。終了状態のほうにも同様の操作を行います。
ようやく開始状態のレイアウトを操作できるようになりました。モーションエディタで開始状態を選択したまま、左側のデザインエディタで「TextView」を左上に動かします(図10)。
通常のレイアウトエディタで「ConstraintLayout」を扱うときと同様に、Attributesに設定内容がリアルタイムに反映され、細かく設定できます。
終了状態にも同様の操作を行い、「TextView」を右下に動かしましょう。
これで、最も単純な「MotionScene」が作成できました。動作を確認するには、モーションエディタの矢印をクリックして、「Transition」のプレビューを開きます(図12)。
デザインエディタに移動の経路が表示されました。再生ボタンをクリックすると、実際に動く様子が見られます(図13)。
このようにGUI上で動作を確認できると、トライアンドエラーが捗りそうです。
レイアウトインスペクタの刷新
レイアウトインスペクタにも大きな更新がありました。以前から、デバッグモードで動作中のアプリのレイアウト階層を閲覧する方法はありましたが、あまり直感的ではありませんでした。今回刷新されたレイアウトインスペクタでは、より直感的にレイアウトのデバッグができるようになっています。
レイアウトインスペクタは右下のツールウィンドウから開きます(図14)。
レイアウトインスペクタを開いて、アプリのデバッグを開始すると、図15のような見た目になります。
左ペインにコンポーネントツリー、中央ペインにプレビュー、右ペインに属性というレイアウトになり、レイアウトエディタと似た見た目になったことがわかります。レイアウトインスペクタで見つけた問題を、レイアウトエディタで解決するときにどこを見ればよいのか、とてもわかりやすくなりました。
ライブレイアウトインスペクタ&ローテーション
レイアウトインスペクタの新機能はこれだけではありません。API Level 29(Android 10)以降で使える機能として、リアルタイムにレイアウト情報が反映される「ライブレイアウトインスペクタ」と、3Dでレイアウト階層を確認できる「ローテーション」が追加されました。
ライブレイアウトインスペクタは、図16のチェックボックスをオンにすることで有効になります。
また、ローテーション機能は、右下の四角いアイコンをクリックすることで有効になります(図17)。
ローテーション機能を使うことで、複雑なUIでも階層を直感的に把握できるようになります(図18)。
リアルタイムかつ直感的にレイアウトの状態を確認できるようになるため、現場で重宝する機能になりそうです。
レイアウトバリデーション
これまでも、レイアウトのプレビュー時に、デバイスサイズや言語設定、ダークモードの有無などを切り替えることはできましたが、複数の設定を一度に表示して、見比べることはできませんでした。今回追加された「レイアウトバリデーション」では、複数の設定を別々に表示し、レイアウトがどのように変化するのかを見比べられるようになりました。
レイアウトバリデーションは、レイアウトエディタを開いているときに右側のツールウィンドウから開きます(図19)。
比較分野はいくつか選択できますが、初期表示ではGoogle公式Android端末である歴代Pixelシリーズの画面サイズを比較できる、「Pixel Devices」という項目になっています。画面サイズごとにレイアウトにどのような差が出るのかを比較するためのものです。
他の比較分野として、さまざまな色盲のパターンで画面の見やすさを比較する「Color Blind」と、システム側のフォントサイズ設定によるレイアウト崩れを確認するための「Font Sizes」がプリセットで用意されています。
開発関連の改善と新機能
開発に関連する新機能としては、「CPUプロファイラ」の改善と、R8のルールエディタの改善があります。
CPUプロファイラは、デバッグ中にどのスレッドがどの程度CPUを使っていたかを計測するための機能です。画面下部の「Profiler」のツールウィンドウから使うことができます(図20)。
効率よくCPUを使用したい場合に確認するとよいでしょう。
もう一つの大きなトピックがあります。R8(旧ProGuard)のルールを記述するためのエディタが整備され、シンタックスハイライトや補完が効くようになりました(図21)。
従来は、文法やパッケージ名の間違いに気づかないままリリースビルドが失敗した場合、その原因を究明するために多くの時間を費やしていました。しかしこの機能によって、より正しい設定ファイルを記述できるようになりそうです。
ビルド関連の改善と新機能
ビルドに関する分野では、「ビルドアナライザ」という新機能が追加されました。ビルドの完了時に、リンクが表示されるので、ここから開きましょう(図22)。
ビルドアナライザは、ビルドのどのタスクにどの程度の時間がかかっているのかを確認するための機能です(図23)。
各タスクの実行にかかった秒数が表示されるので、想定外に時間がかかっているタスクが見つけやすくなり、対策が取れるようになります。
