在 Parallax 标题上滚动时添加模糊效果 (Swift)

Question

我想要实现的是在这个库中https://github.com/Vinodh-G/ParallaxTableViewHeader，但是在实现这个库时遇到了问题：

问题：

1. 它在 ObjC 上，我的母语是 Swift，所以很难理解幕后发生的事情

2. 我以某种方式实现了这个库，但是 headerView 的图像不在 center 上，我尝试将 ContentMode 设置为 scaletofill ， Center 但它对我不起作用

它看起来像这样（直到我滚动一次才在中心）

所以

滚动后：

所以我创建了我自己的，它工作正常只有一个问题是我还没有任何模糊效果，所以如果有人知道这是如何工作的，或者我如何在我的 HeaderView 上添加这种模糊效果，请告诉我

p>

我的 (Swift) HeaderView ：

class HeaderView: UIView {

var heightLayoutConstraint = NSLayoutConstraint()
var bottomLayoutConstraint = NSLayoutConstraint()

var containerView = UIView()
var containerLayoutConstraint = NSLayoutConstraint()

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

    // The container view is needed to extend the visible area for the image view
    // to include that below the navigation bar. If this container view isn't present
    // the image view would be clipped at the navigation bar's bottom and the parallax
    // effect would not work correctly

    containerView.translatesAutoresizingMaskIntoConstraints = false
    containerView.backgroundColor = UIColor.redColor()
    self.addSubview(containerView)
    self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[containerView]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["containerView" : containerView]))
    self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("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.init()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.backgroundColor = UIColor.whiteColor()
    imageView.clipsToBounds = true
    imageView.contentMode = .ScaleAspectFill
    imageView.image = UIImage(named: "cover")
    containerView.addSubview(imageView)
    containerView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("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)
}

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



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)
}

}

Answer 1

除了试图模糊你的图像，你可以在你的图像上添加一个overlayView，当然它设置为clearColor()，然后当你向上滚动时，将覆盖视图的背景颜色设置为这个：-

UIColor(white: 1.0, alpha: scrollView.contentOffset.y/180)

注意，我使用了一个 tableView 设置了两种不同类型的单元格（一个 parallaxHeaderViewCell 包含 imageView 和overlayView，另一个是 tableView 的 normalCell）。我写的scrollView来自：-

func scrollViewDidScroll(scrollView: UIScrollView!)

我也使用自己的代码来实现视差，而不是实现第三方。它易于实施，没什么大不了的！