SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

アプリケーション開発の最新トレンド

リッチなUIを作りやすくなったAndroid Studio 4.0の新機能を知ろう


モーションエディタでビューを動かす

 それでは、実際にビューを動かす設定をモーションエディタ上で行ってみましょう。今回は"Hello World"の 「TextView」を動かしてみます。

 まずは開始状態を設定するために、モーションエディタ上の「start」を選択します。プレビューを見ると、まだ開始状態の「ConstraintSet」にレイアウト上の「TextView」が紐づいていないことがわかります(図7)。

図7:TextViewがConstraintSetに紐づいていない
図7:TextViewがConstraintSetに紐づいていない

 この場合は、ビューを選択して、右上の編集ボタンをクリックすると「Create Constraint」のメニューが現れるので、これをクリックして実行します(図8)。

図8:Constraintを作成してビューを紐付ける
図8:Constraintを作成してビューを紐付ける

 すると、図7では空だった「Constraint」の欄にチェックが入ります(図9)。

図9:ConstraintSetにTextViewが紐づいた状態
図9:ConstraintSetにTextViewが紐づいた状態

 これで、「TextView」が 「MotionLayout」の操作対象になりました。終了状態のほうにも同様の操作を行います。

 ようやく開始状態のレイアウトを操作できるようになりました。モーションエディタで開始状態を選択したまま、左側のデザインエディタで「TextView」を左上に動かします(図10)。

図10:開始状態を作る
図10:開始状態を作る

 通常のレイアウトエディタで「ConstraintLayout」を扱うときと同様に、Attributesに設定内容がリアルタイムに反映され、細かく設定できます。

 終了状態にも同様の操作を行い、「TextView」を右下に動かしましょう。

図11:終了状態を作る
図11:終了状態を作る

 これで、最も単純な「MotionScene」が作成できました。動作を確認するには、モーションエディタの矢印をクリックして、「Transition」のプレビューを開きます(図12)。

図12:Transitionのプレビュー
図12:Transitionのプレビュー

 デザインエディタに移動の経路が表示されました。再生ボタンをクリックすると、実際に動く様子が見られます(図13)。

図13:Transitionを再生する
図13:Transitionを再生する

 このようにGUI上で動作を確認できると、トライアンドエラーが捗りそうです。

レイアウトインスペクタの刷新

 レイアウトインスペクタにも大きな更新がありました。以前から、デバッグモードで動作中のアプリのレイアウト階層を閲覧する方法はありましたが、あまり直感的ではありませんでした。今回刷新されたレイアウトインスペクタでは、より直感的にレイアウトのデバッグができるようになっています。

 レイアウトインスペクタは右下のツールウィンドウから開きます(図14)。

図14:レイアウトインスペクタの入り口
図14:レイアウトインスペクタの入り口

 レイアウトインスペクタを開いて、アプリのデバッグを開始すると、図15のような見た目になります。

図15:新しいレイアウトインスペクタ
図15:新しいレイアウトインスペクタ

 左ペインにコンポーネントツリー、中央ペインにプレビュー、右ペインに属性というレイアウトになり、レイアウトエディタと似た見た目になったことがわかります。レイアウトインスペクタで見つけた問題を、レイアウトエディタで解決するときにどこを見ればよいのか、とてもわかりやすくなりました。

ライブレイアウトインスペクタ&ローテーション

 レイアウトインスペクタの新機能はこれだけではありません。API Level 29(Android 10)以降で使える機能として、リアルタイムにレイアウト情報が反映される「ライブレイアウトインスペクタ」と、3Dでレイアウト階層を確認できる「ローテーション」が追加されました。

 ライブレイアウトインスペクタは、図16のチェックボックスをオンにすることで有効になります。

図16:ライブレイアウトインスペクタを有効にする
図16:ライブレイアウトインスペクタを有効にする

 また、ローテーション機能は、右下の四角いアイコンをクリックすることで有効になります(図17)。

図17:ローテーション機能を有効にする
図17:ローテーション機能を有効にする

 ローテーション機能を使うことで、複雑なUIでも階層を直感的に把握できるようになります(図18)。

図18:ローテーション機能
図18:ローテーション機能

 リアルタイムかつ直感的にレイアウトの状態を確認できるようになるため、現場で重宝する機能になりそうです。

レイアウトバリデーション

 これまでも、レイアウトのプレビュー時に、デバイスサイズや言語設定、ダークモードの有無などを切り替えることはできましたが、複数の設定を一度に表示して、見比べることはできませんでした。今回追加された「レイアウトバリデーション」では、複数の設定を別々に表示し、レイアウトがどのように変化するのかを見比べられるようになりました。

 レイアウトバリデーションは、レイアウトエディタを開いているときに右側のツールウィンドウから開きます(図19)。

図19:レイアウトバリデーション
図19:レイアウトバリデーション

 比較分野はいくつか選択できますが、初期表示ではGoogle公式Android端末である歴代Pixelシリーズの画面サイズを比較できる、「Pixel Devices」という項目になっています。画面サイズごとにレイアウトにどのような差が出るのかを比較するためのものです。

 他の比較分野として、さまざまな色盲のパターンで画面の見やすさを比較する「Color Blind」と、システム側のフォントサイズ設定によるレイアウト崩れを確認するための「Font Sizes」がプリセットで用意されています。

開発関連の改善と新機能

 開発に関連する新機能としては、「CPUプロファイラ」の改善と、R8のルールエディタの改善があります。

 CPUプロファイラは、デバッグ中にどのスレッドがどの程度CPUを使っていたかを計測するための機能です。画面下部の「Profiler」のツールウィンドウから使うことができます(図20)。

図20:CPUプロファイラ
図20:CPUプロファイラ

 効率よくCPUを使用したい場合に確認するとよいでしょう。

 もう一つの大きなトピックがあります。R8(旧ProGuard)のルールを記述するためのエディタが整備され、シンタックスハイライトや補完が効くようになりました(図21)。

図21:R8の設定ファイル
図21:R8の設定ファイル

 従来は、文法やパッケージ名の間違いに気づかないままリリースビルドが失敗した場合、その原因を究明するために多くの時間を費やしていました。しかしこの機能によって、より正しい設定ファイルを記述できるようになりそうです。

ビルド関連の改善と新機能

 ビルドに関する分野では、「ビルドアナライザ」という新機能が追加されました。ビルドの完了時に、リンクが表示されるので、ここから開きましょう(図22)。

図22:ビルドアナライザの入り口
図22:ビルドアナライザの入り口

 ビルドアナライザは、ビルドのどのタスクにどの程度の時間がかかっているのかを確認するための機能です(図23)。

図23:ビルドアナライザ
図23:ビルドアナライザ

 各タスクの実行にかかった秒数が表示されるので、想定外に時間がかかっているタスクが見つけやすくなり、対策が取れるようになります。

次のページ
Android Gradle Pluginの改善

この記事は参考になりましたか?

アプリケーション開発の最新トレンド連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川 幸哉(ナカガワ ユキヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/12450 2021/10/20 10:57

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー