Hituzi Ando's Blog

日々のアプリ開発についてや雑記など。

【iOS】UITableViewにパディングを追加してフローティングボタンと被らないようにする

こんにちは、個人アプリ開発者の@HituziANDOです。

この記事では、UITableViewにパディングを追加し、リストの最後のコンテンツがフローティングボタンなどのUIと被らないようにする方法を紹介しています。

UITableViewは配列データを一覧表示するUIとして、よく使われるViewです。僕が開発しているToDoアプリ『Real TODO』においても、作成したToDoを一覧表示するために使っています。このUITableViewですが、大抵は画面いっぱいに配置することが多く、ときに下画像の左スクリーンショットのように、フローティングボタンなど(ここではメニュー)と最後のコンテンツ(UITableViewCell)が被ってしまい、読みづらくなってしまいます。

※フローティングボタン(Floating Action Button)は、元々、Androidマテリアルデザインで使われているUIでしたが、iOSアプリにおいても比較的多く見かけるUIです。

f:id:hituziando:20200503115439p:plain

今回はこのちょっとした問題を解消するために、右スクリーンショットのように、UITableViewに下パディングを追加することで、スクロールした後に最後のコンテンツがはっきりと読めるようにしたいと思います。

やり方は簡単で、UITableViewのインスタンスに以下の一行を追記するだけでOKです。contentInsetに指定する量は適宜調整してください。

tableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 80.0, right: 0)

こうすることで、下パディングが追加された分スクロールすることができるようになるため、最後のコンテンツをフローティングボタンより上にスクロール表示することができます。

ちょっとした問題でも丁寧に解消していくことで、ユーザビリティを上げたいですね。

さいごに

僕が個人開発しているiOSアプリ『Real TODO』はApp Storeで無料で配信中です。気になった方はぜひ使ってみてください!

Real TODO - シンプルなやることリスト

Real TODO - シンプルなやることリスト

  • Hituzi ANDO
  • 仕事効率化
  • 無料
apps.apple.com