android: onClick が使えるもの
2024/10/18
Scaffold
で topBar
と bottomBar
を用意した。
用意するときに @OptIn(ExperimentalMaterial3Api::class)
を追加するよう促されたが、まだ M3 は試験運用版 APIがあるようだ。
しばしばアプリで見られるが、画面の一番下に大きいボタン的なものが配置されていることがある。
あれをやってみようとした。
普通に Button
を追加するだけだと小さいし、fillMaxWidth()
などで広げても角丸な形状がそのまま現れる。
形状を変えたりすれば良いのだろうが、そういえばクリックしたいだけであれば Button
にこだわる必要もないと思い至った。
Row
を追加して onClick
を設定してみたが、そういうパラメータはないようだ。
Surface
では使えたのでそれでよしとした。
onClick
が使えるものはどういうやつだろう?
よく使うコンポーネント
全部調べるのも面倒なので、私がよく使うコンポーネントだけで見てみた。
- androidx.compose.foundation.layout
Box
,Column
,Row
など- これらには
onClick
はなかった
- androidx.compose.material
Button
,Text
,Surface
,Scaffold
など- これらには
onCLick
を持つものがしばしば見られた
- androidx.compose.foundation
Image
などCombinedClickableNode
だけが onClick を持っていた
ただ、onClick
を持つものだけがクリックに対応できるというわけでもなさそうだった。
Modifier.clickable
、Modifier.combinedClickable
があるからだ。
Geminiさん
Gemini さんに質問すると、BottomNavigation(modifier = Modifier.clickable {})
を使った例が出力された。
試しにそのまま使うも BottomNavigaion
が見つからない。。。
見つからないことも質問すると、NavigationBar
の例を出してきた。
BottomNavigation が存在しないわけではないのだが、見つからないなら仕方ない。
とはいえ、Navigation はタブっぽい見た目のやつで、遷移するのが目的だと思う(こんなの)。
であれば BottomAppBar だけでよいのか。
しかし、サイトの方にはこうなっているが、
実際は、というか M3 ではこうだ。
ここでようやく、androidx.compose.material
と androidx.compose.material3
がけっこう違うということに気付く。
M2 だの M3 だのは見た目だけでなく API にも影響するのだ。
こちらが M3 の BottomAppBar
。
最終的にこうした
M3 で進めるのに異議があるわけではないのでこのまま使う。
これが M4 になったらまたあれこれ変わるのだろうか、
Android Studio に任せたら “material3” を import
したが “material” の方にしたら自動で M4 に対応してくれないだろうか、
など考えてしまったが、そこまで思い入れもないしよかろう。
(数字が付かない “material” パッケージは M2 だそうだ)
で、こんな感じにした。
イベントは BottomAppBar()
の Modifier.clickable()
で受けている。
内側に Surface
を置いてその onClick
でも対応はできるのだが、無駄に重ねることはなかろう。
Scaffold(
bottomBar = {
BottomAppBar(
containerColor = colorScheme.primary,
contentColor = colorScheme.onPrimary,
modifier = Modifier.clickable(onClick = onClick),
) {
Text(
text = "ぼたん",
style = MaterialTheme.typography.titleLarge,
modifier = Modifier
.fillMaxSize()
.wrapContentSize()
)
}
}
) {
...
日本語フォントだとそうでもないが小文字アルファベットだと小さく見える気がする。
かといって固定値を入れ込むのも心配なので、まあこれでいいや。