UITableView Custom header

Merhabalar bu yazımda iOS uygulama geliştirirken UITableView üzerinde bulunan header kısmını nasıl özelleştirebileceğinizi göstereceğim.

Kullanıcılar ilk olarak tasarım ile karşılaştıkları için uygulamamızın kullanışlılığı ve kullanım kolaylığının yanı sıra performanstan çalmadan tasarım, animasyonlara önem göstermemiz gerekli. Bu yazımda bazı uygulamalarda görmüş olabileceğiniz bir durum olan UITableView header kısmını çapraz kesim biçiminde UIImageView ekleyeceğiz. Dilerseniz Content bir view ekleyip üzerine farklı nesneler ekleyebilirsiniz.

Aşağıdaki kod örneğini inceleyebilir ve deneyebilirsiniz.

import UIKit

class mainVC: UIViewController {
    
    @IBOutlet weak var tblView: UITableView!
    
    var data:[String] = ["Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.",
                         "It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.",
                         "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."]
    
    var headerView:UIImageView = UIImageView()
    var headerLayer:CAShapeLayer!
    
    let headerHead:CGFloat = 350
    let headerCut:CGFloat = 30
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        headerView.image = #imageLiteral(resourceName: "l1")
        headerView.contentMode = .scaleToFill
        
        tblView.tableHeaderView = nil
        tblView.estimatedRowHeight = 60.0
        tblView.rowHeight = UITableViewAutomaticDimension
        tblView.addSubview(headerView)

        headerLayer = CAShapeLayer()
        headerLayer.fillColor = UIColor.white.cgColor
        headerView.layer.mask = headerLayer

        let newHeight = headerHead - headerCut / 2
        tblView.contentInset = UIEdgeInsetsMake(newHeight, 0, 0, 0)
        tblView.contentOffset = CGPoint(x: 0, y: -newHeight)

        setupHeader()
    }
    
    func setupHeader() {
        let newHeight = headerHead - headerCut / 2
        var getHeaderFrame = CGRect(x: 0, y: -newHeight, width: tblView.bounds.width, height: self.headerHead)
        
        if tblView.contentOffset.y < newHeight {
            getHeaderFrame.origin.y = tblView.contentOffset.y
            getHeaderFrame.size.height = -tblView.contentOffset.y + headerCut / 2
        }
        
        self.headerView.frame = getHeaderFrame
        
        let cutDirection = UIBezierPath()
        cutDirection.move(to: CGPoint(x: 0, y: 0))
        cutDirection.addLine(to: CGPoint(x: getHeaderFrame.width, y: 0))
        cutDirection.addLine(to: CGPoint(x: getHeaderFrame.width, y: getHeaderFrame.height))
        cutDirection.addLine(to: CGPoint(x: 0, y: getHeaderFrame.height - headerCut))
        headerLayer.path = cutDirection.cgPath
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        setupHeader()
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.tblView.decelerationRate = UIScrollViewDecelerationRateFast
    }
    
    override var prefersStatusBarHidden: Bool {
        return true
    }
}//

extension mainVC: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        cell.textLabel?.text = data[indexPath.row]
        cell.textLabel?.numberOfLines = 0
        cell.textLabel?.textAlignment = .justified
        return cell
    }

    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return UITableViewAutomaticDimension
    }
}

import UIKit

class mainVC: UIViewController {

@IBOutlet weak var tblView: UITableView!

var data:[String] = ["Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.",

"It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.",

"Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."]

var headerView:UIImageView = UIImageView()

var headerLayer:CAShapeLayer!

let headerHead:CGFloat = 350

let headerCut:CGFloat = 30

override func viewDidLoad() {

super.viewDidLoad()

headerView.image = #imageLiteral(resourceName: "l1")

headerView.contentMode = .scaleToFill

tblView.tableHeaderView = nil

tblView.estimatedRowHeight = 60.0

tblView.rowHeight = UITableViewAutomaticDimension

tblView.addSubview(headerView)

headerLayer = CAShapeLayer()

headerLayer.fillColor = UIColor.white.cgColor

headerView.layer.mask = headerLayer

let newHeight = headerHead - headerCut / 2

tblView.contentInset = UIEdgeInsetsMake(newHeight, 0, 0, 0)

tblView.contentOffset = CGPoint(x: 0, y: -newHeight)

setupHeader()

}

func setupHeader() {

let newHeight = headerHead - headerCut / 2

var getHeaderFrame = CGRect(x: 0, y: -newHeight, width: tblView.bounds.width, height: self.headerHead)

if tblView.contentOffset.y < newHeight {

getHeaderFrame.origin.y = tblView.contentOffset.y

getHeaderFrame.size.height = -tblView.contentOffset.y + headerCut / 2

}

self.headerView.frame = getHeaderFrame

let cutDirection = UIBezierPath()

cutDirection.move(to: CGPoint(x: 0, y: 0))

cutDirection.addLine(to: CGPoint(x: getHeaderFrame.width, y: 0))

cutDirection.addLine(to: CGPoint(x: getHeaderFrame.width, y: getHeaderFrame.height))

cutDirection.addLine(to: CGPoint(x: 0, y: getHeaderFrame.height - headerCut))

headerLayer.path = cutDirection.cgPath

}

func scrollViewDidScroll(_ scrollView: UIScrollView) {

setupHeader()

}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

self.tblView.decelerationRate = UIScrollViewDecelerationRateFast

}

override var prefersStatusBarHidden: Bool {

return true

}

}//

extension mainVC: UITableViewDelegate, UITableViewDataSource {

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

return data.count

}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

let cell = UITableViewCell()

cell.textLabel?.text = data[indexPath.row]

cell.textLabel?.numberOfLines = 0

cell.textLabel?.textAlignment = .justified

return cell

}

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {

return UITableViewAutomaticDimension

}