iOS Development

iOS tableView header 视差滚动 放大效果

2016-03-17  本文已影响740人  anddygon
import UIKit

class DetailViewController: UIViewController {
    
    private let parallexHeaderView: ParallexHeaderView = NSBundle.mainBundle().loadNibNamed("ParallexHeaderView", owner: nil, options: nil).first as! ParallexHeaderView
    private let imageScale: CGFloat = 667/956.0
    @IBOutlet weak var tableView: UITableView!
    var currentColorAlpha: CGFloat = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "Cell")
        navigationController?.navigationBar.setBackgroundImage(UIImage.imageWithColor(UIColor.whiteColor().colorWithAlphaComponent(0)), forBarMetrics: .Default)
        navigationController?.navigationBar.shadowImage = UIImage()
        
        parallexHeaderView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.width/imageScale)
        tableView.tableHeaderView = parallexHeaderView
    }
    
    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
        navigationController?.navigationBar.setBackgroundImage(UIImage.imageWithColor(UIColor.whiteColor().colorWithAlphaComponent(0.99)), forBarMetrics: .Default)
    }
    
}

extension DetailViewController: UIScrollViewDelegate {
    
    func scrollViewDidScroll(scrollView: UIScrollView) {
        let yOffset = scrollView.contentOffset.y
        parallexHeaderView.clipsToBounds = yOffset > 0
        if yOffset > 0 {//平移动画
            parallexHeaderView.imageView.transform = CGAffineTransformMakeTranslation(0, yOffset * 0.6)
        } else if yOffset < 0 {//缩放动画
            let scale = abs(yOffset)/(parallexHeaderView.frame.height)
            let scaleTransform = CGAffineTransformMakeScale(1 + scale, 1 + scale)
            let translationTransform = CGAffineTransformMakeTranslation(0, yOffset/2)
            let concatTransform = CGAffineTransformConcat(scaleTransform, translationTransform)
            parallexHeaderView.imageView.transform = concatTransform
        } else {
            parallexHeaderView.imageView.transform = CGAffineTransformIdentity
        }
        
        let value = yOffset - parallexHeaderView.frame.height
        var colorAlpha: CGFloat
        if value > -64 && value <= 0 {
            colorAlpha = CGFloat(1) - abs(value)/64
        } else if value <= -64 {
            colorAlpha = 0
        } else {
            colorAlpha = 0.99
        }
        currentColorAlpha = colorAlpha
        navigationController?.navigationBar.setBackgroundImage(UIImage.imageWithColor(UIColor.whiteColor().colorWithAlphaComponent(colorAlpha)), forBarMetrics: .Default)
        navigationController?.navigationBar.shadowImage = UIImage.imageWithColor(UIColor.groupTableViewBackgroundColor().colorWithAlphaComponent(colorAlpha))
    }
    
}

extension DetailViewController: UITableViewDataSource {
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 36
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("Cell")!
        cell.textLabel?.text = "这是第\(indexPath.row + 1)个Cell"
        return cell
    }
    
}

extension UIImage {
    
    class func imageWithColor(color: UIColor)-> UIImage {
        let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0)
        defer { UIGraphicsEndImageContext() }
        let ctx = UIGraphicsGetCurrentContext()
        CGContextSetFillColorWithColor(ctx, color.CGColor)
        CGContextFillRect(ctx, rect)
        return UIGraphicsGetImageFromCurrentImageContext()
    }
    
}
上一篇下一篇

猜你喜欢

热点阅读