Tutorials and walkthroughs often overlay a spotlight view on the main content screen.
This SwiftUI sample app implemented this functionality.

• Xcode 14.3
• iOS 14 and later
• SwiftUI(3+)

article_230529_03

今回のサンプルの仕様は下記のようにします。
The specifications for this sample app are as follows.

• Overlay the spotlight view over the main screen with the TabBar and NavigationBar
• Display the spotlight view 1 second after displaying the main screen (no animation)
• Release the spotlight state by tapping the spotlight view screen
• The spotlight is a 64pt circle and is displayed above the button at the bottom right of the screen.
• Display function description balloons over spotlights

• TabBar と NavigationBar があるメイン画面の上にスポットライトビューを画面全体に被せる
• スポットライトビューはメイン画面表示後から1秒後に表示させる(アニメーションなし)
• スポットライトビューの画面をタップしたらスポットライト状態を解除する
• スポットライトは 64pt の円とし,画面右下のボタンの上に表示する
• 機能説明の吹き出しをスポットライトの上に表示する

以下の実装のポイントをおさえます。
Study the following implementation points.

• Review the basic writing style of SwiftUI
• Allow SwiftUI to use UIKit's UIModalPresentationStyle.overFullScreen
• Cut out part of the View to make it look like a spotlight

• SwiftUI の基本的な書き方の復習
• SwiftUI で UIKit の UIModalPresentationStyle.overFullScreen を使えるようにする
• View の一部を切り取ってスポットライトのように表示させる

Zenn(Japanese only)

https://zenn.dev/milanista224/articles/swiftui-masked-screen-display-for-tutorial

Please feel free to contact us if you find a bug or have any feedback.
Suggestions for adding functions and code corrections are also welcome.

let name = "Takuya Aso" 
let email = "milanista224" + "@" + "gmail.com"
let profession = "iOS Engineer"
let location = "Tokyo"