本記事について

FUN Advent Calendar 2019 Part2，6日目の記事です

急遽Part2に参加しました．
Part1用の記事を書いている中で，方向性がずれていってしまった一部をPart2の記事にすることにしました．
多少(かなり)の手抜き感はお許しください．

概要

もともとはPart1用にプレアルファ版で利用できるようになった，Jetpack Composeについての記事を書いていました．
その導入の中で，Live Previewという機能が追加されていることを知りました．
どんなもんなのか自分で試している中で，つまづいた部分をまとめていきます．

Live Preview

Live PreviewはJetpack Composeに伴って追加された新機能になっています．
そもそもJeapack Composeとは宣言的にUIを作成することのできるライブラリです．
Jeapack Composeを利用することによって，従来のAndroidアプリ開発大きく変わるのは，Layoutファイルを使わなくなることです．
その代わり，Kotlinファイルに直接UIを書いていくことができます．

ここで問題になってくるのか，UIの確認ができなくなることです．
以前は，Layoutファイルの中でUIの調整を行い，UIの確認をDesignで確認していました．
しかし，Jetpack Composeを利用すると，アプリを実行させるまでUIの確認ができなくなってしまいました．

そこで，Jetpack Composeのプレアルファ版の中でLive Previewが追加されました．
Live Previewを利用することで，Jetpack Composeで記述したUIがどのような表示になるか確認できます．
※Jetpack Composeの書き方についての説明はしないので，こちらをご参照ください．

実際にLive Previewを使ってみる

早速Live Previewがどんな感じなのか試してみましょう．
基本的は使い方は@Composableの前に@Previewを追加するだけのようです．
実際に簡単なUIに@Previewを追加してみました．

ちーんΣ（・□・；）
これでもアプリ自体は実行できますが，Live Previewは機能していません．
なんでだろうと思いつつ，サイトを読み直してみると
To create a live preview, create a new composable function that takes no parameters and includes a @Preview annotation before @Composable, as shown below
との記述がありました．ようは@Previewを付けた関数には，引数をつけるなとのことです．

そこで，@Previewをつける関数には引数を与えず，UI用の関数に引数を与えるように変更しました．

結局だめでした．
しかし，公式サンプルアプリを眺めていたところ，Class内では使っていないとこが判明しました(そもそも公式サンプルアプリではUI用の関数はClassの中に書いていないんですね)．

なんとか表示できました(Dark仕様にしていることもあり，かなーーり見辛いですが一応表示されています)．
なぜクラスの中で表示されないのか原因はよくわからないです．
公式サイトには記述されていないような感じでした(知っている方いらっしゃいましたらコメント欄にでも...)．

結論としては，Live Previewを使用する場合には，UI用のファイルを用意して利用するのが現状のベストっぽいです．

まとめ

この記事では，Jetpack Compose用の新機能であるLive Previewを導入した際に自分がつまづいたことを書きました．
Live Previewと言う割には，レイアウト変更後Build & Refreshを押さないと更新されないので少々使い勝手が悪い印象を受けました．
また，画像のように背景が透過になっていて，このままだと見辛いのもどうにかにして欲しいと感じました．
アプリを実行した際のデフォルトの背景は白なので，この部分も背景のデフォルトは白にして欲しいところです．
今後，どのような変更が加わってくるのかによって，かなり使い勝手が変わってくるように感じます．

参考サイト

Jetpack Compose : https://developer.android.com/jetpack/compose
Tutorial Jetpack Compose Basics : https://developer.android.com/jetpack/compose/tutorial
compose-samples : https://github.com/android/compose-samples
Use Android Studio with Jetpack Compose : https://developer.android.com/jetpack/compose/setup