CODEWITHSUNDEEP
iosswiftuitableviewuiscrollviewuinavigationbar
Saeed Rahmatolahi
Saeed Rahmatolahi

Reputation: 1338

How to change UINavigationBar background color from clear to red when user scrolls down in the table view

I have a table view and a navigation bar in front of it. I want that when user scrolls down the background color of the navigation bar starts to change from clear to red, like increasing alpha.

Problem for me is that when user scroll down when navigation bar background alpha will be 1.0 the user can still see behind the navigation bar!

Here is my code: 

override func viewDidLoad() {
    super.viewDidLoad()

    self.mainProfileTableView.contentInset = UIEdgeInsetsMake(-44,0,0,0);


    self.navigationController?.navigationBar.isOpaque = true
    UIApplication.shared.statusBarView?.backgroundColor = UIColor.init(red: 180/255, green: 40/255, blue: 56/255, alpha: 1.0)

    self.navigationController?.navigationBar.barTintColor = UIColor.init(red: 180/255, green: 40/255, blue: 56/255, alpha: 1.0)


    self.navigationController?.navigationBar.setBackgroundImage(UIImage(named : "navigationBarBackGround"), for: .default)

    self.navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.view.backgroundColor = UIColor.init(red: 180/255, green: 40/255, blue: 56/255, alpha: 1.0)

}

and here is the method that detect user is scrolling Up or Down 

var lastContentOffset: CGFloat = 0


func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if (self.lastContentOffset < scrollView.contentOffset.y) {
        // moved to top
        print("move Up\(scrollView.contentOffset.y)")
        print("alpha\(Float(scrollView.contentOffset.y / 166))")
        navigationController?.navigationBar.alpha = scrollView.contentOffset.y / 166

    } else if (self.lastContentOffset > scrollView.contentOffset.y) {
        // moved to bottom

        navigationController?.navigationBar.alpha = scrollView.contentOffset.y / 166
        print("alpha\(Float(scrollView.contentOffset.y / 166))")
        print("move down\(scrollView.contentOffset.y)")

    } else {

        // didn't move
    }
}

Upvotes: 2

Views: 6868

Answers (2)

Saeed Rahmatolahi
Saeed Rahmatolahi

Reputation: 1338

Thanks for your help But I should use translucent false in the scroll View Did Change Method So the answer is this 

func scrollViewDidScroll(_ scrollView: UIScrollView) {
if (self.lastContentOffset < scrollView.contentOffset.y) {
    // moved to top
    print("move Up\(scrollView.contentOffset.y)")
    print("alpha\(Float(scrollView.contentOffset.y / 166))")
    navigationController?.navigationBar.alpha = scrollView.contentOffset.y / 166
    if Float(scrollView.contentOffset.y / 166) >= 1.0 {

            self.navigationController?.navigationBar.isTranslucent = false

            }

} else if (self.lastContentOffset > scrollView.contentOffset.y) {
    // moved to bottom

    navigationController?.navigationBar.alpha = scrollView.contentOffset.y / 166
    print("alpha\(Float(scrollView.contentOffset.y / 166))")
    print("move down\(scrollView.contentOffset.y)")

} else {

    // didn't move
}
}

Upvotes: 1

Rafał Sroka
Rafał Sroka

Reputation: 40028

Can it be that the navigation bar is translucent? Like this:

enter image description here

Change it using:

self.navigationController?.navigationBar.isTranslucent = False

And remove:

self.navigationController?.navigationBar.setBackgroundImage...
self.navigationController?.navigationBar.shadowImage = UIImage()

Then modify the barTintColor when user scrolls.

Upvotes: 1

Related Questions