目次
どういう状態か
UITabBar の上に、半透明の横長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」ができました！
動かしてみるとこんな感じです。
ただ、CollectionView を一番下までスクロールしたとき、「常に見えるView」が上に被さっていて
最後までちゃんと見ることができていないのが気になります。
これを解消します。
CollectionView の下部にマージンをつける
これは additionalSafeAreaInsets を設定してやれば実現できます。
CollectionView の ViewController にて、viewDidLoad などのメソッドに
以下のようにadditionalSafeAreaInsets を設定します。
additionalSafeAreaInsets = UIEdgeInsets(
top: 0,
left: 0,
bottom: 100,
right: 0
) bottom: 100 を設定したので、この場合は下に100の余白ができるというわけです。
これを動かしてみるとこんな感じになります。
これで完成です！
最後に
案外さっくりできますね。
以上です。お疲れ様でした！
Web-y.dev 