1075 文字

3 分

日本語

SwiftUI で Apple Music 風の消えるナビゲーションタイトルを再現する

2026-04-03

Engineering

SwiftUI

/

iOS

/

UI

iOS 26 の Apple Music では、スクロールすると大きなナビゲーションタイトルとツールバーの内容が見えなくなる。iOS 11 以降の一般的な large title の動きとは少し違う。

従来の遷移は次のようなものだった。

1
Large Title
2
   ↓ scroll
3
Small Navigation Title

Apple Music の表示は、こちらに近い。

1
Large Title
2
   ↓ scroll
3
(no title)

この挙動をそのまま有効にする SwiftUI の公開 modifier は、今のところ用意されていない。再現方法は、スクロール位置から独自の header を制御する方法と、compact title だけを空にする簡単な方法に分けられる。

きちんと作るなら、必要になるのはだいたい次の要素だ。

safeAreaInset(edge: .top) に配置する独自 header
ScrollGeometry を使ったスクロール位置の検出
タイトルとほかの toolbar item を分けた表示制御
opacity や offset のアニメーション

SwiftUI 側の部品はすでに揃っている。

1
.onScrollGeometryChange(...)
2
.safeAreaInset(...)
3
.toolbar(...)

ただし、専用のナビゲーションバー設定ではなく、あくまで低レベルな部品だ。単純な例なら、縦方向の offset が一定値を超えたところで header を隠せばよい。

1
struct CollapsingHeaderView: View {
2

3
    @State private var headerHidden = false
4

5
    var body: some View {
6
        ScrollView {
7
            VStack {
8
                ForEach(0..<50) { i in
9
                    Text("Row \(i)")
10
                        .frame(maxWidth: .infinity)
11
                        .padding()
12
                }
13
            }
14
        }
15
        .onScrollGeometryChange(for: CGFloat.self) { geometry in
16
            geometry.contentOffset.y
17
        } action: { _, offset in
18
            headerHidden = offset > 40
19
        }
20
        .safeAreaInset(edge: .top) {
21
            header
22
                .opacity(headerHidden ? 0 : 1)
23
                .animation(.easeInOut, value: headerHidden)
24
        }
25
    }
26

27
    private var header: some View {
28
        HStack {
29
            Text("Library")
30
                .font(.largeTitle.bold())
31

32
            Spacer()
33

34
            Image(systemName: "person.crop.circle")
35
        }
36
        .padding()
37
        .background(.ultraThinMaterial)
38
    }
39
}

ScrollView、List、LazyVStack のどれを使う場合でも応用でき、header のレイアウトや隠すタイミング、アニメーションも自由に決められる。

一方で、スクロール方向、しきい値、ツールバーの配置、refreshable との組み合わせ、入れ子になった NavigationStack の edge case まで、アプリ側で面倒を見ることになる。画面全体の挙動を正確に合わせたいなら妥当だが、compact title を消したいだけなら少し大げさだ。

compact title だけなら principal を空にする#

もっと簡単な方法は、principal の toolbar item に空のタイトルを置くことだ。

1
.toolbar {
2
    ToolbarItem(placement: .principal) {
3
        Text("")
4
    }
5
}

通常の large title はそのまま設定する。

1
.navigationTitle("Library")
2
.navigationBarTitleDisplayMode(.large)

すると、見た目の遷移は次のようになる。

1
Large Title
2
   ↓ scroll
3
(empty)

リスト上部では大きなタイトルが表示され、折りたたまれた後は principal item の空文字列が compact title になる。

1
NavigationStack {
2
    List(items) { item in
3
        Text(item.title)
4
    }
5
    .navigationTitle("Library")
6
    .navigationBarTitleDisplayMode(.large)
7
    .toolbar {
8
        ToolbarItem(placement: .principal) {
9
            Text("")
10
        }
11
    }
12
}

スクロール状態を追加しなくても、標準の NavigationStack だけで Apple Music にかなり近い見た目になる。

実際に消えているのはタイトルの内容だけ#

SwiftUI のナビゲーションタイトルは、通常この 2 つの状態を行き来する。

1
Large Navigation Title
2
        ↓
3
Compact Navigation Title

principal toolbar item は compact 側に表示される内容を置き換える。そこを空にすると、

1
Large Title
2
   ↓
3
Small Title

だったものが、

1
Large Title
2
   ↓
3
(blank space)

になる。

ナビゲーションバー自体が削除されたわけではない。compact title の中身が何も描画されないため、header が消えたように見えている。

この違いから、制約もはっきりしている。

ナビゲーションバーは残っている
ほかの toolbar item は引き続きスペースを使う場合がある
現在の SwiftUI の描画挙動に依存するため、将来のバージョンで変わる可能性がある

header とそのレイアウト全体を消す必要があるなら、スクロール位置を使う実装を選ぶ。compact title が空になれば十分なら、principal item の方法で済ませるのが軽い。

将来は公式 API になるかもしれない#

Apple は、システムアプリで先に UI を導入し、その後に関連する公開 API を提供することがある。.searchable、large navigation title、Apple Music で使われているタブバーの最小化も、その流れで登場した例だ。

将来の SwiftUI に、たとえば次のような API が追加される可能性はある。

1
.navigationBarCollapseBehavior(.onScroll)

あるいは、

1
.toolbarScrollVisibility(.hidden)

もちろん、この 2 つは API の形を説明するための例であり、現時点では存在しない。

SwiftUI で Apple Music 風の消えるナビゲーションタイトルを再現する

https://www.shiinayane.com/ja/posts/apple-music-style-navigation-titles/

著者

YANKAI WANG

公開日

2026-04-03

ライセンス

CC BY-NC-SA 4.0

Swiftで個人サイトを作る

DockerでMinecraftサーバーを構築する

SwiftUI で Apple Music 風の消えるナビゲーションタイトルを再現する

header 全体を制御する#

compact title だけなら principal を空にする#

実際に消えているのはタイトルの内容だけ#

将来は公式 API になるかもしれない#