0
2

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をつくる

Last updated at Posted at 2019-06-28

20190627.gif

開発環境

  • XCode10.2.1
  • Swift5.0.1

また時間があいてしまった・・・。
テーブルの編集モードで表示される、編集ボタンに画像を使いたいと言われて、何も考えずに
OKとしたら、まさかの編集ボタンをカスタマイズ出来なかった為、止むを得ずオリジナルセルを使って
編集ボタンを押した時のような動作を再現しました。
ちなみにセルの編集はスワイプ操作だけではダメという前提があります。

まずカスタムセルを用意。
カスタムセルにはスワイプ後に表示されるボタンを配置し、その上にUIView、
更にその上にボタンとラベルを配置します。

スクリーンショット 2019-06-29 00.13.30.png

ポイントしてAutoLayoutでUIViewの左右のConstraintを平常時とスワイプ後の両方を
用意し、スワイプ後のConstraintのプロパティでinstalledのチェックを外しておく

スクリーンショット 2019-06-29 00.13.47.png

後はConstraintをソースの方で平常時、スワイプ時でどちらをアクティブにするかで
で見た目は編集ボタンを押した際と同じような動きをします。
layoutIfNeeded()の動きをアニメーションで時間をかけるところがミソでしょうか

スクリーンショット 2019-06-29 00.26.08.png

セルのボタンの動きはtableviewのあるソースの方で対応します。
ボタンのtagと行数を連動させてどの行のボタンが押されたかを判定する為、
セルを追加したり削除したりするたびに、reloadData、もしくはオリジナルのテーブル再編集メソッドを動かしてやる必要があるので注意。


override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "customCellID", for: indexPath) as! CustomCell

        let object = objects[indexPath.row] as! NSDate
        cell.titleLabel.text = object.description
        
        let button = cell.button
        button?.tag = indexPath.row
        button?.addTarget(self, action: #selector(editTaped(_:)), for: .touchUpInside)
        
        let deleteButton = cell.DeleteButton
        deleteButton?.tag = indexPath.row
        deleteButton?.addTarget(self, action: #selector(deleteTaped(_:)), for: .touchUpInside)
       
        if cell.isSwiping {
            cell.swipe()
        }
        
        return cell
    }

 //MARK: @Objc

 @objc
    func insertNewObject(_ sender: Any) {
        objects.insert(NSDate(), at: 0)
        let indexPath = IndexPath(row: 0, section: 0)
        tableView.insertRows(at: [indexPath], with: .automatic)
        
        tableView.reloadData()
    }
    
    @objc func editTaped(_ sender: UIButton) {
        let cell = self.tableView.cellForRow(at: IndexPath(row: sender.tag, section: 0)) as! CustomCell
        
        cell.swipe()
    }
    
    @objc func deleteTaped(_ sender: UIButton) {
        
        objects.remove(at: sender.tag)
        tableView.deleteRows(at: [IndexPath(row: sender.tag, section: 0)], with: .fade)
        tableView.reloadData()
    }

ざっくりとですが、以上。
全体のソースはgithubにあげているので良かったら参照下さい。

参考サイト

AutoLayoutでスワイプできるUITableViewCellを実装する

Is it possible to call editActionsForRowAt of UITableview manually?

0
2
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
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?