fkm blog

software開発に関することを書いていきます

Google I/O 2019: What's New in Android Studio UI Design and Debugging Tools

Android Studio使いこなそうシリーズを先に解説。講演やるので。

youtu.be

このセッションは、UIデザインのためのAndroid Studioの使い方編。

レイアウトエディタ

BlueprintModeを使ってみよう。コンテキストメニュー(右クリック)を使うと、例えば「中央に配置」といった制約の追加が簡単にできるよ。

RecyclerViewは、中身を動的に作るのでレイアウトエディタではデフォルトではショボイ表示しか確認できない。そこで登場するのがdesign tool attribute。 tools: で始まる属性。

まずはRecyclerViewの上で右クリック。するとサンプルデータの表示が簡単にできる。

Viewが重なっているとき、レイアウトエディタでドラッグで制約を追加するのは超困難。なのでコンテキストメニューで制約が追加できるように。またドラッグした対象が重なっている場合、「どのViewに対して」制約を追加するかメニューがでるようになった。

また、コンポーネントツリーでも右クリックで制約を追加できるようになった。ドリルダウンでどんどん選んでいく感じ。

Viewを選択したとき、右に表示されるAttribute panelもデザイン一新。属性の追加が割と簡単にできるようになった。操作感はChromeのDev toolsでCSSのプロパティを追加していくのに近い感じ(伝わるかな。。)

マージンを設定する場面で、 @dimen/xxxx によるカスタムディメンションが設定できるようになった。今までは8/16/24といった数値のみだった。

ImageView用のサンプルデータにcitiesが追加。

ナビゲーションエディタ

レイアウトにNavHostFragmentを貼り付けたあと、エディタ上でダブルクリックでナビゲーションエディタに飛ぶように。

遷移先の画面のFragmentはナビゲーションエディタからぱぱっと作れる。

遷移先のFragmentが引数を要求する場合、 Arguments のところで引数を追加できる。これはType-safeになる。

呼ぶときはこんな感じ(動画より)

holder.item.setOnClickListener {
    val action = WelcomeFragmentDirections.actionTripToDetails(tripId)
    Navigation.findNavController(holder.item).navigate(action)
}

リソースマネージャー

Androidのリソースフォルダは、ユーザー(開発者)のためではなく、どちらかというとOSのための構成になってる。さらにAndroid Studio上では単なるファイルなので、中身をいちいち開いて確認しないといけない。

これをなんとかしたいので、Android Studio 3.4でリソースマネージャーが追加された。

リソースのインポート

デザイナーから素材をもらうと

  • フォルダの先頭にdrawable- がついていない
  • ピクセル密度の指定が、ファイル名に @2x などをつけるスタイル(Web formatと呼んでた)

だったりする。ファイルやフォルダ名をAndroidスタイルに変更するのは苦痛なので、これらをリソースマネージャにドラッグ&ドロップするだけで、空気を読んでインポートしてくれるようになった。

インポート時はダイアログが表示され、より細かくインポート時の指定ができる。例えば言語を指定したりとか。

また、今まではSVGのインポートは1つずつしかできなかったが、これもまとめてドラッグ&ドロップでインポートできるようになった。

画像リソースをダブルクリックすると、ピクセル密度や言語毎にどれが使われるかが表示される。

レイアウトファイル

レイアウトXMLもリソースマネージャーで扱ってくれる。レイアウトエディタとの連携もあり、リソースマネージャーからレイアウトXMLをドラッグ&ドロップすると、そのレイアウトに <include> で追加してくれる。

同様に、drawableをレイアウトに対してドラッグ&ドロップすると、ImageViewとして追加してくれる。

レイアウトインスペクタ

レイアウトインスペクタ自体はちょっと前に追加されたもので、実行中のレイアウトを見ることができる。Android Qではインスペクタのための機能が追加されており、いい感じに確認できるように。例えば android:id@+id/xxxx スタイルで表示されたりとか。

今までは属性が全部まとめて表示されていたが、新しいインスペクタでは開発者が設定したものがグループわけされて表示されるようになる。「どれを設定して、どれがデフォルトのままか」が一目瞭然に。

今までのレイアウトエディタはスナップショットをとっている感じだったが、新しいインスペクタは「ライブの」データになった。なので端末側のリストをスクロールすると、インスペクタ側もあわせてスクロールする。

新機能として、ビューの階層を3D表示。たしかXcodeにも同様の機能があったはず。例えば背景色をどのViewが設定してるのかを確認するのにとても役立つ。

Android Qに関して

どちらかというとAndroid Studioのために追加されたAPI群。

  • Skia Picture
  • Fast Property Reading
  • Style Resolution Stack