UIView 从左边出现，从右边消失动画

雷蒙德山

我有一个 UITableView，其中包含以编程方式完成的自定义部分。我的目标是在导航栏中有一个按钮，该按钮将触发一个功能，该功能将显示或隐藏 UIView，从左侧出现并从右侧消失动画。迄今为止：

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    /** Header View **/
    let headerView = UITableViewHeaderFooterView()
    headerView.backgroundColor = UIColor.VinylRecorderTheme.white
    headerView.addBottomBorder(color: UIColor.init(red: 250/255, green: 250/255, blue: 250/255, alpha: 1), height: 1, margins: 0)
    headerView.tag = section
    headerView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(headerViewTouched)))

    /* Header ImageView */
    let headerImageView = UIImageView()
    if let imageForHeader = vinylRecorderHelper.loadThimbnailFromMetadata(url: iCloudAlbumArray[section].urlTrackArray[0].url){
        headerImageView.image = imageForHeader
    }
    else{
        headerImageView.image = UIImage(named: "music_album_ic")
    }
    headerView.addSubview(headerImageView)

    headerImageView.translatesAutoresizingMaskIntoConstraints = false
    headerView.addConstraint(NSLayoutConstraint(item: headerImageView, attribute: .leading, relatedBy: .equal, toItem: headerView, attribute: .leading, multiplier: 1, constant: 8))
    headerView.addConstraint(NSLayoutConstraint(item: headerImageView, attribute: .centerY, relatedBy: .equal, toItem: headerView, attribute: .centerY, multiplier: 1, constant: 0))
    headerView.addConstraint(NSLayoutConstraint(item: headerImageView, attribute: .height, relatedBy: .equal, toItem: headerView, attribute: .height, multiplier: 0.65, constant: 0))
    headerView.addConstraint(NSLayoutConstraint(item: headerImageView, attribute: .width, relatedBy: .equal, toItem: headerImageView, attribute: .height, multiplier: 1, constant: 0))


    /** Header Button **/
    let buttonWidth = currentDeviceTraitStatus == .wreghreg ? CGFloat(34):CGFloat(16)
    let headerExpandButton = UIButton()
    headerExpandButton.translatesAutoresizingMaskIntoConstraints = false
    headerExpandButton.contentMode = .scaleAspectFit
    headerExpandButton.setImage(#imageLiteral(resourceName: "arrow_rigth_ic"), for: .normal)
    headerExpandButton.setImage(#imageLiteral(resourceName: "arrow_down_ic"), for: .selected)
    headerExpandButton.tag = expandButtonTag

    headerView.addSubview(headerExpandButton)

    headerView.addConstraint(NSLayoutConstraint(item: headerExpandButton, attribute: .trailing, relatedBy: .equal, toItem: headerView, attribute: .trailing, multiplier: 1, constant: -8))
    headerView.addConstraint(NSLayoutConstraint(item: headerExpandButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: buttonWidth))
    headerView.addConstraint(NSLayoutConstraint(item: headerExpandButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: buttonWidth))
    headerView.addConstraint(NSLayoutConstraint(item: headerExpandButton, attribute: .centerY, relatedBy: .equal, toItem: headerView, attribute: .centerY, multiplier: 1, constant: 0))


    /** Header Label **/
    let headerNameLabel = UILabel()
    headerNameLabel.text = "\(iCloudAlbumArray[section].artistName) - \(iCloudAlbumArray[section].albumName)"
    headerNameLabel.font = currentDeviceTraitStatus == .wreghreg ? .boldSystemFont(ofSize: 18):.boldSystemFont(ofSize: 15)
    headerView.addSubview(headerNameLabel)

    headerNameLabel.translatesAutoresizingMaskIntoConstraints = false
    headerView.addConstraint(NSLayoutConstraint(item: headerNameLabel, attribute: .left, relatedBy: .equal, toItem: headerImageView, attribute: .right, multiplier: 1, constant: 8))
    headerView.addConstraint(NSLayoutConstraint(item: headerNameLabel, attribute: .top, relatedBy: .equal, toItem: headerView, attribute: .top, multiplier: 1, constant: 0))
    headerView.addConstraint(NSLayoutConstraint(item: headerNameLabel, attribute: .bottom, relatedBy: .equal, toItem: headerView, attribute: .bottom, multiplier: 1, constant: 0))

    headerView.addConstraint(NSLayoutConstraint(item: headerExpandButton, attribute: .leading, relatedBy: .equal, toItem: headerNameLabel, attribute: .trailing, multiplier: 1, constant: 8))


    /** Remove Button Label **/
    let removeButton = UIButton()
    removeButton.backgroundColor = UIColor.VinylRecorderTheme.redApple
    removeButton.tag = deleteButtonTag
    headerView.addSubview(removeButton)

    removeButton.translatesAutoresizingMaskIntoConstraints = false
    headerView.addConstraint(NSLayoutConstraint(item: removeButton, attribute: .leading, relatedBy: .equal, toItem: headerView, attribute: .leading, multiplier: 1, constant: 0))
    headerView.addConstraint(NSLayoutConstraint(item: removeButton, attribute: .top, relatedBy: .equal, toItem: headerView, attribute: .top, multiplier: 1, constant: 0))
    headerView.addConstraint(NSLayoutConstraint(item: removeButton, attribute: .bottom, relatedBy: .equal, toItem: headerView, attribute: .bottom, multiplier: 1, constant: 0))
    removeButton.widthAnchor.constraint(equalToConstant: 0).isActive = true

    removeButton.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(removeViewTouched)))


    return headerView

}

