[iOS] MBProgressHUDとUITableViewControllerの併用で画面中央にHUDが表示されずハマった話

2016.12.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

おばんです、ぼちぼち来年の目標を考えたいなあと思いつつも、そういえば去年の暮れに掲げた今年の抱負が思い出せない田中です。

今回はMBProgressHUDで発生したハマりどころを解決するTipsの紹介です。

MBProgressHUDとは

通信中やユーザーに待機させるような場面で表示させる、老舗のHUDのライブラリです。

MBProgressHUDを利用したコードのサンプルは以下です。 任意のviewに対してHUDの表示/非表示を制御します。

// HUDの表示
MBProgressHUD.showAdded(to: view, animated: true)
// HUDの非表示
MBProgressHUD.hide(for: view, animated: true)

UITableViewに対してHUDを表示することの問題

HUDを画面中央に配置したいとした時、UITableView上にMBProgressHUDを表示するとUITableViewのスクロール位置によってHUDが意図した位置に表示されてくれません。 検証はしていませんが、UIScrollViewのサブクラスであれば同じようなことが起こるかもしれません。

kitai

zure

ViewControllerのviewプロパティに対してHUDを表示する

UIViewControllerのviewプロパティはUIViewのサブクラスですが、UITableViewControllerのviewプロパティを参照するとそれはUITableViewのサブクラスとなっているため、先述した問題に行き当たってしまいます。 そのためUITableViewController上にHUDを表示させることはできないようです。

解決策

UITableViewControllerを使うのをやめる

UITableView上でHUDを表示したい場合はUITableViewControllerの利用をやめます。 UIViewControllerの上にUITableViewを配置して、HUDの表示先のviewをtableViewではなくUIViewControllerのviewプロパティに設定すればこの問題は解決します。

// tableViewではなくUIViewControllerのプロパティであるviewに設定する
MBProgressHUD.showAdded(to: view, animated: true)
// MBProgressHUD.showAdded(to: tableView, animated: true)

まとめ

まさか以前からよく使っていたMBProgressHUDでハマるとは思いませんでした...。

UITableViewControllerはdelegateとdataSourceの設定を省けたり、Static Cellsが利用できるところなど良いところはありますが、個人的にはハマりどころも多分にあるのでUIViewController + UITableViewの組み合わせで作る方が良いように感じます。

「UIViewController + UITableViewだとStatic Cellsが利用できない」ということが問題に挙がりますが、以下の記事の内容で対応可能です。