tableview折叠动效

缘起于看见书旗小说的列表有点击折叠的动效，觉得十分炫酷。想了三分钟，不知道怎么写。晚上百度了下，知道了大致流程，于是自己实现了下，发现不少坑，于是写下这篇博文

实现原理：

1 tableview cell高度自适应

2 点击cell时，控制cell对应的数据源显示，更新约束后，tableView reloadData

贴下核心代码：

class CellMdl:NSObject {

    var title:String?

    var img:UIImage?

    var detail:String?

}

class FoldCell:UITableViewCell {

    var title:UILabel!

    var detail:UILabel!

    var imgView:UIImageView!

    var indicator:UIImageView!

    var mdl:CellMdl!

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {

        super.init(style: style, reuseIdentifier: reuseIdentifier)

        addViews()

    }

    required init?(coder aDecoder: NSCoder) {

        fatalError("init(coder:) has not been implemented")

    }

    func addViews() {

    }

    override func layoutSubviews() {

        title.snp.makeConstraints { (make) in

            make.top.left.equalTo(self)

            make.height.equalTo(44)

            make.right.equalTo(indicator.snp.left)

        }

        indicator.snp.makeConstraints { (make) in

            make.centerY.equalTo(title)

            make.right.equalTo(self)

        }

        imgView.snp.makeConstraints { (make) in

            make.top.equalTo(title.snp.bottom)

            make.left.right.equalTo(self)

        }

        detail.snp.makeConstraints { (make) in

            make.top.equalTo(imgView.snp.bottom)

            make.left.right.bottom.equalTo(self)

        }

    }

    func showIndicatorAni(back:Bool,blk:(()->Void)?) {

        let rotate = !back ? CGAffineTransform(rotationAngle: .pi) : .identity

        UIView.animate(withDuration: 0.3, animations: {

            self.indicator.transform = rotate

        }) { (finish) in

            self.detail.text = !back ? self.mdl.detail : nil

            self.imgView.image = !back ? self.mdl.img : nil

//            self.layoutIfNeeded()

            if blk != nil {

                blk!()

            }

        }

    }

    // 设置数据源

    func setMdl(cellMdl:CellMdl) {

        mdl = cellMdl

        title.text = cellMdl.title

//        detail.text = cellMdl.detail

//        imgView.image = cellMdl.img

    }

}

这里对应cell声明一个专属cell的model，为cell提供数据

实现autolayout的关键步骤是

　　1.setModel时，仅将显示的头部视图赋值，未赋值视图应没内容自适应后不会显示,将传入的model用变量存下来（后续使用）

　　2.点击动画，代码请细看showIndicatorAni函数

　　　　这里有两参数，第一个back参数：是否折叠，第二个是个blk，方便外部进行操作。

　　　　如果不折叠，即显示全部内容，将model的数据赋值给需要显示的视图；如果折叠，不需要显示全部内容，将不需显示的视图内容清空。

　　　　动画完且数据设置完全后，更新约束self layoutIfNeed后将动作传出

然后是外部tableView点击的具体实现

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

        if previousCell != nil {

            previousCell?.showIndicatorAni(back: true,blk: nil)

        }

        if let foldcell = tableView.cellForRow(at: indexPath) as? FoldCell {

            weak var weakSelf = self

            foldcell.showIndicatorAni(back: false,blk: {

                weakSelf?.tableView.reloadData()

            })

            previousCell = foldcell

        }

    }

这里设置个变量previousCell标识前一个选择的cell。为什么写这个变量？选择的cell动画后，前一个cell的动画要还原，并且显示的视图要隐藏，要隐藏，要隐藏！！！

然后新选择的cell.showIndicator，回调中刷新tableview

顺带提一下tableview设置的关键点

　　1.cell自适应设置姿势

　　　tableView.estimatedHeight = 100

　　　tableView.rowHeight = UITableviewAutomaticDimension

　　2.cell单选

　　　tableView.allowMutableSelection = false

效果图贴一张

巴特西

tableview折叠动效

最新文章

热门文章