iOS

[Swift]UIPageViewControllerを使ってみよう!

投稿日:

はじめに

こんにちはnukkyです。
以前コメントにてUIPageViewControllerの使い方がわからないとのコメントを頂いたので簡単に使い方を紹介したいと思います。

前提条件

Xcode 9.1
iOS 11 Simulator
Swift 4.0

 

UIPageViewControllerとは

簡単に説明するとUIViewControllerを複数同等な関係性で配置でき、それをスワイプ操作で遷移させられるものです、ものすごくざっくりいうとtabbarのtabが無いような形です。

 

実装

ViewControllerを準備

今回は3画面でサンプルを作成したいと思います。
3つ適当なViewControllerをファイルとStoryBoardに用意してください。
今回サンプルではFirstViewController、SecondViewController、ThirdViewControllerを用意したものとしてコードを書いていきます。

UIPageViewControllerを準備

まずUIPageViewControllerクラスを継承したファイルを作成してください。
今回のサンプルコードではPageViewControllerとしています。

StoryboardにUIPageViewControllerを作成しPageViewController関連付けをしてください。
このStoryboardにはFirstViewController、SecondViewController、ThirdViewControllerが用意されているのが前提とします。

最初の画面を設定

起動時にFirstViewControllerが表示されるように設定したいと思います。

setViewControllersでgetSecondもしくはgetThirdを行うことで最初に表示する画面をFirstViewController以外にすることも可能です。

UIPageViewControllerDataSourceの編集

UIPageViewControllerDataSourceを編集し画面を切り替えの設定を行います。

現在の画面を判断しpageViewController(___After_)、pageViewController(___before_)メソッドで適切な画面を返すようにしています。今回はループをしないようにnilを返している箇所もありますがここでViewControllerを返すことで画面をループさせることも可能です。

 

さいごに

かなり駆け足でしたがUIPageViewControllerの基礎的な使い方の紹介になります。ちょっと知識がないと敷居が高いように感じますが使うだけならこのように結構簡単にいけますし、使いどころもあると思うので是非使ってみてください。

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

swift

[Swift3] ScrollViewを使ってみた!

1 はじめに2 縦スクロール3 横スクロール4 横スライドでページング5 さいごに6 おすすめ書籍 はじめに どーもはじめです。 ずっと苦手意識というかあまり使いたくないイメージを持っていたのですが、 ...

swift

Swiftの配列、辞書関連メソッドの基本

1 はじめに2 配列(Array)2.1 filter2.2 map2.3 reduce3 辞書(Dictionary)3.1 filter3.2 map3.3 reduce4 さいごに はじめに 普 ...

UIWebViewからWKWebViewへの移行

1 はじめに2 ターゲットとなるUIWebViewで行なっていること3 URLへのアクセス4 ローカルHTMLの読み込み5 ページを戻す、進める6 ページの読み込み開始時や終了時に処理を行う(dele ...

swift

SwiftでTTTAttributedLabelの文字列からリンク表示

1 はじめに2 TTTAttributedLabelとは3 CocoaPodsでインストール4 実装4.1 Labelの表示4.2 タップの検知5 さいごに はじめに こんにちは。 はじめましてnuk ...

iOS13ダークモード対応

1 はじめに2 一時しのぎ3 実装3.1 UI Element Colors3.2 Color Set3.3 コードで描きたい3.4 カスタムのカラーを定義する3.5 画像をモードで動的に変更したい4 ...

フォロー

blog-page_side_responsive

2018年2月
 123
45678910
11121314151617
18192021222324
25262728  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。