15
7

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 3 years have passed since last update.

UITableViewCellEditControlとUITableViewCellReorderControlの画像を変更する(複数選択可能時のみ)

Posted at

とってもニッチな記事です:smirk_cat:
参考にする人は少なそうですが、せっかく仕事で触ったのでまとめておきます:pencil:

UITableViewCellEditControl, UITableViewCellReorderControlとは

UITableViewで編集モードになったときに、左右に出てくる部品のことです。
tableview.png

編集モード?削除?並び替え?って感じの人はこちらの記事を見ると理解できるかと思います。
http://himaratsu.hatenablog.com/entry/tableview/editmode

画像を変更する

:warning:この方法はUITableViewの編集モードで複数選択が可能な場合にのみ正常に動作します:warning:
:warning:tableView.allowsMultipleSelectionDuringEditing = trueを前提としています:warning:

Debug View Hierarchyで見るとクラス名を知ることはできますが、コードからはこれらのクラス名を使うことはできません。
スクリーンショット 2020-01-29 16.14.19.png
どうやらUITableViewCellの直下にいるらしいので、subviewsで探せそうです。それぞれUIImageViewを持っていることもわかります。

UITableViewCellのサブクラスを作って、UITableViewCellEditControlUITableViewCellReorderControlが持っているUIImageViewに画像をセットする処理を書きます。

画像をセット
final class UITableViewCustomCell: UITableViewCell {
    
    private func setEditControlImage()  {
        // UITableViewCellEditControlが持つimageViewを取得
        let imageView = subviews.first { $0.description.contains("Edit") }?.subviews.first { $0 is UIImageView } as? UIImageView
        // セルの選択状態に応じて適当な画像をセット
        imageView?.image = isSelected ? #imageLiteral(resourceName: "thunder_black") : #imageLiteral(resourceName: "thunder_white")
    }
    
    private func setReorderControlImage() {
        // UITableViewCellReorderControlが持つimageViewを取得
        let imageView = subviews.first { $0.description.contains("Reorder") }?.subviews.first { $0 is UIImageView } as? UIImageView
        // 適当な画像をセット
        imageView?.image = #imageLiteral(resourceName: "swastika")
        // そのままだと横長の画像になってしまうのでモード変更
        imageView?.contentMode = .scaleAspectFit
    }
}

後は適当なタイミングで画像をセットする処理を呼び出します。

適当なタイミングで画像をセット
extension UITableViewCustomCell {
    
    // セルがハイライトされた
    override func setHighlighted(_ highlighted: Bool, animated: Bool) {
        super.setHighlighted(highlighted, animated: animated)
        setEditControlImage()
    }
    
    // セルが選択された
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        setEditControlImage()
    }
    
    // セルの編集モードが変更された
    override func setEditing(_ editing: Bool, animated: Bool) {
        super.setEditing(editing, animated: animated)
        setEditControlImage()
        setReorderControlImage()
    }
}

これで画像を変更させることができました。
table.png

編集モードで複数選択以外にすると画像が戻ってしまう状況がある

編集モードで複数選択以外にすると、UITableViewCellEditControlをタップするか、並び替えをすると、UITableViewCellEditControlの画像がデフォルトのものに戻ってしまいます。
仕事では複数選択のときのみ考えればよかったので深く追いませんでしたが、どうすればうまくいくんでしょうか??
tabl.png

おわりに

割と無理やり標準部品の画像を変更してみました:metal:
こういうのをやると、いつもプロパティ用意しておいてほしいなと思います:thinking:
OSのバージョンアップなどで使えなくなる可能性は十分にあるので、カスタムセルのビューでやるほうが無難かと思いますが、もしよければ使ってみてください!:raised_hands:

15
7
0

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
15
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?