ピクセル単位でみる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 上下にハイライト

書いている人:cocopon

Developer / Designer. Web / iOSなどのフロントエンドを主軸に、UIデザインから開発全般まで手がける。

趣味が高じて、ドット絵やジェネラティブアートが仕事になりつつある。