【徒然iOS】気ままにUIKit103〜画面遷移のアニメーション〜

概要

このマガジンは四十を過ぎたおっさんが、

はじはじアプリ体験メモ

を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。

今回

【Swift】Page View Controllerの設定。画面遷移のアニメーションを変更する。(Swift 2.1、XCode 7.2) | はじはじアプリ体験メモ

をハイ、レッツゴ🕺

今回は設定項目みたいなんで、一覧を絡めながら〜〜〜

前準備

念の為、

1. バックアップ

2. 前回やったビューとクラスの同じモノを新規で追加

をやってから本題へ💃

こんな感じで〜〜
今回は、枕草子にしてみた🕺

こんな感じ

一応、用意したコード

class PageViewAnimationController: UIPageViewController,UIPageViewControllerDataSource {
    func newVC(viewControllerID: String) -> UIViewController {
        return storyboard!.instantiateViewController(withIdentifier: viewControllerID)
    }
    lazy var idList:[UIViewController] = {
        return [
            self.newVC(viewControllerID: "第１段"),
            self.newVC(viewControllerID: "第２２段"),
            self.newVC(viewControllerID: "第２６段")
        ]
    }()
    var showingIndex = 0
    
    //最初からあるメソッド
    override func viewDidLoad() {
        //最初のビューコントローラーを取得する。
        let controller: [UIViewController] = [idList.first!]
        //ビューコントローラーを表示する。
        self.setViewControllers(controller, direction: .forward, animated: false, completion: nil)
        //データ提供元に自分を設定する。
        self.dataSource = self
    }
    //右ドラッグ時の呼び出しメソッド
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
        guard let viewControllerIndex = idList.firstIndex(of: viewController) else {
            return nil
        }
        let previousIndex = viewControllerIndex - 1
        guard previousIndex >= 0 else {
            return nil
        }
        guard idList.count > previousIndex else {
            return nil
        }
        showingIndex -= 1
        
        return idList[previousIndex]
    }
    //左ドラッグ時の呼び出しメソッド
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        guard let viewControllerIndex = idList.firstIndex(of: viewController) else {
            return nil
        }
        let nextIndex = viewControllerIndex + 1
        let controllersCount = idList.count
        guard controllersCount != nextIndex else {
            return nil
        }
        guard controllersCount > nextIndex else {
            return nil
        }
        showingIndex += 1
        
        return idList[nextIndex]
    }
    
    func viewController(at index: Int) -> UIViewController {
        return idList[index]
    }
    func presentationIndex(for pageViewController: UIPageViewController) -> Int {
        return showingIndex
    }
    func presentationCount(for pageViewController: UIPageViewController) -> Int {
        return idList.count
    }
    
    @IBAction func webButton(_ sender: Any) {
        let url = URL(string: pageViewAnimationController)
        let safariView = SFSafariViewController(url: url!)
        present(safariView, animated: true)
    }
}

本題

ここら辺の設定項目の解説かな💦

まずは、恒例の一覧表で〜〜〜

一覧表

てな感じらしい👀

今回は、ちょっと項目も少ないので〜〜〜
ゆっくり動かしながらやってみよう🕺

Navigation

Verticalにしてみると〜〜〜

下から上のアニメーションでページが捲れるようになったけども、
ページコントローラの表示が消えてるから、個人的には使えないなあ🤔

Transition Style

Page Curlに変更

本を捲る動きになってるね〜〜〜

Page Spacing

Scrollの時のみ有効ってことなんで、
戻して〜〜
160にしてみた

捲るときになんかすっげ〜〜〜モノが🤣
逆に違和感しかないわ〜〜〜

Spine Location

Maxに〜〜〜

さっきと捲れ方が逆に〜〜〜

Mid」に設定したときは、Double Sidedにチェックを入れてページを両面にする必要がある。そうしなければ以下のエラーが発生する。

てことなんで〜〜〜

Midにした〜〜
自動的にDoubleSidedにチェックが入った〜〜〜

