A few words to achieve navigation bar transparent gradient -iOS

First we look at the effect

A few words to achieve navigation bar transparent gradient -iOS

When we first set up a picture as its head view, it’s like this

A few words to achieve navigation bar transparent gradient -iOS

1 first, we have to get the navigation bar transparent

Well, first of all, we need to know, set the navigationBar BackgroundColor for Clear is useless, you can try to set its clear, but useless, for a moment we know

As for the navigation bar is set to transparent, most of the online method is

[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage [UIImage = new];

You can run it into your program, you will find that this is indeed possible, so we can get some information from the
1 we set is BackgroundImage, that view may have a ImageView in our navigationBar, and we see the navigation bar is actually see this picture therefore, set it to no pictures we can see transparent, and do not set the backgroundColor

2 we also set the shadowImage for the map, it is actually the navigation bar below the line, if you do not write second sentences you will see a line

Let’s look at the structure of navigationBar

A few words to achieve navigation bar transparent gradient -iOS

From the picture we can see very clearly that NavigationBar is behind him with a type of _UINavigationBarBackground (subclass UIImageView) view, we usually see most of it are in fact, the second arrow ImageView there is the thread, he is to add to our background ImageView above, we set BackgroundImage in fact, set up _UINavigationBarBackground image

Operating results, as shown in Figure

A few words to achieve navigation bar transparent gradient -iOS

2 have to make it more than just transparent

How do you do this? We have several options

  • Set the gradient images according to the above
    is set in a transparent way, we can think of the most direct or setBackgroundImage, according to the sliding distance to set the picture alpha, yes, we are going to set the picture, instead of setting the UIView, so you need to constantly create new picture is assigned to BackgroundImage, this feeling is not too good?
  • 2 runtime dynamic binding
    we can dynamically at runtime binding his background, and then set his background transparency, there is a three party navigation bar color gradient by way of dynamic binding framework classes online, interested friends can go to the research of LTNavigation
  • 3 direct access to the ImageView, and then set up his
    transparency from the structure chart we can see, he is NavigationBar’s view, we can pass the for… In iterates through the navigationBar.subviews, then the view.
    course, more simple, it is in the first subviews, that is, we can do barImageView = self.navigationController.navigationBar.subviews.firstObject we can use a global imageView quoted him, so every time we have to write a long list

3 actually already can

What else do we need? Yes, the last step, we only need to be in scrollViewDidScroll, according to the offset barImageView to dynamically change the background color (or transparency) on the
line for example we need to -64 (minimum offset default) varied between 200

- (void) scrollViewDidScroll: (UIScrollView * scrollView) {CGFloat minAlphaOffset = CGFloat - 64; maxAlphaOffset = 200; CGFloat offset = scrollView.contentOffset.y; CGFloat = alpha (offset - minAlphaOffset) / (maxAlphaOffset - minAlphaOffset); _barImageView.alpha = Alpha;}

In this way you can achieve the effect of the picture in the beginning of the article (in fact, not tintColor and satusBarStyle has not changed)


  1. You can also dynamically change the color of the status bar and title to match the navigation bar
The status bar [[UIApplication sharedApplication] / / setStatusBarStyle:UIStatusBarStyleLightContent] / / self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName; Title: [UIColor / someColor]} navigation bar child controls color = [UIColor someColor] self.navigationController.navigationBar.tintColor;

2 pay attention to the release of tableView delegate (or you will find out where and when it seems not right)

- (void) viewWillAppear: (BOOL) animated {[super viewWillAppear:animated]; self.tableView.delegate = self;} - (void) viewWillDisappear: (BOOL) animated {[super viewWillDisappear:animated]; self.tableView.delegate = nil;}

3 navigation bar is a public
so you may need to be in the ViewWillDisappear and then set the navigation bar as you need

There is one thing (This word from Steve jobs Learn)

I own a number of changes in the navigation bar effects, easy to use, welcome to try MXNavigationBarManager

A few words to achieve navigation bar transparent gradient -iOS