指定画面上に表示するアプリチュートリアルみたいなやつを実装する(Swift)

botman_blue iOS

Xcode-12.4 Swift-5.3 iOS-14.0

はじめに

下記のような指定パーツの説明を表示するアプリチュートリアルを実装する方法について考えてみました。

tutorial1

ライブラリもあるみたいなんでカスタムしないならライブラリ探す方がいいと思います。
bannzai/Gecco

方法として思いついたのは下記2つ。

  • 半透明の VC を表示してその上に指定の View のスクショを表示した UIImageView を置く方法
  • 半透明の VC を表示して指定の View の部位だけくり抜いた layer を表示する方法

Viewのスクショを撮る方式

tutorial1

実装方法は下記。それっぽい感じにはなった。

指定部位だけくり抜く

スクショ撮るのが無駄な感じがしたので別案。

tutorial2

実装方法は下記。下記以外の部分はスクショのやつと同じ。

くり抜き方は下記記事を参考にしました。
一部をくり抜いたオーバーレイを表示する方法

おわりに

文字での説明部分はめんどくさかったので Popover にしましたがここもカスタム View にすれば柔軟にカスタマイズしていけるはず!

ゴロゴリにカスタマイズしたチュートリアル表示の要望があったので頭をひねってみました。どっちのパターンも横向きありの場合は崩れそう。。。

コメント

タイトルとURLをコピーしました