CodeZine(コードジン)

特集ページ一覧

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2020/06/26 11:00

 2020年5月28日に、Android Studio 4.0がリリースされました。2017年10月のバージョン3.0以来、およそ3年ぶりのメジャーアップデートとなります。デザインのための新機能を中心に、リッチなUIをより少ない労力で作り上げるための工夫がたくさん入ったバージョンとなりました。本記事では、バージョン4.0で追加された機能の概要を紹介します。

目次

対象読者

  • Android Studio 4.0の新機能を把握したい方

前提環境

 筆者の検証環境は以下の通りです。

  • macOS Catalina 10.15.5
  • Android Studio 4.0
  • AndroidX ConstraintLayout 2.0.0-beta6

Android Studio 4.0の概要

 Android Studio 4.0では、特にデザインツールやビルドツールの面で多くの改善が行われました。公式ブログから、代表的な変更をいくつか抜粋します。

  • デザインに関する分野
    • 「MotionLayout」のアニメーションをGUIから作成・編集・プレビューできる「モーションエディタ」が新たに追加された
    • レイアウトインスペクタが改善され、リアルタイムかつ直感的に実機で描画されたレイアウトを確認できるようになった
    • さまざまな設定でレイアウトのプレビューを比較できる「レイアウトバリデーション」が追加された
  • 開発・分析の分野
    • CPUプロファイラのUIが改善され、CPUの稼働効率を確認しやすくなった
    • R8(旧ProGuard)のルールエディタにシンタックスハイライトなどの支援が追加された
  • ビルドの分野
    • 「ビルドアナライザ」でビルド全体のうちどのタスクに時間がかかっているのか見つけやすくなった
    • Java 8の標準ライブラリをminSdkVersionの制限なく利用できるようになった
    • フィーチャーモジュールに依存するダイナミックフィーチャーモジュールを作成できるようになった
    • build.gradleでビルド機能のオン/オフを切り替えるためのフラグが整理された
    • ビルドスクリプトとして「.kts」ファイルが正式サポートされた

 どの機能も、アプリ開発の中での細かい不便を解消する、よい改善になっています。それでは、具体的にどのような改善になっているのか、見ていきましょう。

モーションエディタについて

 まずは、Android Studio 4.0最大の目玉と言っても過言ではない、モーションエディタについて解説します。モーションエディタは、「MotionLayout」でビューをどのように動かすか(モーション)の設定を、Android Studio上のGUIで作成・編集するための機能です。従来はXMLで記述していた設定を、より直感的に設定できるようになりました。 

MotionLayoutのおさらい

 「MotionLayout」は、ビュー同士の関係性に制約をつけるためのレイアウトである、「ConstraintLayout」のサブクラスです。静的なレイアウトを定義するだけであれば、「ConstraintLayout」と同じ使い方ができますが、XMLで記述した「MotionScene」というデータを読み込ませることで、レイアウトにモーションを付与することができます。

 「MotionScene」には、次の3つのデータを定義します。

  • 開始時点でのレイアウト状態(constraintSetStart)
  • 終了時点のレイアウト状態(constraintSetEnd)
  • レイアウトを変化させる設定(transition)

 レイアウト状態は「ConstraintSet」という単位で定義されます。全体としては、図1のような関係になります。

図1:MotionLayoutに設定する項目
図1:MotionLayoutに設定する項目

 これを実行して丸をクリックすると、丸のビューが1秒かけて左上から右下にアニメーションする姿が見られます。これが「MotionLayout」です。

モーションエディタの始め方と概要

 それでは、新機能のモーションエディタをどのように使えばいいのか、確認していきましょう。まずは、通常の「ConstraintLayout」で作られたレイアウトをレイアウトエディタで開き、デザインエディタ上を右クリックします(図2)。

図2:レイアウトエディタでメニューを表示する
図2:レイアウトエディタでメニューを表示する

 「Convert to MotionLayout」という項目が現れるので、クリックします。すると、図3のように確認のUIが出てきます。

図3:MotionLayoutに変換してもよいかを確認するUI

図3:MotionLayoutに変換してもよいかを確認するUI

 ここで「Convert」を選択すると、レイアウトファイルが「MotionLayout」ベースに書き換えられ、付随する「MotionScene」のXMLファイルも作成されます。レイアウトファイルはリスト1のようになります。

[リスト1]res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_main_scene"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.motion.widget.MotionLayout>

 また、「MotionScene」のXMLファイルはリスト2のようになります。

[リスト2]res/xml/activity_main_scene.xml
<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <!-- レイアウトを変化させる設定 -->
    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
       <KeyFrameSet>
       </KeyFrameSet>
    </Transition>

    <!-- 開始時点でのレイアウト状態 -->
    <ConstraintSet android:id="@+id/start">
    </ConstraintSet>

    <!-- 終了時点のレイアウト状態 -->
    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

 リスト2の設定では、開始時点と終了時点で変更がないため、全体としては「何もしない」というモーションが設定されたことになります。

 「MotionLayout」を成立させるための一通りの設定ができましたので、「res/layout/activity_main.xml」をレイアウトエディタで見てみましょう(図4)。

図4:モーションエディタ
図4:モーションエディタ

 レイアウトエディタの右側に、モーションエディタが現れました。モーションエディタは図5のような構造をしています。

図5:モーションエディタの概要
図5:モーションエディタの概要

 「Transition」や、StartまたはEndの「ConstraintSet」をクリックして選択すると、下部のプレビューが切り替わります。また、Attributes(属性)も連動してプロパティを表示するので、モーションエディタを本格的に運用する場合は、レイアウトエディタのUI配置を図6のような形にするとよいでしょう。

図6:モーションエディタ利用時のおすすめの配置
図6:モーションエディタ利用時のおすすめの配置

 これで、モーションエディタを利用する準備が整いました。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5