ピクセル単位でみるGroupedなUITableView

2013-05-31

ちょいとカスタマイズが必要になったので。自分用のメモを兼ねて書いておきます。 iOS 6系、non-retinaな環境で確認。

左右の余白は9px

8pxじゃないのね。謎だ。

セル同士はぴったりくっついている

セル同士はぴったりくっついていて、枠線はセルの内側に描かれている。

セルの高さは基本的に44px、上端だけ45px

セルの高さは、基本的に44px。 44pxは、指で押すのにちょうどよい、Appleのマジックナンバー。

…なんだけど、上端セルだけは1px多くて、45px。

枠線の描かれかた

他のセルより1px高い上端セルは、上下に枠線が描かれる。

中央セルは、下側に枠線が描かれる。 つまり、セルの間の区切り線は、各セルの下側に描かれている。

下端セルも、下側に枠線が描かれる。

セル高さ枠線
上端45px上下
中央44px
下端44px

Etchedにすると?

以上が、UITableViewのseparatorStyleを単純な線(UITableViewCellSeparatorStyleSingleLine)にしたときの話。 立体感のある線(UITableViewCellSeparatorStyleSingleLineEtched)にすると…?

上端セルは、上側に立体感を表現する影が追加される。

中央セルは、上側に立体感を表現するハイライトが追加される。

下端セルは高さが45pxになって、上下にハイライトが追加される。

セル高さ枠線その他
上端45px上下上側に影
中央44px上側にハイライト
下端45px上下にハイライト
Share: