*

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サービスが多いです。
  • このエントリーをはてなブックマークに追加


  関連記事

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

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

DigitalQuest
オフィス移転のご報告

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

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

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

akerun
勤怠管理システムにAkerunを組み込んでみた

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

digitalquest_icon
SPAJAM2016 東京D予選に出てみた話 – 事前準備編 –

SPAJAM2016 東京D予選に行ってきました。 SPAJAM2016と言うの …

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

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

Androidアプリの自動デプロイフロー
Circle CIとDeployGateでAndroidアプリを自動デプロイ

CIの導入に乗り遅れているデジタルクエストでも、いい加減、便利なんだから使おうと …

amazon_icon
手軽にインフラ環境構築の自動化を実現する(したい) 其ノ参 CloudFormationでCodeDeploy設定を自動構築してみる。

前々回(手軽にインフラ環境構築の自動化を実現する(したい) 其ノ壱)の続きです。 …

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

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

digitalquest_icon
Hello World

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