【问题标题】:Swift - How to do add an header with parallax effect to tableViewSwift - 如何向 tableView 添加具有视差效果的标题
【发布时间】:2017-08-14 16:02:24
【问题描述】:

在 tableView 上实现标题的最有效方法是什么,它可以像在 gif 中一样为他的框架设置动画。 我需要一个可自定义的方法,因为我想要一个可以成为 pageController 或类似的标题。

编辑:我尝试了在网上找到的几个库,它们是不同的。 我需要标题保持固定在顶部,如 gif 所示。 我尝试修改示例以完成此操作,但没有结果。

我尝试更改scrollViewdidscroll,但失败了,因为偏移量没有线性变化,动画也不起作用。 我无法为栏导航上方的标题设置动画并确保它保持在其上方。

谢谢

【问题讨论】:

标签: ios swift3 tableview parallax


【解决方案1】:

给你。你可以在这个简单的例子上构建你的实现:

import UIKit

class ViewController: UITableViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let parallaxViewFrame = CGRect(x: 0, y: 0, width: self.view.bounds.width, height: 200)
        self.tableView.tableHeaderView  = ParallaxHeaderView(frame: parallaxViewFrame)
    }

    override func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let headerView = self.tableView.tableHeaderView as! ParallaxHeaderView
        headerView.scrollViewDidScroll(scrollView: scrollView)
    }
}

final class ParallaxHeaderView: UIView {

    fileprivate var heightLayoutConstraint = NSLayoutConstraint()
    fileprivate var bottomLayoutConstraint = NSLayoutConstraint()
    fileprivate var containerView = UIView()
    fileprivate var containerLayoutConstraint = NSLayoutConstraint()

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .white

        containerView.translatesAutoresizingMaskIntoConstraints = false
        containerView.backgroundColor = UIColor.red

        self.addSubview(containerView)
        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[containerView]|",
                                                       options: NSLayoutFormatOptions(rawValue: 0),
                                                       metrics: nil,
                                                       views: ["containerView" : containerView]))

        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[containerView]|",
                                                       options: NSLayoutFormatOptions(rawValue: 0),
                                                       metrics: nil,
                                                       views: ["containerView" : containerView]))

        containerLayoutConstraint = NSLayoutConstraint(item: containerView,
                                                   attribute: .height,
                                                   relatedBy: .equal,
                                                   toItem: self,
                                                   attribute: .height,
                                                   multiplier: 1.0,
                                                   constant: 0.0)
        self.addConstraint(containerLayoutConstraint)

        let imageView: UIImageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.backgroundColor = .white
        imageView.clipsToBounds = true
        imageView.contentMode = .scaleAspectFill
        imageView.image = UIImage(named: "YourImage")

        containerView.addSubview(imageView)
        containerView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[imageView]|",
                                                                options: NSLayoutFormatOptions(rawValue: 0),
                                                                metrics: nil,
                                                                views: ["imageView" : imageView]))

        bottomLayoutConstraint = NSLayoutConstraint(item: imageView,
                                                attribute: .bottom,
                                                relatedBy: .equal,
                                                toItem: containerView,
                                                attribute: .bottom,
                                                multiplier: 1.0,
                                                constant: 0.0)

        containerView.addConstraint(bottomLayoutConstraint)

        heightLayoutConstraint = NSLayoutConstraint(item: imageView,
                                                attribute: .height,
                                                relatedBy: .equal,
                                                toItem: containerView,
                                                attribute: .height,
                                                multiplier: 1.0,
                                                constant: 0.0)

        containerView.addConstraint(heightLayoutConstraint)
}

    func scrollViewDidScroll(scrollView: UIScrollView) {
        containerLayoutConstraint.constant = scrollView.contentInset.top;
        let offsetY = -(scrollView.contentOffset.y + scrollView.contentInset.top);
        containerView.clipsToBounds = offsetY <= 0
        bottomLayoutConstraint.constant = offsetY >= 0 ? 0 : -offsetY / 2
        heightLayoutConstraint.constant = max(offsetY + scrollView.contentInset.top, scrollView.contentInset.top)
    }
}

【讨论】:

  • @jeydiz 视差视图将在我的情况下在导航下消失。但是您可以在这个简单的示例上进行构建。
  • 我尝试更改 scrollviewdidscroll 方法来执行此操作,然后我发布了问题。
  • 在您的示例表格视图中使用标题滚动,在我的示例表格视图中滚动在标题后面。
  • 这里我回答了 Swift 语言的链接。 stackoverflow.com/a/50157024/3396270
  • @PiyushMathur 我猜这个答案是针对 Java 语言的?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-04-22
  • 1970-01-01
相关资源
最近更新 更多