【Swift】UIScreenEdgePanGestureRecognizer 画面端のドラッグを検知させる。 | はじはじアプリ体験記

Screen Edge Pan Gesture Recognizer
【Swift】Screen Edge Pan Gesture Recognizerの使い方。画面端のドラッグを検知する。

  • 2016年5月16日
    Swift 2.1で検証
  • Twitterでシェア
  • Facebook
  • LINEで送る

Screen Edge Pan Gesture Recognizerとは

本記事ではSwiftで使える部品のScreen Edge Pan Gesture Recognizer(以下、スクリーンエッジリコグナイザー)について説明する。

Screen Edge Pan Gesture Recognizer

 

スクリーンエッジリコグナイザーとは、画面端のドラッグを検知する部品である。iOSの画面端から内側に向かってスワイプしたときにニョキッと現れる通知センターやコントロールセンターもスクリーンエッジリコグナイザーが使われている。

 

スクリーンエッジリコグナイザーを使ってみる

では、スクリーンエッジリコグナイザーを使って通知センターの登場シーンのようなものを作ってみよう。以降の手順は、「Blur Effectの使い方」の続きになるので、実装を試してみる人は先に読んでおくことをお勧めする。

スクリーンエッジリコグナイザーを部品一覧の「View」まで運ぶ(下図赤矢印)。すると紫枠のスクリーンエッジリコグナイザーが追加される。

水色枠のアトリビュートインスペクタボタンを押して設定画面を表示し、EdgesのTopにチェックを入れる。

黄緑枠のアシスタントエディタボタンを押してViewController.swiftを開く。Ctrlキーを押しながら紫枠のスクリーンエッジリコグナイザーをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。

Connectionに「Action」、Nameに「panTop」、Typeに「UIScreenEdgePanGestureRecognizer」を設定してConnectボタンを押す。これで、画面上端をドラッグしたイベントをソースコードで受けれるようになった。

下図黄枠の「Tap Gesture Recognizer」はDeleteボタンを押して消す。

Screen Edge Pan Gesture Recognizerをビューに配置する。

 

ViewController.swiftを以下のコードに変更する。

「画面上端ドラッグ時の呼び出しメソッド」で、垂直方向の移動量を位置の制約に加算して、ビューを画面内に移動している。

ドラッグ終了時に、下降中のビューが画面高さの半分以上まできた場合はそのままビューを下げ、半分に満たない場合はビューを画面外に戻している。

普通に実行して画面上端をドラッグするとiOS標準の通知センターが降りてきてしまうので、「ステータスバーの表示要否メソッド」をオーバーライドしてステータスバーがすぐに降りないようにした。

 

以下は実際のプレイ動画

スポンサーリンク

スクリーンエッジリコグナイザーを使う上での注意点

スクリーンエッジリコグナイザーを使う上でいくつか気になった点があるので以下に記載しておく。Swift 2.1、XCode 7.2で確認された事象。

 

気になった点1

スクリーンエッジリコグナイザーの設定項目にEdgesがあるが、2つ以上選択すると検知メソッドが呼び出されなくなった。2つ以上の設定が必要な場合はスクリーンエッジリコグナイザーを複数登録し、1個のリコグナイザーにつき1個のEdgesを設定すると正常に検知できるようになった。

Edgesを複数選択する

 

気になった点2

過去のバージョンで、ストーリーボードからスクリーンエッジリコグナイザーを配置すると検知メソッドが呼び出されなくなる事象が発生していた。ソースコードから登録すると正常に検知される。⇒「stackoverflowの投稿

 

気になった点3

画面サイズより小さい部品にスクリーンエッジリコグナイザーを登録しても検知させることができる。以下の動画はEdgesにLeftを設定して、検知させたプレイ動画。

部品の左端をドラッグすると検知される。

 

ただし、部品の端が検知されるわけではなく、画面の端を含めた部品の領域しか検知されない。例えば、画面端から部品が離れた状態にあると、以下の動画のように画面や部品の端をドラッグしても検知されない。

 

といっても、画面端と部品端がピッタリくっついていなければならないということでは無く、以下の動画のように、画面端と部品端に少し隙間があっても検知される。

検知可能になる具体的なピクセル数については分かり次第追記する。

Swift記事一覧へ
  • Twitterでシェア
  • Facebook
  • LINEで送る
はじはじビットコイン目指せ!最強の暗号通貨トレーダー

コメントを残す

お名前