*

Storyboardを使ってContainerView+PageViewのサンプルを作ってみた

   

概要
横スクロールするメニュー+メニューに連動してメインビューが切り替わる、
SmartNews等のアプリで見られるような、簡易なサンプルを作ってみました。
ポイントはこんな感じです。
・可能な限りStoryboadを使う(+Swift)
・横スクロールするメニュー⇒ScrollView+StackView
・メインビュー⇒ContainerView+PageView

ソース
ざっくりとした内容しか記載していないのでソース見たい方はこちらからどうぞ
https://github.com/koji-nishida/scrollmenu-container-pageview

完成イメージ(gif)

1

 

全体図

2

3

 

メニュー部の作成
ScrollView、StackView、Buttonを配置
Constraintsは下図のような感じ(Buttonは特に制約なし)
これで端末幅に合わせて横スクロールするメニューが完成

4

5

ScrollViewのConstraints

6

StackViewのConstraints
メインビュー部の作成
図のようにメニューの下にContainerViewを配置。
配置時点ではUIViewControllerがembedされているので、
UIViewControllerを消して、UIPaveViewControllerを配置しなおします。
ここでUIPaveViewControllerのCustom ClassにPageViewController.swiftを指定しておく。

7

8

ContainerViewのConstraints

実装部(PageViewにViewControllerをセット)

ポイント
・childViewControllersからPageViewControllerを探す
もっといい方法があれば誰か教えて下さい
・各ViewControllerをStoryboardから生成して配列で保持しておく
・初期表示するViewControllerをセット

 

実装部(メニュー切り替え部)

ポイント
・特になし笑

Author Profile

KJ
株式会社デジタルクエスト 開発部 エンジニア
サーバサイド、iOSメイン、Android少々みたいな感じで色々やってます。
携わってきたサービスはECサービスが多いです。
  • このエントリーをはてなブックマークに追加


  関連記事

girl-1076998_1920
結局わたしでしょ?♡

Hi!ミシェルさんです 😀   サービスの企画とかUXについての意見て …

gaikan3
DQ ハッカソンで合宿に行ってきました

開発部の社員と有志の企画・デザイナーの総勢13名で、ハッカソンを行いました。 伊 …

amazon_icon
【速報】PHP7をAmazon Linuxに早速入れてみて、5.6とのベンチマークを取ってみた。

PHP7が11年ぶりに正式リリースされたそうなので、早速試してみたです速報。 試 …

digitalquest_icon
UNICORN & PHOENIX の紹介

デジタルクエストで取り組んでいる技術の紹介です。 弊社のエースエンジニア @sa …

スクリーンショット 2016-06-14 17.01.23
SPAJAM2016 東京D予選に出てみた話 – 決戦編 –

前回の続き SPAJAM2016 東京D予選に行ってきました -決戦編-。 SP …

digitalquest_icon
NAT Gatewayを使って、ELB+AutoScalling下のVPC-EC2のアウトバウンドIPを固定化してみた。

弊社サービスの3bkは外部サービス連携を幾つかしています。 そのうちの一つがアク …

DigitalQuest
オフィス移転のご報告

本日5/23より、株式会社デジタルクエストは新オフィスにて営業を開始しております …

digitalquest_icon
Hello World

株式会社デジタルクエストの開発ブログです。 弊社ではWebサービス、iOS/An …

AWS_CloudFormation-200x200
手軽にインフラ環境構築の自動化を実現する(したい) 其ノ壱 CloudFormationの使い方をマスターする

DQには実はインフラ専任のエンジニアは居ません。 案件担当のエンジニアがインフラ …

打刻漏れ通知
GAS × Chatwork × Spreadsheetの勤怠管理システムを公開してみた

どうも、デジタルクエストのヒヨコエンジニアのyokoです。 今回は、Google …