CODEWITHSUNDEEP
swiftxcodeuitableviewuiviewcontrollerios11
Villarrealized
Villarrealized

Reputation: 877

iOS 11 large title navigation bar snaps instead of smooth transition

I'm facing an issue where the large title navigation bar collapses very abruptly when scrolling on a UITableView embedded inside of a UIViewController. The problem seems to only occur when scrolling up on the screen. When scrolling down on the screen, the title transitions smoothly to being big again, but not vice versa.

This issue does NOT occur if using a UITableViewController.

Here is the normal, expected behavior when scrolling inside a UITableViewController.

iOS 11 UITableView inside of a UIViewController (broken abrupt transition when scrolling)

And here is the broken, abrupt transition when using a UITableView inside of a UIViewController.

iOS 11 UITableViewController (transitioning properly)

Here is the code for the broken implementation:

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

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

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

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Basic", for: indexPath)

        cell.textLabel?.text = "Title \(indexPath.row)"

        return cell
    }

}

The Navigation Bar has Prefers Large Titles checked and the Navigation Item has Large Title set to Automatic.

The code and configuration for both examples above is exactly the same except for the one being a UITableViewController vs. a UITableView inside of a UIViewController.

I have also observed that the broken behavior does NOT occur if the contents of the UITableView does not exceed the view's height. But once there are more cells than can fit on screen, it breaks.

Any idea if I'm doing something wrong or if this is an iOS 11 bug?

Upvotes: 37

Views: 18084

Answers (5)

Soolar
Soolar

Reputation: 726

I faced same issue - I had UIViewController embedded in UINavigationController, the UIViewController had tableview with leading, trailing, top, bottom constraints to safe area. The whole tableview behaved jumpy / snappy. The trick was to change top constraint of tableview to superview.

Upvotes: 66

heyfrank
heyfrank

Reputation: 5647

I had a similar looking issue and solved it by removing UINavigationBar.appearance().isTranslucent = false from my AppDelegate.

UPDATE: If you don't want translucency, you should enable extendedLayoutIncludesOpaqueBars. That way all the glitches are fixed.

Upvotes: 7

Yongqiang Zhou
Yongqiang Zhou

Reputation: 332

Soolar's answer is right, but I don't know how to fix it in storyboard. Finally I solved the problem with Roman's solution in another question, by adding:

NSLayoutConstraint.activate([
    scrollView.topAnchor.constraint(equalTo: view.topAnchor),
    scrollView.leftAnchor.constraint(equalTo: view.leftAnchor),
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
    scrollView.rightAnchor.constraint(equalTo: view.rightAnchor)
])

in viewDidLoad.

Original answer: https://stackoverflow.com/a/48321447/1386369

Upvotes: 0

FarouK
FarouK

Reputation: 910

In Interface Builder:

  1. Select your "viewController".
  2. Attribute Inspector tick "Under Opaque Bars" and "Under Top Bars".
  3. Make your top constraints of your scrollView second Item to "SuperView" not "SafeArea".

It worked with me.

Reference

Upvotes: 4

Filippo
Filippo

Reputation: 1046

Put this line of code on your UIViewController containing UITableView and works fine for me.

Swift

extendedLayoutIncludesOpaqueBars = true;

Objective-C

self.extendedLayoutIncludesOpaqueBars = YES;

Set UITableView AutoLayout top space to "Superview" instead of "Safe Area"

Upvotes: 50

Related Questions