在按钮点击时为选定的行设置动画

Question

我目前有一个 table，其中包含一个包含按钮和标签的自定义单元格。一切正常，标签显示产品名称，按钮响应按钮点击。

我希望能够为点击按钮的 row/cell 宽度设置动画。

这是我目前拥有的代码...

主要ViewController:

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "reusableCell", for: indexPath) as! CustomCell

        let data = items[indexPath.row]

        cell.displayProductName.text = data.productName

        cell.buttonAction = { sender in
            print("Button tapped...")
        }

        return cell
    }
}

自定义单元格

class CustomCell: UITableViewCell {
    var buttonAction: ((UIButton) -> Void)?

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }

    @IBAction func activeInactive(_ sender: UIButton) {
        self.buttonAction?(sender)
    }
}

Table 查看

如何设置点击按钮所在行的宽度动画？

Answer 1

我建议：

创建子视图，我们称之为"resizeableContentView"
将 "resizeableContentView" 作为子单元格添加到单元格的 "contentView"
将您的观点添加到 "resizeableContentView" 小时候
如果需要，为单元格设置 .clearColor 和 "contentView" 背景颜色
通过操作
重复使用时不要忘记重置单元格

Answer 2

您可以试试这个样板代码：

cell.buttonAction = { sender in
            UIView.animate(withDuration: 0.5) {
                cell.frame = CGRect(x: 0, y: 0, width: 150, height: 50)
            }
        }

Answer 3

您可以子class UIButton 并添加一个 index 属性，您可以在其中存储按钮的表示索引：

import UIKit

class UIButtonWithIndex: UIButton {

    var representedIndex: Int?

}

那么你应该在故事板中使用这个 class 而不是 UIButton。

之后将按钮添加为单元格中的插座并在 Interface Builder 中连接。

class CustomCell: UITableViewCell {
    @IBOutlet weak var button: UIButtonWithIndex!

    var buttonAction: ((UIButtonWithIndex) -> Void)?

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }

    @IBAction func activeInactive(_ sender: UIButtonWithIndex) {
        self.buttonAction?(sender)
    }

    // Reset the represented index when reusing the cell
    override func prepareForReuse() {
        //Reset content view width
        button.representedIndex = nil
    }
}

然后当您将 cellForRowAt indexPath 中的单元格出列时，设置 representedIndex 属性。现在，在您的 buttonAction 中，您应该拥有点击按钮所在行的索引。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "reusableCell", for: indexPath) as! CustomCell

    let data = items[indexPath.row]

    cell.displayProductName.text = data.productName

    cell.button.representedIndex = indexPath.item
    cell.buttonAction = { sender in
        print("Button tapped... \(sender.representedIndex)")
    }

    return cell
}

获得索引后，您可以使用 cellForRowAtIndexPath

检索单元格

在按钮点击时为选定的行设置动画

Animate selected row on button tap

ios

swift

uitableview

uianimation