はじめに
Compose Multiplatform を採用することで Android と iOS を共通の UI として定義できます。
Compose Multiplatform とは？
Android アプリでは、Jetpack Compose によって UI を宣言的に定義することができます。Compose Multiplatform ではこれを拡張し、Android 向けの定義によって、他のプラットフォームの UI も表現可能になっているため、Android と iOS をワンソースで表現できてしまいます。Kotlin Multiplatform と組み合わせることで、アプリケーションのソースコードの大部分を単一のコードで記述することができるようになっています。
しかし、iOS 26 から採用された Liquid Glass に対応するには注意が必要です。
通常、SwiftUI のコンポーネントを利用していれば OS に合わせてシステム側が適用してくれます。しかし、Compose Multiplatform では Compose が描画した内容を一つの UIViewController として返します。そのため、システム側からは SwiftUI のコンポーネントを利用していると判断されません。よって、システム側は Liquid Glass を適用することはできません。
Compose Multiplatform では SwiftUI と Compose を自由に組み合わせることが可能になっています。この記事では、Liquid Glass を適用したい箇所、つまり、SwiftUI のコンポーネントを利用する箇所とそうではない箇所をそれぞれプラットフォームごとに宣言するアプローチの紹介です。
結果は次の表のようになります 
| Android | iOS 18 | iOS 26 |
|---|---|---|
 |
 |
 |
サンプルコードのリポジトリを公開しています。
解説
では、ここから具体的に今回のアプローチを解説します。
プロジェクトの作成
Android Studio で新しくプロジェクトを作成する時に、次の項目 UI Implemantion から「Share UI」を選択します。Compose Multiplatform のテンプレートから自動生成されます。もう一方の「Do Not Share UI」を選択すると、iOS 側は SwiftUI で最初から生成されます。
下準備
Liquid Glass の適用がわかりやすいように Navigation を用意します。以下のドキュメントから適用結果を見比べられます。
今回、次のようなレイアウトを用意しました。前述の iOS 18 の状態ですね。
| Android | iOS |
|---|---|
|
|
ソースコードでは Compose の NavigationBar を利用しています。
以下はサンプルコードの該当箇所です。
SwiftUI から Compose へのブリッジ
Compose NavigationBar の部分を SwiftUI TabView に置き換えたら Liquid Glass 対応できます。実際に TabView の中に表示する部分は Compose で共通利用したいです。そこで SwiftUI から Compose へのブリッジを用意します。図解すると以下のようなイメージになります。
こういったケースでは、Compose Multiplatform が用意している ComposeUIViewController を使うことで SwiftUI から Compose を UIViewController として利用できるようになります。
今回のケースでは、HomeScreen と SettingsScreen にそれぞれブリッジを用意しました。
Liquid Glass 対応
これで Liquid Glass 対応の準備ができました。
- Compose NavigationBar の部分を SwiftUI 側で TabView の宣言を追加する
- SwiftUI からブリッジを経由して Compose Screen を呼ぶ
これによってプラットフォームの OS に合わせてシステム側が表現を調整してくれるようになります。