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

Question

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
    }
}

Set `self.navigationController?.navigationBar.isTranslucent = false` to remove transparency from navigation bar — Priya, Jan 24 '18 at 11:32

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

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

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 24 '18 at 11:34

Rafał Sroka

39,540
23
113
143

I changed that But when I use this the background of navigation Bar will be going to black – Saeed Rahmatolahi Jan 24 '18 at 11:35
I modified my answer, please check – Rafał Sroka Jan 24 '18 at 11:38
doesn't changed when I used this – Saeed Rahmatolahi Jan 24 '18 at 11:45

score 1 · Answer 2 · answered Jan 24 '18 at 12:05

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
}
}

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

2 Answers2