JetpackComposeのSlot APIsの紹介
今回はJetpackComposeのSlot APIsについて書いていきます。
スライドを先に作成したため、そのスライドに説明を付与していく形で書いていきます。
本編
JetpackComposeにはSlot APIsという概念があります。
今回はそのSlotAPIsをスライドベースで紹介していきます。
Slot APIsというのはComposableの上にカスタマイズのためのレイヤを適用するという概念です。
これを用いることで見た目のカスタマイズがしやすくなります。
Slot APIsが無い場合だとカスタマイズするために多くの引数を用意する必要が出てきます。
例えば、Buttonのテキストをカスタマイズできるようにするために、textColorやtextSizeやfontWeightなどなど......
Buttonだけでも多くあるため、他のComposableもとなるとより多くの引数が必要になってしまいます。
これがSlot APIsという概念のおかげで引数を大幅に減らすことができ、カスタマイズ性も高くできます。
JetpackComposeで使えるマテリアルコンポーネントのComposableでも多く定義されています。
イメージとしてはComposableで用意されている枠に対してComposableを当てはめることができるような感じです。
例としてTopAppBarというComposableをあげます。
この画像の白い破線で囲まれている部分が
Slotになります。
ここに色々なComposableを当てはめることができます。
TopAppBarの定義を見てみます。
赤い下線がある部分がSlotとして他のComposableを受け取る引数です。
型を@Composable () -> Unit のように定義することで他のComposableを利用できます。
TopAppBarではtitle, navigationIcon, actionsにComposableを当てはめることができます。
TopAppBarでのtitle, navigationIcon, actionsはそれぞれこの位置に当てはめることができます。
利用する際のコード例を見ていきます。
まずは、よくあるような戻るボタン・タイトル・縦3点リーダーを表示する例です。
title, navigationIcon, actionsそれぞれにComposableスコープのラムダを渡しています。
あまり多い使い方ではないと思いますが、こういった見た目を実装することもできます。
NavigationIcon部分に複数行のテキスト、Title部分にテキスト＋画像＋テキスト、Actions部分に枠付きボタンといったことが簡単にできます。
AndroidViewの場合、Title部分にテキスト＋画像＋テキストを設置するような実装は複雑になるかと思いますがComposeの場合であれば並べるだけで実現できます。
それぞれのComposableで文字色やフォントの指定は行っていないですが、個々の見た目も簡単にカスタマイズすることができます。
TopAppBarを見てきましたが、他にもSlotが利用できるComposableは多く存在します。
Scaffoldという見慣れないものがあると思いますのでそちらについても説明していこうと思います。
Scaffoldはよくあるようなマテリアルデザインなレイアウト構造の見た目を実現するために使われるComposableです。
Scaffoldで定義されているSlotは
このような破線で囲まれている部分にComposableを当てはめることができます。
TopAppBarにBottomNavBar、FABにDrawContentにComposableを配置できます。
Scaffoldの定義を見てみます。
先ほど説明したSlot部分は赤い下線がある部分になります。
TopAppBarのSlotと同じように@Composable () -> Unit で定義されています。
最後にまとめです。
Slot APIsによってComposableの見た目をカスタマイズすることができます。
デフォルトで提供されている多くのComposableの多くでSlotが用意されていますので利用しやすいですし、自前でSlotを用意するようなComposableの実装の参考にすることもできます。
自作の色々な画面で利用するような共通のComposableを実装する際にSlotを受け取って表示するようなComposableにするとカスタマイズ性も上がって良いと思います。
今回参考にしたものは以下です。
developer.android.com