//
//  TestPageViewController.swift
//
import UIKit
class TestPageViewController: UIPageViewController,UIPageViewControllerDataSource {
    let idList = ["Sea", "Morning", "Evening", "Night"]
    //最初からあるメソッド
    override func viewDidLoad() {
        //１ページ目のビューコントローラーを取得する。
        let controller = storyboard!.instantiateViewControllerWithIdentifier(idList[0])
        //【変更箇所】２ページ目のビューコントローラーを取得する。
        let controller2 = storyboard!.instantiateViewControllerWithIdentifier(idList[1])
        //【変更箇所】ビューコントローラーを表示する。
        self.setViewControllers([controller, controller2], direction: .Forward, animated: true, completion:nil)
        //データ提供元に自分を設定する。
        self.dataSource = self
    }
    //右ドラッグ時の呼び出しメソッド
    func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {
        //現在のビューコントローラーのインデックス番号を取得する。
        let index = idList.indexOf(viewController.restorationIdentifier!)!
        if (index > 0) {
            //前ページのビューコントローラーを返す。
            return storyboard!.instantiateViewControllerWithIdentifier(idList[index-1])
        }
        return nil
    }
    //左ドラッグ時の呼び出しメソッド
    func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {
        //現在のビューコントローラーのインデックス番号を取得する。
        let index = idList.indexOf(viewController.restorationIdentifier!)!
        if (index < idList.count-1) {
            //次ページのビューコントローラーを返す。
            return storyboard!.instantiateViewControllerWithIdentifier(idList[index+1])
        }
        return nil
    }
    //全ページ数を返すメソッド
    func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int {
        return idList.count
    }
    //初期表示のページのインデックス番号
    func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int {
        return 0
    }
}

と、奇数しか頁がないので〜〜〜一個、ビューを増やして〜〜〜

てな感じで、、、💦

でコードをはめ込んで直してみると、

てな感じで前回同様に、書き振りが変わってるのでエラー発生

Show the middle page of pageViewController num first when app loaded

iOS UIPageViewController — Easy!!!

などを参考に、

class PageViewAnimationController: UIPageViewController,UIPageViewControllerDataSource {
    lazy var idList: [UIViewController] = {
        let storyBoard = UIStoryboard(name: "Main", bundle: nil)
        let V1 = storyBoard.instantiateViewController(withIdentifier: "第１段")
        let V2 = storyBoard.instantiateViewController(withIdentifier: "第２２段")
        let V3 = storyBoard.instantiateViewController(withIdentifier: "第２６段")
        let V4 = storyBoard.instantiateViewController(withIdentifier: "第２７段")
        return[V1, V2, V3, V4]
    }()
    //最初からあるメソッド
    override func viewDidLoad() {
        self.dataSource = self
        let middle = idList[1]
        if idList.first != nil {
            self.setViewControllers([middle], direction: .forward, animated: false, completion: nil)
        }
    }
    //右ドラッグ時の呼び出しメソッド
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
        //現在のビューコントローラーのインデックス番号を取得する。
        guard let vcIndex = idList.firstIndex(of: viewController) else {
            return nil
        }
        let previousIndex = vcIndex - 1
        guard previousIndex >= 0 else {
            return nil
        }
        guard idList.count > previousIndex else {
            return nil
        }
        return idList[previousIndex]
    }
    //左ドラッグ時の呼び出しメソッド
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        //現在のビューコントローラーのインデックス番号を取得する。
        guard let vcIndex = idList.firstIndex(of: viewController) else {
            return nil
        }
        let nextIndex = vcIndex + 1
        guard idList.count != nextIndex else {
            return nil
        }
        guard idList.count > nextIndex else {
            return nil
        }
        return idList[nextIndex]
    }
}

も試してみたけど、改善なし💦

うーむ🤔

まあ、使わない機能だからいいんだけどね〜〜〜

と、コードを最初のコードに戻して、midは使わないので、maxに戻そ

てな感じで〜〜〜

ブラッシュアップ

前準備で🌐ボタンはすでに付けていたので〜〜〜

記事公開後、

ハイ、完了💃
実機も問題無し🕺

Apple公式

UIPageViewController.SpineLocation.mid | Apple Developer Documentation

setViewControllers(_:direction:animated:completion:) | Apple Developer Documentation

さて次回は、

【Swift】Size Classの使い方。画面サイズごとに部品やレイアウトを変更する。(Swift 2.1、XCode 7.2) | はじはじアプリ体験メモ

をレッツゴする🕺