We can use stretching header in our application.it becomes easier to create because by default iOS gives you the bouncy backs to table views and scroll views.Follow steps to create the stretcher header or we can say that parallax animation on table view header:-
Create object of your header View and initialize header view xib from bundle
1 2 3 |
var headerView : ProfileHeader? headerView = (Bundle.main.loadNibNamed("ProfileHeader", owner: self, options: nil)?[0] as? ProfileHeader)! headerView?.frame = CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: SCREEN_WIDTH/2) |
1 2 |
profileTableView.estimatedRowHeight = UITableViewAutomaticDimension profileTableView.tableHeaderView = headerView |
1 2 3 |
profileTableView.tableHeaderView = nil profileTableView.contentInset = UIEdgeInsets(top: SCREEN_WIDTH/2, left: 0, bottom: 0, right: 0) profileTableView.addSubview(headerView!) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) { self.profileTableView.reloadData() } func scrollViewDidScroll(_ scrollView: UIScrollView) { if headerView != nil { let yPos: CGFloat = -scrollView.contentOffset.y if yPos > 0 { var imgRect: CGRect? = headerView?.frame imgRect?.origin.y = scrollView.contentOffset.y imgRect?.size.height = SCREEN_WIDTH/2 + yPos - SCREEN_WIDTH/2 headerView?.frame = imgRect! self.profileTableView.sectionHeaderHeight = (imgRect?.size.height)! } } } |
1 2 3 4 5 6 7 8 |
func blur(){ let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light) let blurEffectView = UIVisualEffectView(effect: blurEffect) blurEffectView.frame = (headerView?.bannerImage.bounds)! blurEffectView.alpha = 0.9 blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] headerView?.bannerImage!.addSubview(blurEffectView) } |
So you have successfully added a stretchy header in your app.
Thanks for go through this blog. Stay cool and stay updated.
Be the first to comment.