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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
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 } } |
Bu yazı yorumlara kapalı.