Swiftでセミモーダルを簡単に実装する方法

ある日アプリの画面遷移を考えているときに、ふと

「あの、したからニョキッと出てくるViewってどうやって実装するんだろう」と思い、調べて自分なりに擬似実装してみました。

まず、知ったことがしたからニョキッと出てくる奴のことをセミモーダルと呼ばれていることでした笑

他にいい方法があると思うし、ライブラリも存在します。この方法は大規模なアプリケーションだと使いづらいかもしれません。個人開発で、それっぽくしたい方におすすめです。

また、この実装方法は自分で考案しましたが僕が知らないだけでもしかしたらスタンダードなやり方かもしれないし、誰かしらが紹介しているかもしれません。その点はご了承ください。

まず、プロジェクトをSingle Viewで作成します。

Storybordにて新しくViewを作成し、2つのViewの間のSegue（矢印）を選択してIdentifierを「SemiModal」にします。「SemiModal」はなんでも大丈夫です。

次にSemiModalファイル内にNewFileからCocoaTouchClassファイルを作成し「ModalViewController」という名前にします。

そしたら、2つのViewを選択してClassを先ほど作成した「ModalViewController」にします。

同じ2つのViewを選択してPresentationを「Over Current Context」に変更します。

次にViewControllerの編集を行います。

1つ目のViewにボタンを配置し、Actionで接続します。

ボタンタップの処理内に

performSegue(withIdentifier: "SemiModal", sender: nil)

を追加します。

ここまで行うとボタンクリックで2つ目の画面に遷移すると思います。ここから2つ目のView

をいじっていきます。

ModalViewControllerのviewDidLoadに

view.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0)

を追加します。

ここからStorybordの変更を行います。

右上の＋からUIViewを作成して配置します。色などは任意で大丈夫です。僕はわかりやすいようにピンクにしています。

左側面、右側面、下面にくっつくように配置します。高さは変更しなくて大丈夫です。

AutoLayoutの設定をします。左側面、右側面、下面を「０」に設定します。

3つ選択してAdd 3 Constrainsをします。

そしたらEqualHeightsをします。左のウインドウより、小さいViewから大きいViewにControlキーを押しながらドラックします。

そうすると新しくウインドウが出るのでEqualHeightsを選択。

この操作をすることで高さがデバイスごとに変更できるようになります。今回は画面の35%の高さに設定します。

設定したEqualHeightsを選択し、右のウインドウにてMultiplierを0.35に設定します。これは、画面高さの何％というのを設定でき、1を100％と設定可能です。今回の場合、0.35なので35%です。

ここで実行してみましょう！

下からニョキッと出てきたと思います。基本はこんな感じで簡単に擬似実装可能です。

Viewの編集をすれば様々無事に応用できます。

最後に注意なのですが、これより良い方法は冒頭で書いた通り存在すると思います。簡単に実装でき、かつ僕みたいな初心者にわかりやすい実装として、今回このような無理やりなやり方をしました。

最後に実際に使えそうなデザインにカスタマイズした物を作成しました！こんな感じです。

全然使えそうなデザインじゃない（泣

もっと改良します笑

一応、セミモーダルを戻すときにモーダル以外をタップすると下に消えるようにはしました！（そういう実装が多いと思うので！）

実際にアプリを開発する時の方が、実装しながらできるのでデザインを考えやすいとおもます。

こんな感じです！最後までお読みいただきありがとうございました！