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

Posted 2023-02-27

【中文标题】在按钮点击时为选定的行设置动画

【英文标题】：Animate selected row on button tap

【发布时间】：2019-07-10 12:14:47

【问题描述】：

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

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

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

主视图控制器：

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)
    

表格视图

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

【参考方案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 检索单元格

【讨论】：

我会试试这个，让你知道。快速提问，item 来自哪里？谢谢。

同indexPath.row ***.com/questions/14765730/…

成功了，非常感谢！仅供参考 - 这就是我检索单元格的方式...let currentCell = self.myTableView.cellForRow(at: IndexPath(row:sender.representedIndex!, section: 0))

【参考方案2】：

我建议：

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

【参考方案3】：

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

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

【讨论】：

@ cagri colak - 但是如何在方法 cellForRowAt indexPath: 中获取选定的行？我需要知道点击了哪一行。

像这样： func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) UIView.animate(withDuration: 0.5) tableView.cellForRow(at: indexPath)?.frame = CGRect(x: 0, y: 0, 宽度: 150, 高度: 50)

但我没有直接点击该行，我在单元格内有一个按钮将被点击。见，LorenzOliveto 的解决方案。