プログラマブログ

by wacul

menu

2014.06.05UITableViewの一番上に隙間が出来てしまう件

こんにちは、wacul開発メンバーの kyoh です。 WWDC2014でSwiftが発表された時、 恋に落ちる音を聞いた気がします。

さて、今日は、最近iPadアプリの開発中に遭遇した不可解な事象と、その解決方法について書いてみようと思います。

UITableView の狭き門、険しい道

iOSアプリといえば凡そ避けることのできない「UITableView」ですが、一癖も二癖もあるそれに悩まされるのはiOS開発の登竜門となっているようです。 今回私も、そんな登竜門の狭い門柱に引っかかって苦しめられました。

謎の隙間が発生する

UITableViewController ベースの画面を作り、UINavigationControll に push した時のことです。 表示された画面には、ナビゲーションバーとセクションヘッダとの間に、意図しない隙間が表示されていました。

UITableView と UINavigationBar との間に、33pxの隙間が生じている

正体不明!

REVEALというツールなども駆使して、この隙間は一体なんぞやと探ってみました。が・・・

  • UINavigationBar にははみ出すようなビューは含まれていない。
  • UITableViewController の tableView は、UINavigationBar と密着している。
  • UITableViewDelegateProtocol の tableView:heightForHeaderInSection:は実装済で、適切な高さが返っている。
  • 同 Protocol の tableView:viewForHeaderInSection: も実装済で、同じ高さの view を返している。
    • 返しているビューに、はみ出すような子孫ビューはない。

つまるところ、そこには何のビューもなければ何のマージンもない、「ただ開いている」隙間でした。

怪しいプロパティ

それとなく UITableView Class Reference を眺めていると、 tableHeaderView なる怪しげなプロパティを発見しました。

tableHeaderView Returns an accessory view that is displayed above the table. @property(nonatomic, retain) UIView *tableHeaderView

Discussion The default value is nil. The table header view is different from a section header.

Tableの上に表示される何がしかのビューを設定できるようです。しかし調べてみても、説明にも書かれている通り、そこには nil が入っているだけでした。

解決方法

延々悩んだ結果、どうもその tableHeaderView が怪しいぞ、という結論にいたり、空のビューを設定すると見事に隙間が消えました。

1
[self setTableHeaderView:[[UIView alloc] initWithFrame:CGRectMake(0, 0, 0.1, 0.1)]]

UINavigationBar の直下に セクションヘッダが密着している

ちょっとした解説

UINavigationController に push した場合にのみ発生する事象の様です。 また、UINavigationController の先頭にあるViewControllerの場合は発生しないみたい。

ちなみに、sectionHeaderView に設定する空 view は、高さと幅に有意値(0ではない値)を設定しないと、 この問題は解決しません。

UITableView のセルやセクションヘッダの高さを 0 にしたい場合は、0.1 を設定するのがセオリーです。 0を設定すると、基本的に「その他のプロパティ(例:sectionHeaderHeight)に従う大きさ」や「内容に従う大きさ」が設定される様です。

けつろん!

UITableView の上方に発生した謎の隙間に悩まされたら、置くだけ簡単 height=0.1 view!

この記事を書いた人kyoh

kyohです。蕎麦と鳥をこよなく愛するおでぶです。C#使いでした。

waculでは、プログラマを募集しています。

現在はプロダクトとして、課題発見から改善提案まで自動で行うWeb改善プラットフォーム「AIアナリスト」を開発中です。

waculの採用情報へ

ページトップへ