UIPageViewControllerとContainerViewでこんな見た目を実現するTips
•
1 like•6,023 views
集まれSwift好き！Swift愛好会 #6での発表資料になります。 iPhoneアプリのUI表現をする上では知っているととても便利なUIPageViewControllerとContainerViewに関して、実装した事例をもとにポイントとなる部分やTipsをまとめてみました。 （詳細解説）iPhoneアプリでUIを作るためのTipsとContainerView・UIPageViewControllerを使ったサンプル紹介 http://qiita.com/fumiyasac@github/items/1244abc8e3286c47ef50 （サンプルリポジトリ） https://github.com/fumiyasac/CustomizeUISample
Recommended
More Related Content
What's hot
What's hot (20)
Similar to UIPageViewControllerとContainerViewでこんな見た目を実現するTips
Similar to UIPageViewControllerとContainerViewでこんな見た目を実現するTips (20)
More from Fumiya Sakai
More from Fumiya Sakai (20)
Recently uploaded
Recently uploaded (10)
UIPageViewControllerとContainerViewでこんな見た目を実現するTips
- 1. UIPageViewControllerとContainerViewで こんな見た目を実現するTips 集まれSwift好き！Swift愛好会 #6 2016/04/24 Fumiya Sakai
- 8. ✦ Storyboardに作成したViewControllerをひとまとめにする PageViewControllerを使用したサンプル解説 PageViewControllerに入れるViewControllerを管理する際にはViewControllerのリストを追加する必要あり ★PageViewControllerで管理するViewControllerの一覧を取得する ・今回はUIPageViewControllerクラスを使う部分についてはコードで配置する方針 ・各ViewControllerの”Identifier”をもとに追加対象のViewController達のリストを作成 //UIPageViewControllerに配置するUIViewControllerクラスの名称 static let pageControllerIdentifierList : [String] = [ "FirstViewController", "SecondViewController", "ThirdViewController", "FourthViewController", "FifthViewController", "SixthViewController" ] //UIPageViewControllerに追加するViewControllerのリストを生成する static func generateViewControllerList() -> [UIViewController] { var viewControllers : [UIViewController] = [] self.pageControllerIdentifierList.forEach { viewControllerName in //ViewControllerのIdentifierからViewControllerを作る let viewController = UIStoryboard(name: "Main", bundle: nil) . instantiateViewControllerWithIdentifier("(viewControllerName)") viewControllers.append(viewController) } return viewControllers } 子のViewControllerに Identifierをつけておく
- 9. ✦ UIPageViewControllerのインスタンスの初期化〜配置まで PageViewControllerを使用したサンプル解説 UIPageViewControllerのインスタンス生成時とsetViewControllersが実装時の大きなポイントになる！ ★ViewDidLoad内で行う処理の概要は初期化と読み込まれた際の表示に関する事など ・初期化→デリゲートの設定→初めに見せるViewControllerの決定→pageViewControllerの配置 ・transitionStyleやnavigationOrientationで子のViewControllerの切り替え時の見た目を設定する override func viewDidLoad() { super.viewDidLoad() //・・・（その他の副次的な部分は省略）・・・ //UIPageViewControllerの設定 // * .Scrollだと のキャッシュ問題が発生 self.pageViewController = UIPageViewController(transitionStyle: .PageCurl, navigationOrientation: .Horizontal, options: nil) //UIPageViewControllerのデリゲート self.pageViewController.delegate = self self.pageViewController.dataSource = self //UIPageViewControllerの初期の位置を決める self.pageViewController.setViewControllers([PageSettings.generateViewControllerList().first!], direction: .Forward, animated: false, completion: nil) //UIPageViewControllerを子のViewControllerとして登録 self.addChildViewController(self.pageViewController) //UIPageViewControllerを配置 self.view.addSubview(self.pageViewController.view) } 引数の意味： ・第1引数：ページ送りする際のスタイル設定（.PageCurl：ページめくり / .Scroll：スクロール） ・第2引数：ページ送りの方向設定（.Horizontal：水平方向 / .Vertical：垂直方向） ・第3引数：その他オプション設定 引数の意味： ・第1引数：表示対象のViewController ・第2引数：アニメーション方向（.Forward or.Reverse） ・第3引数：アニメーションの有無 ・第4引数：完了時の処理
- 10. ✦ viewDidLayoutSubViews()内で大きさを再定義する PageViewControllerを使用したサンプル解説 AutoLayout時はUIViewControllerやUIViewのライフサイクルを利用する or 制約をコードで指定して配置 ★UIViewControllerのライフサイクルを利用して位置を決めていく ・AutoLayout使用時はviewDidLoad or viewWillAppear内でCGRectMakeメソッド等で位置を決められない ・本当はAutoLayoutの制約をコードで配置する方法が望ましいのかもしれない・・・ //レイアウト処理が完了した際の処理 override func viewDidLayoutSubviews() { //UIScrollViewのサイズを変更する self.menuScrollView.frame = CGRectMake( CGFloat(0), CGFloat(PageSettings.menuScrollViewY), CGFloat(self.view.frame.width), CGFloat(PageSettings.menuScrollViewH) ) //UIPageViewControllerのサイズを変更する //サイズの想定 →（X座標：0, Y座標：[UIScrollViewのY座標＋高さ], 幅：[おおもとのViewの幅], 高さ：[おおもとのViewの高さ] - [UIScrollViewのY座標＋ 高さ]） self.pageViewController.view.frame = CGRectMake( CGFloat(0), CGFloat(self.menuScrollView.frame.origin.y + self.menuScrollView.frame.height), CGFloat(self.view.frame.width), CGFloat(self.view.frame.height - (self.menuScrollView.frame.origin.y + self.menuScrollView.frame.height)) ) self.pageViewController.view.backgroundColor = UIColor.grayColor() self.menuScrollView.backgroundColor = UIColor.lightGrayColor() //UIScrollViewの初期設定 ※コード省略・・・ //UIScrollViewへのボタンの配置 ※コード省略・・・ //動くラベルの配置 ※コード省略・・・ } ・UIPageViewControllerのライフサイクルについて： http://qiita.com/mo_to_44/items/0ca628b4cc74c8c5599d ・UIViewのレイアウト周りの処理はviewDidLayoutSubViewsの内部でやった方がいい http://furodrive.com/2014/10/how_to_access_iboutlet/
- 11. ✦ スワイプ操作で表示するViewControllerの切り替え PageViewControllerを使用したサンプル解説 AutoLayout時はUIViewControllerやUIViewのライフサイクルを利用する or 制約をコードで指定して配置 ★UIPageViewDatasourceのメソッドを活用する ・前のページに送る → viewControllerBeforeViewController ・次のページに送る → viewControllerAfterViewController //ページを次にめくった際に実行される処理 func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? { let targetViewControllers : [UIViewController] = PageSettings.generateViewControllerList() if self.viewControllerIndex == targetViewControllers.count - 1 { return nil } else { self.viewControllerIndex = self.viewControllerIndex + 1 } //スクロールビューとボタンを押されたボタンに応じて移動する self.moveToCurrentButtonScrollView(self.viewControllerIndex) self.moveToCurrentButtonLabel(self.viewControllerIndex) return targetViewControllers[self.viewControllerIndex] } 実装のポイント ・メンバ変数viewControllerIndexの値をviewControllerAfterViewControllerは+1, viewControllerBeforeViewControllerは-1する ・UIViewControllerのリストからメンバ変数viewControllerIndexの値のところのものを取得する ・戻り値はUIViewController型になる
- 12. ✦ ScrollViewで配置されているボタンでViewControllerの切り替え PageViewControllerを使用したサンプル解説 ScrollViewとの連携も意外としやすい印象。PageViewControllerを活用して様々なUIの幅が広がると思う！ ★ボタンがタップされたタイミングでsetViewControllersメソッドを呼び出す ・ScrollView内にボタンを設置するタイミングでタグを仕込みその値を活用する ・setViewControllersメソッドの第3引数をtrueにして切り替えるタイミングにページめくりをつける //ボタンをタップした際に行われる処理 func buttonTapped(button: UIButton){ //押されたボタンのタグを取得 let page: Int = button.tag //UIPageViewControllerのから表示対象を決定する if self.viewControllerIndex != page { self.pageViewController.setViewControllers([PageSettings.generateViewControllerList()[page]], direction: .Forward, animated: true, completion: nil) self.viewControllerIndex = page //スクロールビューとボタンを押されたボタンに応じて移動する self.moveToCurrentButtonScrollView(page) self.moveToCurrentButtonLabel(page) } } 実装のポイント ・ScrollView内にボタンを配置する際にタグを設定しておく ・ボタンに設定したタグの値をもとに表示するViewControllerを決定する（setViewControllersでその処理を行っている） animated: trueにして 切り替えの際にアニメーション