执行所需动画的函数是：

 @IBAction func startStopEditAction(_ sender: UIButton) {

    print("\(logClassName): startStopEditAction.")
    sender.isSelected = !sender.isSelected

    if let sectionView = iCloudExportsTableView.headerView(forSection: 0){

        print("\(logClassName): startStopEditAction in header")
        let removeButton:UIButton = sectionView.viewWithTag(deleteButtonTag) as! UIButton
        //removeButton.isHidden = !removeButton.isHidden
        //removeButton.widthAnchor.constraint(equalToConstant: isEditingRemove ? 60 : 0)

        UIView.transition(with: view, duration: 1.5, options: .transitionCrossDissolve, animations: {

            removeButton.widthAnchor.constraint(equalToConstant: 0).isActive = false
            removeButton.widthAnchor.constraint(equalToConstant: 60).isActive = true

            //removeButton.isHidden = !removeButton.isHidden
        })

    }

}

编辑UIView（按钮）是

let removeButton = UIButton()

雷蒙德山

经过一些工作，我已经能够实现我想要的。

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    /** Header View **/
    let headerView = UITableViewHeaderFooterView()
    headerView.backgroundColor = UIColor.VinylRecorderTheme.white
    headerView.addBottomBorder(color: UIColor.init(red: 250/255, green: 250/255, blue: 250/255, alpha: 1), height: 1, margins: 0)
    headerView.tag = section
    headerView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(headerViewTouched)))

    **************

    /** Remove Button **/
    let removeButton = UIButton()
    removeButton.backgroundColor = UIColor.VinylRecorderTheme.redApple
    removeButton.tag = section

    removeButton.setTitle(NSLocalizedString("com.messages.delete", comment: ""), for: .normal)
    removeButton.titleLabel?.font = currentDeviceTraitStatus == .wreghreg ? .boldSystemFont(ofSize: 18):.boldSystemFont(ofSize: 15)
    removeButton.setTitleColor(UIColor.white, for: .normal)

    headerView.addSubview(removeButton)

    removeButton.translatesAutoresizingMaskIntoConstraints = false
    headerView.addConstraint(NSLayoutConstraint(item: removeButton, attribute: .leading, relatedBy: .equal, toItem: headerView, attribute: .leading, multiplier: 1, constant: 0))
    headerView.addConstraint(NSLayoutConstraint(item: removeButton, attribute: .top, relatedBy: .equal, toItem: headerView, attribute: .top, multiplier: 1, constant: 0))
    headerView.addConstraint(NSLayoutConstraint(item: removeButton, attribute: .bottom, relatedBy: .equal, toItem: headerView, attribute: .bottom, multiplier: 1, constant: 0))

    let widthConstraint = NSLayoutConstraint(item: removeButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: self.isEditingRemove ? 90:0)
    widthConstraint.identifier = tableViewSectionWidthId
    headerView.addConstraint(widthConstraint)


    removeButton.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(removeViewTouched)))

    return headerView

}

然后在 IBAction 中：

 @IBAction func startStopEditAction(_ sender: UIButton) {

    sender.isSelected = !sender.isSelected

    let numberOfSections = iCloudExportsTableView.numberOfSections

    for i in 0..<numberOfSections{

        if let sectionView = iCloudExportsTableView.headerView(forSection: i){

            let filteredConstraints = sectionView.constraints.filter { $0.identifier == tableViewSectionWidthId }
            if let widthConstraint = filteredConstraints.first {

                widthConstraint.constant = self.isEditingRemove ? 90:0
                UIView.animate(withDuration: 0.5, delay: TimeInterval.init(Double(i) * Double(0.20)), options: UIViewAnimationOptions.curveEaseInOut, animations: {
                    sectionView.layoutIfNeeded()
                }, completion: { (finished) in

                })

            }

        }

    }

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。