うるおいらんど

アプリ開発やサイト制作のメモとか。

【Swift 3】UIPageViewControllerとUINavigationControllerを使ってスワイプで画面切り替えをしよう

魚ライン
魚ライン

ども。

最近よく見る横スワイプで画面を切り替えるやつを実装してみたので紹介します。

[iOS] SwiftでSmartNewsみたいな、横スワイプで画面を切り替えるライブラリを作りました」を参考に(削ったり付け加えたり)しました。

NavigationControllerを使うのが初めてでなかなか苦戦したのでその辺も含めて紹介しますね〜。

 

まず今回作りたいのはこういうやつ。



 

とりあえず細かいところは置いておいてざっくりと説明していきます。

 

navigationController上にpageViewControllerをのせて、そこに ViewControllerを切り替えているという感じだと思います。

なので既にViewControllerを作っている場合でも大丈夫ですし、切り替えたページごとにViewControllerが配置されているので扱いやすいです。

 

UINavigationControllerのサブクラスを作成する

おもなコードは全てここに書きます。

File > New > File



 

Source > Cocoa Touch Class > Next



 

Subclass of をUINavigationControllerにしてファイルを作成



 

まずは必要なDelegateを書いておきます。

・UIPageViewControllerDelegate

・UIPageViewControllerDataSource

・UIScrollViewDelegate

を付け加えます。

 

今回はナビゲーションバーを表示させたくないので消しておきます。

viewDidLoadに書くことはこんだけ。

 

 

PageViewControllerの設定をしていきます。

 

このself.topViewControllerはナビゲーションコントローラーのスタックの一番上にあるビューコントローラを返します。

 

syncScrollViewの中身を書いていきます。

 

先ほどのpageControllerの中からUIScrollViewを探し出し、それにデリゲートを設定しています。

 

viewWillAppearでsetupPageViewControllerを呼び出しておきます。

 

スワイプ時の処理を実装しよう

スワイプした時の処理を書いていきます。

その前に現在のインデックスを返す関数を用意しておきます。

 

それぞれの方向にスワイプした時の処理を書きます

 

次(前)のビューコントローラーがあった場合のみそれを返します。

 

最初からNavigationControllerを表示する時

アプリを開いた時点でNavigationControllerを表示する時はAppDelegate.swift内に処理を書きます。

 

 

makeKeyAndVisible()に関しては「iOS開発におけるウィンドウ「UIWindow」の知られざる活用方法とは? #iOS」の記事がわかりやすいです。

私もあとでじっくり読むためにリンクさせていただきますね(`・ω・´)

 

これでとりあえず一応おおまかな実装は終わりです。

できたのはこんな感じ



 

ここまでで1つ気になるところを修正します。

ビューが表示されてすぐに、ステータスバーの分だけ下にスクロールされています。

これを修正するために

とする必要があります。

これは先ほどのAppDelegate内のpageControllerに対して行います。

PageViewControllerでNavigationbar(またはStatusbar)の高さ分ずれる」を参考にさせていただきました。

 

別ViewからNavigationViewを表示する

最初からナビゲーションビューを呼ばない時です。

その場合は、AppDelegate内ではなく遷移前の画面に書きます。

 

こんな感じ。

これで別のビューからボタンタップでページングされたビューを表示することができます。

ここがなんだかんだめちゃくちゃ時間かかりました。。。画面遷移がいつものperformSegueが使えなかったのがでかい・・・。

 

全てのViewに固定してボタンを表示する

ちょっとみづらいですが、全てのビューの左上に×ボタンを表示してみました。



こんな感じ

SwipeNavigationViewController内に書いています。

 

このボタンをaddSubviewしている箇所が結構肝。というかめっちゃひっかかりました。

色々addSubviewできるviewがあるんですが、ページングされているところのみに表示したい場合はここで良さそうです。

self.viewとかにすると、ページングされているビューからさらに遷移した先にも表示されてしまいます。

 

StoryBoard上にあるViewControllerをページングする

既にStoryBoard上にあるViewControllerをいくつかページングする場合です。

まずはStoryBoard上のViewConrollerにIDをつけておきます。



 

このIDを使ってインスタンスを作成します。

 

こんな感じです。

 

とりあえずこんなもんです。最後に全体コード載せておきます。

 

全体コード

ViewController

 

SwipeNavigationViewController

AppDelegate

AppDelegate内の部分はとりあえずコメントアウト

 

 

今回initの部分は特にoverrideすることがないからいらないと思うんですが一応書いておきます。どうなんだろうか。書かなきゃなんだろうか。

 

やっぱりナビゲーションバーや現在何ページ目なのかわかる方法が必要かなぁと思うんですが今回はついてないです。元にした方のコードにはついています。

とりあえずは以前に私が書いた記事の「UITabBarController上をスワイプで画面遷移する方法【Swift】」にアニメーションつけたと思っておきます。

デザイン的にその辺を考えていなかったのですが、追加した際にはまた記事書きますね。

 

それではでは。

参考記事はその都度貼ったのではしょり(´・ω・`)

魚ライン 魚ライン

日常の記事一覧を見る

コメント

コメントは認証制です。詳しくは下記の注意をお読みください。

コメントを残す

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

魚ライン 魚ライン