Skip to content

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

Notifications You must be signed in to change notification settings

MilanistaDev/MaskedScreenDisplayForTutorial

Repository files navigation

MaskedScreenDisplayForTutorial

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

Environment

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

Sample GIF

article_230529_03

仕様 / Specification

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

Main specifications of this App

  • 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 の円とし,画面右下のボタンの上に表示する
  • 機能説明の吹き出しをスポットライトの上に表示する

実装ポイント / Point of implementation

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

Point of implementation

  • 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 の一部を切り取ってスポットライトのように表示させる

Article

Zenn(Japanese only)

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

Contact

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"

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages