如何在表视图行高改变时添加动画?

时间:2018-03-13 04:40:10

标签: ios swift core-animation

我正在尝试创建一个FAQ视图控制器,我知道有一个名为“FAQView”的pod来制作这个FAQ页面,但我需要自定义,所以我自己制作。我想我的最终结果将是这样的

enter image description here

当行展开时有一点点动画,我需要添加该动画。此常见问题解答的表格视图如下

enter image description here

我希望在行高度从某个单元格中的80到140更改时添加动画

这是我的代码,我的视图控制器代码:

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    var FAQs = [FAQ]()

    @IBOutlet weak var tableView: UITableView!

    var selectedRow : Int?
    var cellIsExpanded : Bool = false {
        didSet {
            tableView.reloadData()
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.dataSource = self
        tableView.delegate = self
        getFAQ()        
    }

    func getFAQ() {

    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return FAQs.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "FAQCell") as! TableViewCell
        cell.FAQData = FAQs[indexPath.row]
        cell.expandButton.tag = indexPath.row

        // to implement FAQCellDelegate
        cell.cellDelegate = self

        return cell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

        var height:CGFloat = CGFloat()

        if cellIsExpanded == false {
            height = 80
        } else {
            if indexPath.row == selectedRow {
                height = 160
            } else {
                height = 80
            }
        }
        return height
    }
}

extension ViewController : FAQCellDelegate {
    func didPressButton(isExpanded: Bool, tag: Int) {
        cellIsExpanded = isExpanded
        selectedRow = tag

    }
}

我的表格查看单元格代码如下

import UIKit

protocol FAQCellDelegate : class {
    func didPressButton(isExpanded: Bool, tag: Int)
}

class TableViewCell: UITableViewCell {

    @IBOutlet weak var questionLabel: UILabel!
    @IBOutlet weak var answerLabel: UILabel!
    @IBOutlet weak var expandButton: UIButton!

    var expanded = false
    var FAQData : FAQ! {
        didSet {
            questionLabel.text = FAQData.question
            answerLabel.text = FAQData.answer
        }
    }

    weak var cellDelegate: FAQCellDelegate?

    @IBAction func expandButtonDidPressed(_ sender: Any) {

        if expanded == true {
            expanded = false
            cellDelegate?.didPressButton(isExpanded: expanded, tag: expandButton.tag)

        } else {
            expanded = true
            cellDelegate?.didPressButton(isExpanded: expanded, tag: expandButton.tag)

        }
    }
}

4 个答案:

答案 0 :(得分:3)

请不要重新加载tableview,而是在' cellIsExpanded'已设定。使用以下代码

在iOS 11中,

- (void)performBatchUpdates:(void (NS_NOESCAPE ^ _Nullable)(void))updates completion:(void (^ _Nullable)(BOOL finished))completion

iOS 10或更低版本,

- (void)beginUpdates;
- (void)endUpdates; 

答案 1 :(得分:1)

你应该这样做,我已经做了简单的tableview。请进行适当的更改。

像这样声明selectedIndexs

var selectedIndexs: [IndexPath: Bool] = [:]

实施此方法,

func cellIsSelected(indexPath: IndexPath) -> Bool {
    if let number = selectedIndexs[indexPath] {
        return number
    } else {
        return false
    }
}

现在didSelectRowAt indexPath

extension ViewController: UITableViewDelegate{
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)

        let isSelected = !self.cellIsSelected(indexPath: indexPath)
        selectedIndexs[indexPath] = isSelected

        tableView.beginUpdates()
        tableView.endUpdates()
    }
}

像这样实施heightForRowAt indexPath方法,

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    if self.cellIsSelected(indexPath: indexPath) {
        return 100
    } else {
        return 44
    }
}

当用户点击didSelectRowAt indexPath方法中的任何单元格时,我有动画TableViewCell的高度,您也可以在按钮点击事件中执行此操作。做出必要的改变并完成。

如有任何疑问,请与我联系。

答案 2 :(得分:0)

在didPressButton函数中添加“self.tableView.reloadData()”行,如下所示

func didPressButton(isExpanded: Bool, tag: Int) {
        cellIsExpanded = isExpanded
        selectedRow = tag
        self.tableView.reloadData()
}

在expandButtonDidPressed函数上添加动画,如下所示

@IBAction func expandButtonDidPressed(_ sender: Any) {

        if expanded == true {
            expanded = false
            cellDelegate?.didPressButton(isExpanded: expanded, tag: expandButton.tag)

        } else {
            expanded = true
            cellDelegate?.didPressButton(isExpanded: expanded, tag: expandButton.tag)

        }

self.animate(withDuration: 0.25, animations: {
    sender.transform = CGAffineTransform(rotationAngle: CGFloat.pi)
})
    }

答案 3 :(得分:0)

转到CollapsibleHeader。我一直在我的几个应用程序中使用它。提供优雅的动画,正是您想要的。更不用说,很容易整合。