iPadだとセルの表示がずれる

UITableViewに追加したカスタムスタイルセルのコンテンツ左右の余白が標準スタイルのそれよりも若干狭くて表示がずれるという現象を何とかしたお話です。

標準スタイルで構成

標準スタイルのセルを3つ追加してみました。

img20160315_1-1

これを実行するとiPhone 6、iPhone 6 Plus、iPadではこうなります。

img20160315_1-2 img20160315_1-3 img20160315_1-4

標準スタイルとカスタムスタイルの混合

さて、2行目のセルをカスタムスタイルに変更してラベルとスイッチを適当に置いてみます。

img20160315_2-1

Auto Layoutのマージン制約はXcodeのお勧めをそのまま設定します。

img20160315_2-2 img20160315_2-3

これを実行するとiPhone 6、iPhone 6 Plus、iPadではこうなります。

img20160315_2-4 img20160315_2-5 img20160315_2-6

iPhone 6 PlusとiPadでは、なぜか2行目の左右余白が少ないため、Cell 2と書かれたラベルが左に、スイッチが右に若干ずれてしまっています。iPhone 6とiPhone  6 PlusやiPadで異なる余白のシステム設定値が、カスタムセルの方にだけ正しく継承されていないようです。

カスタムスタイルの余白修正

ビューのプロパティをいじって継承されるように修正してみます。

大事なところは、セルの親ビューをたどってPreserve Superview Marginsにチェックを入れて、さらにラベルとスイッチのレイアウト制約にある親ビュー側のアイテムのRelative to marginをオンにすることです。

img20160315_3-1 img20160315_3-2 img20160315_3-3 img20160315_3-4 img20160315_3-5

これを実行するとiPhone 6、iPhone 6 Plus、iPadではこうなります。

img20160315_3-6 img20160315_3-7 img20160315_3-8

iPhone 6 Plus、iPadでの表示のずれがなくなりました。相変わらずAuto Layoutは黒魔術です。

コメントを残す