Shulou(Shulou.com)06/03 Report--

This article will explain in detail how iOS can achieve a simple color gradient effect in the navigation bar. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Thinking and principle

How do I color the navigation bar?

/ / method 1 self.navigationController.navigationBar.backgroundColor = [UIColor redColor]; / / method 2 [self.navigationController.navigationBar setBackgroundImage: [UIImage imageNamed:@ "red.png"] forBarMetrics:UIBarMetricsDefault]

Both of the above methods can add color to the navigation bar, but the effect of method 1 is not required here.

Set the effect of the background color directly

The reason is that UIView, UIImageView, UILabel and other controls are added to the structure of UINavigationBar, covering UINavigationBar.

The effect of method 2 is in line with the expectation.

UINavigationBar structure diagram

How do I convert colors to pictures?

Post the code directly and attach comments:

-(UIImage *) imageWithColor: (UIColor *) color {/ / create a 1 pixel area and start drawing CGRect rect = CGRectMake (0,0,1,1); UIGraphicsBeginImageContext (rect.size); / / create an artboard and fill the color and area CGContextRef context = UIGraphicsGetCurrentContext (); CGContextSetFillColorWithColor (context, [color CGColor]); CGContextFillRect (context, rect); / / get a picture from the artboard and close the picture drawing UIImage * image = UIGraphicsGetImageFromCurrentImageContext (); UIGraphicsEndImageContext (); return image;}

How do I set the background for the navigation bar when I slide?

There is usually a sliding view (UITableview, UICollectionView, etc.) on the display information page, so it is not difficult to imagine that the transparency of the color can be calculated according to the vertical offset of the sliding view in the scrollViewDidScroll method of the sliding view.

Realize

In addition to the above problem thinking and basic principles, there are some contents that need to be paid attention to in the actual implementation process.

Concealment and display of navigation bar

There are two ways to hide the navigation bar when the page is dropped down:

/ / method 1: [self.navigationController setNavigationBarHidden:YES]; / / method 2: self.navigationController.navigationBar.hidden = YES

The above two methods have the same effect, except that one is to manipulate the property of navigationController (navigationBar is a property of navigationController), and the other is to manipulate the property of navigationBar.

However, the method will appear a bug, that is, when the initial state of the page setNavigationBarHidden is YES, which means that navigationBar does not exist at that moment, then the controls on the navigation bar will not be seen naturally, and the emergence and disappearance of navigationBar will be very sudden.

The effect of method 2 will be much better, because the navigationBar itself exists, only to show and hide the operation, the transition is also relatively smooth.

The handling of page switching

As the common area of the navigation bar, we can customize it, taking into account the interaction between the navigation bar of the current page and other page navigation bars.

The line below the navigation bar is actually an image called shadowImage, hidden in viewWillAppear and restored in viewWillDisappear. When the page is about to be rendered to prevent other pages from coming back, the background color of the navigation bar set on other pages has an impact on this page. The background color of the navigation bar is empty in viewWillAppear. To ensure that the color of the navigation bar when you return to the page is the same as when you leave, manually adjust the scrollViewDidScroll method to calculate the color that should be rendered when the page is about to be rendered.

Encapsulation

For ease of use, encapsulate a UINavigationBar category: UINavigationBar+ChangeColor.

/ / UINavigationBar+ChangeColor.m file / / Core method-(void) changeColor: (UIColor *) color withOffsetY: (CGFloat) offsetY {if (offsetY)

1.0f? 1: (offsetY / 180); / / set a color and convert it to a picture UIImage * image = [self imageWithColor: [color colorWithAlphaComponent:alpha]]; [self setBackgroundImage:image forBarMetrics:UIBarMetricsDefault]; self.translucent = alpha > = 1.0f? NO: YES;}}

How to use it:

Star: hide the horizontal line under the navigation bar and leave the background color empty, which is generally called in viewWillAppear; changeColor:WithScrollView:AndValue:: input color, sliding view, critical value to achieve, generally called in scrollViewDidScroll; reset: display the lower horizontal line of the navigation bar, restore the navigation bar, generally called in viewWillDisappear.

/ / VC.m file / * the page is about to display * /-(void) viewWillAppear: (BOOL) animated {[super viewWillAppear:animated]; [self.navigationController.navigationBar start]; / / when the page is rendered, manually call the color that the calculation navigation bar should display at this time [self scrollViewDidScroll:_tableview];} / * the page is about to disappear * /-(void) viewWillDisappear: (BOOL) animated {[super viewWillDisappear:animated]; [self.navigationController.navigationBar reset] } / * processing during sliding * /-(void) scrollViewDidScroll: (UIScrollView *) scrollView {[self.navigationController.navigationBar changeColor: [UIColor redColor] withOffsetY:scrollView.contentOffset.y];}

On "iOS how to achieve a simple navigation bar color gradient effect" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.