348
328

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

UITableViewのUX改善(今すぐ出来る!)

Last updated at Posted at 2015-11-08

はじめに

deselectRowAtIndexPath(indexPath: NSIndexPath, animated: Bool)

UITableView上にあるセルの選択状態を解除するときに使うメソッドですが、
呼び場所を替えるだけでUXを大幅に改善することが出来ます。

経緯

アプリによってはセル押下後に画面遷移するにもかかわらず、
押下直後にdeselectRowAtIndexPathを呼ぶような挙動になっていたりします。

これは悪いことではないですが、画面遷移から戻ってきた時に
セルの選択状態を解除してあげたほうがどのセルを押したのか
ユーザーに視覚的に伝えることが出来るのでUX的に良いと思ったからです。

セル押下直後に解除

deselect_in_deselected.gif

この方法だとどのセルを押したのかをユーザーは思い出さなければいけません。

遷移から戻ってきた時に解除

deselect_in_willAppear.gif

こちらはどのセルを押したのか視覚からはっきりと分かります。

ネイティブの設定アプリ

setting_deselect.gif

ちなみにネイティブの設定アプリも遷移後にセルの選択状態を解除しています。

実装方法

BadDeselect.swift
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    tableView.deselectRowAtIndexPath(indexPath, animated: true)
    
    // 画面遷移など
}

didSelectRowAtIndexPath内などでやっていた処理を、

GoodDeselect.swift
override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)
    
    if let indexPathForSelectedRow = tableView.indexPathForSelectedRow {
        tableView.deselectRowAtIndexPath(indexPathForSelectedRow, animated: true)
    }
}

viewWillAppearでやることで実現しています。

ちなみに選択状態のセルはUITableView#indexPathForSelectedRowで取得できます。

終わりに

細かい見た目ですが、「神は細部に宿る」と言います。
今すぐ出来る改善なので、是非やってみてください。
ご指摘、ご質問がありましたらコメント欄へどうぞ。

サンプルコードをGithubに置いておきました。
ご自由にお使いください。
https://github.com/AcaiBowl/CellUX-Sample

348
328
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
348
328

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?