【iOS】UITableViewにパディングを追加してフローティングボタンと被らないようにする
こんにちは、個人アプリ開発者の@HituziANDOです。
この記事では、UITableViewにパディングを追加し、リストの最後のコンテンツがフローティングボタンなどのUIと被らないようにする方法を紹介しています。
UITableViewは配列データを一覧表示するUIとして、よく使われるViewです。僕が開発しているToDoアプリ『Real TODO』においても、作成したToDoを一覧表示するために使っています。このUITableViewですが、大抵は画面いっぱいに配置することが多く、ときに下画像の左スクリーンショットのように、フローティングボタンなど(ここではメニュー)と最後のコンテンツ(UITableViewCell)が被ってしまい、読みづらくなってしまいます。
※フローティングボタン(Floating Action Button)は、元々、Androidのマテリアルデザインで使われているUIでしたが、iOSアプリにおいても比較的多く見かけるUIです。
今回はこのちょっとした問題を解消するために、右スクリーンショットのように、UITableViewに下パディングを追加することで、スクロールした後に最後のコンテンツがはっきりと読めるようにしたいと思います。
やり方は簡単で、UITableViewのインスタンスに以下の一行を追記するだけでOKです。contentInsetに指定する量は適宜調整してください。
tableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 80.0, right: 0)
こうすることで、下パディングが追加された分スクロールすることができるようになるため、最後のコンテンツをフローティングボタンより上にスクロール表示することができます。
ちょっとした問題でも丁寧に解消していくことで、ユーザビリティを上げたいですね。
さいごに
僕が個人開発しているiOSアプリ『Real TODO』はApp Storeで無料で配信中です。気になった方はぜひ使ってみてください!
apps.apple.com