3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ZOZOAdvent Calendar 2021

Day 19

XcodeのInterface Builderでハンバーガーメニューの配置の制約を簡単に設定する方法

Last updated at Posted at 2021-12-19

TL;DR

画面上部にハンバーガーメニューなどを配置する際に便利な、制約の設定方法についてです。

ポイント

iOSの標準コンポーネントではないものの、様々なアプリで利用されているハンバーガーメニュー
このメニューのボタンの制約をInterface Builder(Storyboard, xib)で設定するなど、画面上部のアイテムに配置の制約をつける際には気をつけなければいけないことがあります。(参考:iOSアプリ ノッチ判定

ボタン 開かれたメニュー
IMG_5F1EE9A677D6-1.jpeg IMG_76A0872B9194-1.jpeg

もう一つ考慮すべき点として、ハンバーガーメニューは元の画面にオーバーレイするような形式で表示されます。
その際に、元の画面ではstatus barが表示されていたのに、オーバーレイした画面ではstatus barは非表示になるということがあります。
その場合ノッチのない端末では、status barの有無によってsafe areaの領域が変わります。
もしsafe areaのみに制約をつけた場合、status barの有無によって位置のズレが発生します。

ノッチがない端末で、safe areaのみに制約をつけた場合
(画面録画の赤いバーのせいで見えづらくてすみません)
RPReplay_Final1639893013.gif

この記事では、以上の問題に対処しながら、Interface Builderで簡単に設定する方法をご紹介します。

実装方法

要求仕様

画面の上部から任意の位置、かつstatus barより下

解決策

ノッチの有無に限らず対応できる、priorityの異なる2つの制約をつけます。
(ただし配置場所が、ノッチのサイズである44ptより下であるならば1.の制約のみで様々な端末に対応可能です。)

1. super viewからの制約をpriority 1000で設定

スクリーンショット 2021-12-19 14.58.59.png

2. safe areaからの制約をpriority 750で設定

スクリーンショット 2021-12-19 14.59.05.png

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?