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

时间:2016-06-10 05:12:10

标签: ios uiscrollview uiblureffect

我想要实现的是在这个库中enter image description here但是在实现这个库时遇到了问题:

问题:

  1. 它位于ObjC,我的母语为Swift因此很难理解幕后发生的事情

  2. 我以某种方式实现了这个库但是headerView的图像不在中心,我试图将ContentMode设置为scaletofill,Center但它并没有为我工作

  3. 它看起来像这样(在我滚动一次之前不在中心)

    enter image description here  所以

    滚动后

    {{3}}

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

    我的(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)
    }
    

    }

1 个答案:

答案 0 :(得分:1)

您可以在图像上添加overlayView而不是尝试模糊图像,当然设置为clearColor(),然后在向上滚动时将叠加视图的背景颜色设置为: -

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

注意,我曾使用tableView设置两种不同类型的单元格(一个parallaxHeaderViewCell包含imageView和覆盖它的overlayView,另一个用于tableView的normalCell)。我写的scrollView来自: -

func scrollViewDidScroll(scrollView: UIScrollView!)

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