[Swift3]TabPageViewControllerで美しいタブ切り替えを行う

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
ライブラリを表す画像

ライブラリのラの字も知らなかったほどのiPhoneアプリ開発初心者が、頑張ってライブラリを使ってみようというシリーズ。

今回は、画面スワイプでタブを切り替えて表示することができるライブラリ「TabPageViewController」を使ってみた。

導入方法(CocoaPods)

Podfileに以下の行を追加し、ターミナルでpod install。対応OSはiOS8以上。

※CocoaPodsの導入方法はこちら、CocoaPodsの使用方法はこちらの記事を参照。

とりあえず動かしてみる

ほぼサンプルの真似っこだが、まずは動かしてみるところから。

ViewController.swift

せっかくなのでサンプルから少しだけカスタマイズしてみる。バーの色を緑色に変更し、各ビューにはテキストラベルを表示する。

AppDelegate.swift

サンプルや利用ガイドに記載がないため、ハマった人も多いのではないだろうか。筆者も思いっきりハマった。

TabPageViewControllerを利用するには、どうやらナビゲーションバーの実装が必要なようだ。

動かしてみた

とりあえず想定通り。

違うコンテンツを表示してみる

もうちょっとだけ実用的な事をしてみる。試しにWebのページを表示してみよう。

Webページを表示する

ViewController.swiftを以下のように編集する。ちなみに表示するページはhttpsなのでinfo.plistの設定は不要だ。

実行するとこんな感じだ。

ビューがバーの下に隠れないようにする

Webページは表示されたが、画面上部がバーの下に隠れてしまっている。というのも、WebViewの上辺の制約を「端末の上辺から0px」としてしまっているからだ。

これを解決するために、制約を「端末の上辺から(バーの高さ)px」にする。バーの高さは、以下の要素の高さの合計だ。

  • ナビゲーションバーの高さ
  • TabPageViewControllerのtabHeight
  • TabPageViewControllerのtabMargin

動かしてみた。いい感じ!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。