Animate headerView of TableView while pulling down UITableView in swift

Question

I am trying to create a growing UITableViewHeader on UITableView. I have a UITableView and a mapView set in the tableHeaderView of UITableView.

tblView.bounces = true
tblView.bouncesZoom = true
tblView.alwaysBounceVertical = true
mapView.frame = CGRectMake(0, 0, self.view.frame.size.width, CGFloat(kMapHeaderHeight))
mapView.mapType = MKMapType.Standard
mapView.zoomEnabled=true
mapView.scrollEnabled = true
mapView.delegate = mapHelper
tblView.tableHeaderView = mapView

And also implemented scrollViewDidScroll delegate and whenever it scrolls down, I have changed the frame of headerview as

func scrollViewDidScroll(scrollView: UIScrollView) {
    var scrollOffset = scrollView.contentOffset.y
    println("\(scrollOffset)")
    var headerFrame : CGRect = self.mapView.frame
    if (scrollOffset < 0){
        headerFrame.size.height  -= scrollView.contentOffset.y/3
    }
    self.mapView.frame = headerFrame
}

However, it does not grow as expected without bouncing.Seems very unclear. Any help?

I am following these tutorials to create a Growing UITableViewheader when pulling down as UITableVIew header without bouncing when pull down , Expand UITableView Header View to Bounce Area When Pulling Down

Here is the link of the project : https://drive.google.com/file/d/0B6dTvD1JbkgBVENUS1ROMzI0Wnc/vie

EDITED: i somehow managed to have the effect but the animation seems very slow

func scrollViewDidScroll(scrollView: UIScrollView) {
        let yPos: CGFloat = -scrollView.contentOffset.y

        if (yPos > 0) {
            var mapViewRect: CGRect = self.mapView.frame
            mapViewRect.origin.y = scrollView.contentOffset.y
            mapViewRect.size.height = kHeaderHeight+yPos
            self.mapView.frame = mapViewRect
        }
    }
let kHeaderHeight:CGFloat = 200

I tried the same as you, but I wasn't be able to change the size of the headerView. But following this http://www.thinkandbuild.it/implementing-the-twitter-ios-app-ui/ tutorial, I did achieved that. — Dániel Nagy, May 16 '15 at 10:48
thanks..but no idea how to implement it..canyou post it as an answer — LC 웃, May 16 '15 at 11:11

score 1 · Answer 1 · answered May 16 '15 at 12:25

1

I suggest you to use this tutorial.

The most important parts of it:

Create a scrollView (or whatever that is a subclass of a UIScrollView) and a separate view (which will be functioning as a headerView, so let's call if headerView)
add the headerView and the scrollView as a subView of your view
implement the scrollViewDidScroll method, and put the framing logic there (of course, if you're using autolayout, you have to manage constraints there)

answered May 16 '15 at 12:25

Dániel Nagy

11,815
9
50
58

you know i tried this..but not working..can you help me more please? – LC 웃 May 17 '15 at 12:54
@anishparajuli what exeactly was your problem? – Dániel Nagy May 17 '15 at 14:14
@anishparajuli did you set constraints for the mapView? Or how did you set up the mapView? – Dániel Nagy May 17 '15 at 15:23
i have done it programmatically..there is the link for the project in the question – LC 웃 May 17 '15 at 15:34
I'm checking this via my phone, so I cannot unzip those files. – Dániel Nagy May 17 '15 at 16:06
i tried that way..but it doesnot add transformation as i want..it zooms the mapView not just expand towards down...as well as disables scrolling on MapView – LC 웃 May 18 '15 at 07:11

LC 웃 · Accepted Answer · 2016-06-03T14:33:25.673

Actually the animation was not working well in simulator of xcode6.3. I tried 2 days for this and posted a bounty here but when i finally I tested it on real device and found the MapView was properly bouncing.If anyone needs it..here is the piece of logic.

 let kHeaderHeight:CGFloat = 380
    class NewBookingVC: UIViewController {

        @IBOutlet weak var tblView: UITableView!
        let mapView : MKMapView = MKMapView()

        var customTableHeaderView:UIView = UIView()
        override func viewDidLoad() {
            super.viewDidLoad()

            tblView.delegate = self
            tblView.dataSource = self
            mapView.frame = CGRectMake(0, 0, self.view.frame.size.width, 380)
            mapView.mapType = MKMapType.Standard
            mapView.zoomEnabled=true
            mapView.scrollEnabled = true

            customTableHeaderView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 380))
            customTableHeaderView.addSubview(mapView)
            tblView.tableHeaderView = customTableHeaderView

        }

        func scrollViewDidScroll(scrollView: UIScrollView) {
            let yPos: CGFloat = -scrollView.contentOffset.y

            if (yPos > 0) {
                var mapViewRect: CGRect = self.mapView.frame
                mapViewRect.origin.y = scrollView.contentOffset.y
                mapViewRect.size.height = kHeaderHeight+yPos
                self.mapView.frame = mapViewRect
            }
        }

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

    }

score 0 · Answer 3 · answered May 20 '15 at 02:44

Actually what you have to do is implement the scrollview delegate for table view because it inherits from scrollview and you can implement scrollViewDidScroll delegate and whenever it scrolls down, change the frame of headerview.

Idea behind this while scrolling you always have to keep the y-position of the MKMapView at the zero position....and height should incerase accordingly...

func scrollViewDidScroll(scrollView: UIScrollView) {
            let yPos: CGFloat = -scrollView.contentOffset.y

            if (yPos > 0) {
                //adjust your mapview y-pos and height
                //adjusting new position is all about real math
             }
        }

Performance in the iOS Simulator is not expected to match performance on device. The iOS Simulator is meant as a tool for rapid prototyping and fast iteration.In your case too, redrawing of MapView performance is quite slow in the simulator because at each Scroll you are calculating its new frame and height. So it takes some time adjusting new frame and seems very slow.

However it works well while tuning on real devices.

Animate headerView of TableView while pulling down UITableView in swift

3 Answers3