[UIKit] 画面遷移後にUITableViewのセルが選択状態のままになってしまうのを防ぐ

こんにちは、あきお(@akio0911)です。

今回はタップして選択状態になってしまったセルを元に戻す方法を紹介します。

deselectRow(at:animated:) を使う

UITableViewを使ったアプリで、以下のようにタップした項目がずっと選択状態のままになってしまうことがあります。これは見た目的にちょっとかっこ悪いですね。

そんな時に使えるのが、こちらの deselectRow(at:animated:) というメソッドです。

deselectRow(at:animated:) | Apple Developer Documentation

試しに使ってみましょう。遷移元のリスト画面に以下のようなコードを追加してみます。

早速動かしてみます。

タップしたセルが選択状態のままにならなくなりましたね！これで解決！・・・といきたいところですが、実はまだ問題があります。

どの項目から戻ってきたのかを分かりやすくする

iOSの設定アプリでセル選択からの画面遷移の挙動を見てみましょう。

タップしたセルの選択状態解除は前の画面に戻るタイミングで行っています。なぜこのような挙動にしているのかというと、こうすることで「どの項目から戻ってきたのかが視覚的に分かりやすくなる」んですね。今回の例でいうと、「一般」という項目から戻ってきたことが分かりやすくなるわけです。

ではこの挙動を先ほどのサンプルアプリに組み込んでみましょう。以下のようなコードを1つ目の遷移元の画面に追記します。

では動作を確認してみましょう。

無事、前の画面に戻る時にどの項目から戻ってきたのかが分かりやすくなりました。

UITableViewController の場合は clearsSelectionOnViewWillAppear を使う

ちなみに今回はUIViewControllerを継承したクラスでの実装例を紹介しましたが、UITableViewControllerには今回の挙動をサポートする仕組みが最初から備わっています。clearsSelectionOnViewWillAppearというプロパティがあり、こちらがtrueになっていると遷移先から戻ってきた時に選択解除されるようになります。デフォルト値はtrueなので、UITableViewControllerから継承して画面を作っている場合は特に何もしなくても今回の挙動を実現できることになります。

関連動画