Damia Fuentes
Damia Fuentes

Reputation: 5493

Prefer Large Titles and RefreshControl not working well

I am using this tutorial to implement a pull-to-refresh behavior with the RefreshControl. I am using a Navigation Bar. When using normal titles everything works good. But, when using "Prefer big titles" it doesn't work correctly as you can see in the following videos. Anyone knows why? The only change between videos is the storyboard check on "Prefer Large Titles".

With "Prefer big titles" With normal title

Upvotes: 38

Views: 11522

Answers (12)

Unfortunately, no advice helped. But I found a solution that helped me. Setting the transparency of the navigation bar helped.enter image description here

Upvotes: 0

Davuth
Davuth

Reputation: 585

Short Answer

I fixed this by delaying calling to API until my collection view ends decelerating

Long Answer

I notice that the issue happens when refresh control ends refreshing while the collection view is still moving up to its original position. Therefore, I delay making API call until my collection view stops moving a.k.a ends decelerating. Here's a step by step:

  1. Follow Bruno's suggestion
  2. If you set your navigation bar's translucent value to false (navigationBar.isTranslucent = false), then you will have to set extendedLayoutIncludesOpaqueBars = true on your view controller. Otherwise, skip this.
  3. Delay api call. Since I'm using RxSwift, here's how I do it.
collectionView.rx.didEndDecelerating
    .map { [unowned self] _ in self.refreshControl.isRefreshing }
    .filter { $0 == true }
    .subscribe(onNext: { _ in
        // make api call
    })
    .disposed(by: disposeBag)
  1. After API completes, call to
refreshControl.endRefreshing()

Caveat

Do note that since we delay API call, it means that this whole pull-to-refresh process is not as quick as it could have been done without the delay.

Upvotes: 0

Karan Bhatia
Karan Bhatia

Reputation: 897

I was facing the same issue for very long, the only working solution for me was adding refresh control to the background view of tableview.

tableView.backgroundView = refreshControl

Upvotes: 0

Trzy Gracje
Trzy Gracje

Reputation: 3059

The only working solution for me is combining Bruno's suggestion with this line of code:

tableView.contentInsetAdjustmentBehavior = .always

Upvotes: 3

Balaji G
Balaji G

Reputation: 87

I've faced the same problem. Call refreshControl endRefreshing before calling further API.

refreshControl.addTarget(controller, action: #selector(refreshData(_:)), for: .valueChanged)

@objc func refreshData(_ refreshControl: UIRefreshControl) {
        refreshControl.endRefreshing()
        self.model.loadAPICall {
            self.tableView.reloadData()
        }
    }

Upvotes: 2

Asi Givati
Asi Givati

Reputation: 1475

I had this issue too, and i fixed it by embedded my scrollView (or tableView \ collectionView) inside stackView, and it's important that this stackView's top constraint will not be attached to the safeArea view (all the other constraints can). the top constraint should be connect to it's superview or to other view.

Upvotes: 0

Andreichev Michail
Andreichev Michail

Reputation: 1

Problem can be solved if add tableview or scroll view as root view in UIViewController hierarchy (like in UITableViewController)

override func loadView() {
    view = customView
}

where customView is UITableView or UICollectionView

Upvotes: -1

Random player
Random player

Reputation: 232

The only solution that worked for me using XIBs was Bruno's one: https://stackoverflow.com/a/54629641/2178888

However I did not want to use a XIB. I struggled a lot trying to make this work by code using AutoLayout.

I finally found a solution that works:

    override func loadView() {
        super.loadView()
        let tableView = UITableView()
        //configure tableView
        self.view = tableView
    }

Upvotes: 0

Luke Pearce
Luke Pearce

Reputation: 133

It seems there are a lot of different causes that could make this happen, for me I had a TableView embedded within a ViewController. I set the top layout guide of the tableview to the superview with 0. After all of that still nothing until I wrapped my RefreshControl end editing in a delayed block:

DispatchQueue.main.async {
   if self.refreshControl.isRefreshing {
       DispatchQueue.main.asyncAfter(deadline: .now() + 1.0, execute: {
            self.refreshControl.endRefreshing()
       })
   }
}

Upvotes: 4

Bruno Cunha
Bruno Cunha

Reputation: 1810

I'm having the same problem, and none of the other answers worked for me.

I realised that changing the table view top constraint from the safe area to the superview fixed that strange spinning bug.

Also, make sure the constant value for this constraint is 0 🤯.

if using storyboard

Upvotes: 51

atish vishwakarma
atish vishwakarma

Reputation: 201

If you were using tableView.tableHeaderView = refreshControl or tableView.addSubView(refreshControl) you should try using tableView.refreshControl = refreshControl

Upvotes: 8

Damia Fuentes
Damia Fuentes

Reputation: 5493

At the end what worked for me was:

  • In order to fix the RefreshControl progress bar disappearing bug with large titles:

    self.extendedLayoutIncludesOpaqueBars = true
    
  • In order to fix the list offset after refreshcontrol.endRefreshing():

    let top = self.tableView.adjustedContentInset.top
    let y = self.refreshControl!.frame.maxY + top
    self.tableView.setContentOffset(CGPoint(x: 0, y: -y), animated:true)
    

Upvotes: 23

Related Questions