*

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


  関連記事

digitalquest_icon
Hello World

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

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

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

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

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

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

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

AWS_CloudFormation-200x200
手軽にインフラ環境構築の自動化を実現する(したい) 其ノ弐 CloudFormationでAurora環境を構築してみる。

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

digitalquest_icon
UNICORN & PHOENIX の紹介

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

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

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

DigitalQuest
オフィス移転のご報告

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

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

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

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

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