簡要

借下來要做tableView下拉時
封面照圖片會放大
隨著下發幅度越大
圖片也會放得更大
可以使用tableView 配合新增一個 header
就可以實現
看一下Uber eat的效果

簡單來說應該是一樣的道理
除了前方還有一個View負責顯示資訊
後面圖片跟我分析的應該是一樣
來看看我 OC實作過的效果

tableView

這裡add一個tableView
並且在裡面新增一個UIimageView
來當它個header

lazy var tableView: UITableView = {
    let tableView = UITableView()
    tableView.frame = CGRect(x: 0, y: 0, width: KScreenWidth, height: KScreenHeight )
    tableView.delegate = self
    tableView.dataSource = self
    tableView.register(UINib(nibName:"CoverCell", bundle:nil),
                      forCellReuseIdentifier:"CoverCell")
    tableView.addSubview(self.headImageView)
    tableView.contentInset = UIEdgeInsets(top: 400-200, left: 0, bottom: 0, right: 0)
    return tableView
}()

headImageView

上面的ImageView 稍微新增一下圖片
以及設置大小這裡大小給他 200 高度

lazy var headImageView: UIImageView = {
    let headImageView = UIImageView()
    headImageView.frame = CGRect.init(x: 0, y: -200, width: KScreenWidth, height: 200)
    headImageView.contentMode = .scaleAspectFill
    headImageView.image = UIImage.init(named: "testPhoto")
    headImageView.clipsToBounds = true
    return headImageView
}()

tableView func

tableView func 簡單設置一下
之前文章有更詳細說明
本篇因為不太引響功能簡單帶過

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 7
}

func numberOfSections(in tableView: UITableView) -> Int {
    return 1
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 300
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell:CoverCell = tableView.dequeueReusableCell(withIdentifier: "CoverCell")
        as! CoverCell
    cell.numLabel.text = String(indexPath.item)
    return cell
}

scrollViewDidScroll

最重要的來了
如果是簡單add headerView的話
並不會放大效果
重要的是scrollViewDidScroll
可以監聽使用者滑動的距離
這個距離就可以配合transform
來放大你的View

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let offsetY = scrollView.contentOffset.y
    let radius = -offsetY/200 //200是headView高度
    if (-offsetY > 200){
        headImageView.transform = CGAffineTransform.init(scaleX: radius, y: radius)
        var frame = headImageView.frame
        frame.origin.y = offsetY
        headImageView.frame = frame
    }
}

這樣設置大概就可以了
來看看效果如何

Demo

Github
https://github.com/Bgihe/TableViewHeaderTest

https://wp.me/pcFK27-6J

Swift TableView 下拉放大封面照 下拉放大頂部圖片 (上)

Categorized in:

swift