[Swift] ブラー画像をヘッダーにした、tableViewのサンプル


ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    var myTableView: UITableView!
    var myItems: NSMutableArray = []
    var myHeaderView: UIView!

    var statusBarHeight: CGFloat!
    var displayWidth: CGFloat!
    var displayHeight: CGFloat!

    /*
    ロード後
    */
    override func viewDidLoad() {
        super.viewDidLoad()

        self.setItem()

        statusBarHeight = UIApplication.sharedApplication().statusBarFrame.height
        displayWidth = self.view.frame.width
        displayHeight = self.view.frame.height

        // テーブル
        myTableView = UITableView(frame: CGRect(x: 0, y: statusBarHeight, width: displayWidth, height: displayHeight))
        myTableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "MyCell")
        myTableView.dataSource = self
        myTableView.delegate = self
        myTableView.contentInset.top = 120 //(★..コンテンツをヘッダー高さ分下げる)
        self.view.addSubview(myTableView)

        // オリジナルヘッダービューを作成
        myHeaderView = UIView(frame: CGRect(x: 0, y: -120, width: displayHeight, height: 120)) //(★..コンテンツの上にヘッダーを配置)
        myHeaderView.backgroundColor = UIColor.greenColor()
        myHeaderView.alpha = 0.9
        myTableView.addSubview(myHeaderView)

        // 画像
        let myImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: displayWidth, height: 120))
        myImageView.image = UIImage(named: "test_header.png")
        myImageView.contentMode = .ScaleAspectFill
        myImageView.clipsToBounds = true
        myHeaderView.addSubview(myImageView)

        // Blurエフェクトを適用するEffectViewを作成.
        let effectView = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffectStyle.Light))
        effectView.frame = CGRect(x: 20, y: 20, width: displayWidth - 40, height: 80)
        effectView.layer.masksToBounds = true
        effectView.layer.cornerRadius = 8
        myHeaderView.addSubview(effectView)

        // ラベル
        let myLabel = UILabel(frame: CGRect(x: 0, y: 0, width: displayWidth - 40, height: 80))
        myLabel.textAlignment = .Center
        myLabel.text = "ブラーができた"
        myLabel.textColor = UIColor.whiteColor()
        effectView.addSubview(myLabel)
    }

    /*
    アイテムをただ用意するだけ
    */
    func setItem() {
        for index in 1...18 {
            self.myItems.addObject("Item\(index)")
        }
    }

    /*
    テーブル行数
    */
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.myItems.count
    }

    /*
    テーブルセルの設定
    */
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath)
        cell.textLabel?.text = self.myItems[indexPath.row] as? String
        return cell
    }

    /*
    スクロール時
    */
    func scrollViewDidScroll(scrollView: UIScrollView) {

        // 下に引っ張ったときは、ヘッダー位置を計算して動かないようにする(★ここがポイント..)
        if scrollView.contentOffset.y < -120 {
            self.myHeaderView.frame = CGRect(x: 0, y: scrollView.contentOffset.y, width: self.displayWidth, height: 120)
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}