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

Question

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

我希望能够为点击按钮的行/单元格的宽度设置动画。

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

主视图控制器：

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)
    }
}

表格视图

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

Answer 1

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

import UIKit

class UIButtonWithIndex: UIButton {

    var representedIndex: Int?

}

那么你应该在故事板中使用这个类而不是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 检索单元格

Answer 2

我建议：

1. 创建子视图，我们称之为“resizeableContentView”
2. 将“resizeableContentView”作为子单元添加到单元格的“contentView”
3. 将您的视图添加到小时候的“resizeableContentView”中
4. 如果需要，为单元格设置 .clearColor 和“contentView”背景颜色
5. 通过操作为“resizeableContentView”设置宽度
6. 重复使用时不要忘记重置单元格

Answer 3

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

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