LoginSignup
14
13

More than 5 years have passed since last update.

iPhone 6 PlusのUITableViewのseparatorInsetの値が違うことが原因で、カスタムセルのラベルがズレる問題を解決

Last updated at Posted at 2015-07-07

【追記】
http://qiita.com/yuya_presto/items/08b0656f67a59c8c2d03#標準スタイルのセルと左右の余白を揃えたい場合 のやり方の方が良さそうです。


UITableViewseparatorInsetは、テーブルビューの罫線のポジション指定用のプロパティです。
iOS 8の多くの端末の場合、デフォルトでleft: 15が指定されています。
UIEdgeInsetsZeroを指定して、iOS 6までのように罫線を左端まで延ばすTipsをよく見かけますが、それは本質では無く、iOSの設定画面のようにラベルの左端から始めるなど、 適切な値に設定する のが望ましいです。

iPhoneの設定画面:
Screen Shot 2015-07-07 at 10.34.57.png

「iOS 8の多くの端末の場合、デフォルトでleft: 15が指定されています」と書きましたが、iPhone 6 Plusの場合はleft: 20となっていました。
未検証ですが、iPadの場合も違うのではと思います。

CellのStyleがBasicなど、非Customの時は、ラベルの左マージンも合わせて自動調整してくれます。

一方、Customセルの場合、ラベルの左マージンは自分で設定する必要がありますが、iPhone 5やiPhone 6などの実測値であるleft: 15を指定すると、iPhone 6 Plusで5 pointのズレが発生してしまいます。

下の図の赤くハイライトされた部分は、UISwitch配置のためにCustomセルになっていますが、このように端末間でズレが発生してしまいます。

Artboard 1.png
(今開発中のPlayer!の実際の設定画面です)

また、仮にこの問題が無いとしても、単なる実測値である数値を指定すると、iOSのバージョン違いなどでズレが発生してしまいそうで、良くないと感じています。

解決策

separatorInset.leftの値をラベルの左マージンに指定

言葉にすると簡単ですが、ちょっとだけ苦労しました。

iPhone 6 Plusで検証したところ、以下の挙動でした。

  • viewDidLoadのタイミング: 15
  • viewWillAppearのタイミング: 15
  • viewDidAppearのタイミング: 20

viewDidAppearのタイミングでseparatorInset.leftの値をラベルの左マージンに指定すると、15から20に変化してカクッとするのが見えてしまいます。

色々試した結果、 viewDidLayoutSubviewsのタイミング では20の値かつ画面表示前に設定することが出来ました。

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    notificationLabelLeft.constant = tableView.separatorInset.left
}

こうすることで、iPhone 6 Plusのズレが解消されるとともに、他の端末でも15という数値よりも確実な指定方法となりました。

もし、他に良い方法あれば教えてください。

他の解決策

ググってもios - Something is wrong with the iPhone 6 Plus tableView.separatorInset - Stack Overflow程度しか情報が無かったです。

そこの回答は以下のような解決策で、あまり良くないと思ったので、自力で何とかしました( ´・‿・`)

  • 端末によって設定値を変える(15 or 20)
    • 変化に弱い
  • layoutMarginsをオーバーライド
    • iPhone 6 Plusの場合も15になってしまい、標準の見た目と食い違ってしまう
- (UIEdgeInsets)layoutMargins
{
    return UIEdgeInsetsMake(0, 15, 0, 0);
}
14
13
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
14
13