[iOS] UITabBarController でタブを切り替えても常に見えるView を作る

どういう状態か

UITabBar の上に、半透明の横長View がありますが、これはタブを切り替えても常に表示されています。
こういう見た目を実現したい。

タブを切り替えても常に見えるViewがいる

細かい位置調整などは置いておいて、これを実現するViewController の構成を書いていきます。
ちなみにこちらのStack Overflow を参考にしました。

全体の構成

こんな感じ。

全体の構成

4つのVCを使います。

では作っていきます!

UITabBarController とその子ViewController たちを作る

まずStoryboard 上に UITabBarController を配置します。

その後、2つのViewController を配置します。
今回は本ブログの [iOS] UIViewController の中に UICollectionView を貼り付ける の記事で書いた方法で、
2つのCollectionView を作りました。

次に、UITabBarController にそれぞれのViewController を紐付けます。
Storyboard 上で、controlキーを押しながらUITabBarController をクリックし、
そのまま紐付けたいViewController までドラッグ&ドロップします。

以下のように Segue のメニューが表示されるので、「view controllers」を選択。

2つの子ViewController を紐づけたら、タブ切り替え可能なコレクションビューができました。

常に見えるView を作る

さらに新しくViewController を作ります。
(ここに常に見せたいView を貼り付けていく流れになります。)

で、ViewController を作ったら、まずはContainer View をそこに配置します。
制約はとりあえず上下左右ぴったりにします。

で、その上に「常に見せたいView」を貼り付けます。

こんな感じ。

「常に見せたいView」は、見た目の分かりやすさのため
背景を半透明にしてUITabBar の高さ分下にマージンをとっています。
(紫の四角いView も貼られてますが関係ないので無視してください)

Container View に UITabBarController を貼り付ける

先ほどと同じくSegue で繋げます。

Storyboard 上で、controlキーを押しながらContainer View をクリックし、
そのままUITabBarController までドラッグ&ドロップします。

以下のようにSegue のメニューが表示されるので、 Embeded を選択します。

これで、タブを切り替えても「常に見えるView」ができました!

動かしてみるとこんな感じです。

タブを切り替えても常にView が見える

ただ、CollectionView を一番下までスクロールしたとき、「常に見えるView」が上に被さっていて
最後までちゃんと見ることができていないのが気になります。

これを解消します。

CollectionView の下部にマージンをつける

これは additionalSafeAreaInsets を設定してやれば実現できます。

CollectionView の ViewController にて、viewDidLoad などのメソッドに
以下のようにadditionalSafeAreaInsets を設定します。

additionalSafeAreaInsets = UIEdgeInsets(
    top: 0,
    left: 0,
    bottom: 100,
    right: 0
) 

bottom: 100 を設定したので、この場合は下に100の余白ができるというわけです。

これを動かしてみるとこんな感じになります。

CollectionView の全ての要素がちゃんと見える

これで完成です!

最後に

案外さっくりできますね。
以上です。お疲れ様でした!

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。