【SwiftUI】Macの天気アプリのUIを再現する

# はじめに
Macの天気アプリはMacアプリの中でも一際目立ったデザインをしています。
特に、サイドバーとタイトルバーが色鮮やかなのは他の純正アプリには見られない珍しい特徴です。
今回は、このUIの再現に挑戦します。

![スクリーンショット 2023-07-20 16.00.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366249/6595b896-40ee-72da-b817-cab23952c7e2.png)

# サイドバーに色を塗る
まず、サイドバーの背景色を設定します。
サイドバーは、NavigationSplitViewの第一引数に`List`を設置して表現します。
`.scrollContentBackground(.hidden)`で`List`の標準の背景をなくし、
`.background(Color.blue.gradient)`で青のグラデーションを背景にします。

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            List {
                Text("Item1")
                Text("Item2")
                Text("Item3")
            }
            .foregroundColor(.white) // 見やすくするため文字色を白にする
            .scrollContentBackground(.hidden)
            .background(Color.blue.gradient)
        } detail: {
            
        }
    }
}
```

![スクリーンショット 2023-07-20 17.11.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366249/e4cec1bf-26e5-444c-3d8a-d219958403a3.png)

これだけでも、かなり近づきました。

# タイトルバーを脱色する
次に、タイトルバーの背景を透明にし、背景色を設定します。
`.toolbarBackground(Color.clear, for: .windowToolbar)`をつけてタイトルバーの背景色をなくし、青のグラデーションに`.ignoresSafeArea()`をつけてタイトルバーまで広げます。

```swift
struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            List {
                Text("Item1")
                Text("Item2")
                Text("Item3")
            }
            .foregroundColor(.white)
            .scrollContentBackground(.hidden)
            .background(Color.blue.gradient)
        } detail: {
            ZStack {
                // 青のグラデーション
                Rectangle()
                    .fill(Color.blue.gradient)
                    .ignoresSafeArea()
            }
            .navigationTitle("") // タイトルをなくす
        }
        .toolbarBackground(Color.clear, for: .windowToolbar)
    }
}
```

![スクリーンショット 2023-07-20 17.25.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366249/546e06ae-3726-c178-8933-205997888dd3.png)

これで90％の仕上がりになりました。

# 完成
最後に、デザインを整えて完成です。

サイドバー横の線を黒くするために、`NavigationSplitView`に`.environment(\.colorScheme, .dark)`をつけます。

そして、`NavigationSplitView`内の二つのViewのカラースキームを`@Environment(\.colorScheme) var colorScheme`で取得したデバイスのカラースキームに戻します。


```swift
struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme // New!

    var body: some View {
        NavigationSplitView {
            List {
                Text("Item1")
                Text("Item2")
                Text("Item3")
            }
            .foregroundColor(.white)
            .scrollContentBackground(.hidden)
            .background(Color.blue.gradient)
            .environment(\.colorScheme, colorScheme) // New!
        } detail: {
            ZStack {
                Rectangle()
                    .fill(Color.blue.gradient)
                    .ignoresSafeArea()
            }
            .navigationTitle("")
            .environment(\.colorScheme, colorScheme) // New!
        }
        .toolbarBackground(Color.clear, for: .windowToolbar)
        .environment(\.colorScheme, .dark) // New!
    }
}
```

![スクリーンショット 2023-07-20 17.33.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366249/e8e2af42-f035-fc65-2e1b-f0474dca5687.png)

これで、Macの天気アプリのような美しいウィンドウが完成しました！

# おまけ
`.toolbarBackground(Color.red, for: .windowToolbar)`のように色を設定すると、
このようにパワポ風のウィンドウを作れます。
![スクリーンショット 2023-07-20 17.37.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366249/7e7adf93-8f19-3529-cb11-c8cce8b632ba.png)

# おわりに
サイドバーやタイトルバーの色を変えると、アプリの印象がガラリと変わりますね。この記事が参考になったという方は、いいねとフォローお願いします☺️