![見出し画像](https://assets.st-note.com/production/uploads/images/102125030/rectangle_large_type_2_d6ffc6357fe26b2d2e207c374d81982f.png?width=1200)
【徒然iOS】気ままにUIKit102〜Page View Controller ページをめくって画面遷移〜
概要
このマガジンは四十を過ぎたおっさんが、
を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。
今回
ハイ、レッツゴ🕺
ここは、
で軽くやった内容だね〜〜〜👀
前準備
念の為、
バックアップ
をいつも通りやってから本題へ💃
![](https://assets.st-note.com/img/1680652236347-hLSGdq2FpK.png?width=1200)
本題
ページビューコントローラーとは、
めくる、または、ドラッグで画面を遷移させるコントローラー
⒈事前準備
![](https://assets.st-note.com/img/1680653283768-sVPuT1JVkz.png?width=1200)
内容は、イメージではなく今回は永井荷風の『濹東綺譚』の冒頭に〜〜〜
![](https://assets.st-note.com/img/1680653410035-s1VpLSSYsX.png?width=1200)
![](https://assets.st-note.com/img/1680653423772-3pJwzx253b.png?width=1200)
⒉ページビューコントローラを配置
![](https://assets.st-note.com/img/1680653548746-Qp5EXiwWAJ.png?width=1200)
![](https://assets.st-note.com/img/1680653560396-tmCF1VEeP9.png?width=1200)
⒊コード組み込み
//
// TestPageViewController.swift
//
import UIKit
class TestPageViewController: UIPageViewController,UIPageViewControllerDataSource {
let idList = ["Morning", "Evening", "Night"]
//最初からあるメソッド
override func viewDidLoad() {
//最初のビューコントローラーを取得する。
let controller = storyboard!.instantiateViewControllerWithIdentifier(idList.first!)
//ビューコントローラーを表示する。
self.setViewControllers([controller], 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
}
}
を参考にやってみたんだけど、
![](https://assets.st-note.com/img/1680656708928-qvkWI7UCWN.png?width=1200)
👉サイト記事のコード当時と、nilの許容の仕方の違いが原因の様子👀
なので、
なんかを参考に、、、
今回のコード(基本)
class PageViewStandardController: UIPageViewController,UIPageViewControllerDataSource {
func newVC(viewControllerID: String) -> UIViewController {
return storyboard!.instantiateViewController(withIdentifier: viewControllerID)
}
lazy var idList:[UIViewController] = {
return [
self.newVC(viewControllerID: "1頁"),
self.newVC(viewControllerID: "2頁"),
self.newVC(viewControllerID: "3頁")
]
}()
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
}
}
に書き換え〜〜〜〜
⒋シミュレータで実行
![](https://assets.st-note.com/img/1680656955671-XsCPA1qVHx.png?width=1200)
![](https://assets.st-note.com/img/1680656974984-w8mXemNQgM.png?width=1200)
![](https://assets.st-note.com/img/1680656985836-kJq6wMzLda.png?width=1200)
ページコントロールの色を変更する
については、
前回、
AppDelegateは下手に触ると影響がデカすぎる!!!
と書いたんだけど、ここはページコントロールの状態を変更する程度なので〜〜〜
//
// AppDelegate.swift
//
import UIKit
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
//アプリ起動時の呼び出しメソッド
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
//ページコントロールのカラーを変更する。
let pageControl = UIPageControl.appearance()
pageControl.backgroundColor = UIColor.whiteColor()
pageControl.pageIndicatorTintColor = UIColor.blueColor()
pageControl.currentPageIndicatorTintColor = UIColor.greenColor()
return true
}
}
を参考に〜〜〜
元々ある
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
return true
}
てコードの中身に
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
//ページコントロールのカラーを変更する。
let pageControl = UIPageControl.appearance()
pageControl.backgroundColor = UIColor.black
pageControl.pageIndicatorTintColor = UIColor.orange
pageControl.currentPageIndicatorTintColor = UIColor.green
return true
}
てな感じで追記して、
![](https://assets.st-note.com/img/1680658405371-9ANeU836Uy.png?width=1200)
ビューコントローラで繋いだ後も、
![](https://assets.st-note.com/img/1680658537633-dSDG166NuY.png?width=1200)
今回のポイント
ページコントロール
でやった箇所を見てみると〜〜〜
![](https://assets.st-note.com/img/1680658691124-AwcCqJXp5A.png?width=1200)
AppDelegateって
にもあるとおり、
アプリ全体のライフタイムイベントを管理するためにAppDelegateクラス
👉起動直後に、同一の部品に色なんかを変更するコマンドを書き込んでしまうと、予想しない動きになる可能性がある
↓
意識的に使う分には問題ないけど、無意識で安易に使うと前回も書いたとおりなんだけど、、、
全体に大きな影響を与える可能性が高い=危険
まあ、このプロジェクトは、
学び直しがてら、標準機能をひとつのプロジェクト内に網羅する
てコンセプトでやってるから、こんなにビューが増えてるだけで、
普通のアプリでは中々、起きないって思うけど。
意識してるのと意識してないのでは大きな違い
ライフサイクルイベントはすごく大事だから、
今回や前回のサイト記事の変更よりも、
//
// AppDelegate.swift
//
import UIKit
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
//アプリ起動時の呼び出しメソッド
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
}
func applicationWillResignActive(application: UIApplication) {
}
func applicationDidEnterBackground(application: UIApplication) {
}
func applicationWillEnterForeground(application: UIApplication) {
}
func applicationDidBecomeActive(application: UIApplication) {
}
func applicationWillTerminate(application: UIApplication) {
}
}
の関数名の意味を理解して使いこなせる方が大事かなあ🤔
と、
「アプリ起動と同時に音楽が掛かるようにしたい」
「アプリが非アクティブになったら、音楽や動画を一時停止したい」
みたいなことをやりたくなると思うからね〜〜〜〜🕺
どんなライフサイクルイベントがあるかは、
![](https://assets.st-note.com/img/1680659376345-FmKX2MM0Wc.png?width=1200)
JumptoDefinitionで調べてみてね〜〜〜
ブラッシュアップ
今回も、ここまででしれっとAutoLayoutなんかはやったので〜〜〜
🌐ボタンだけ〜〜〜
![](https://assets.st-note.com/img/1680659691834-u2KKosZuCh.png?width=1200)
記事公開後、
![](https://assets.st-note.com/img/1680659923529-fPwR4n7PaR.png?width=1200)
実機も問題無し🕺
Apple公式
さてと次回は、
をレッツゴする🕺