IOS: Navigation bar Scrolling transparency changes as the TableView scrolls

Source: Helloyeah

Links: http://www.jianshu.com/p/b8b70afeda81

Does the following interface feel familiar. Open the app in your hand and watch it carefully, and you'll find that many of them have implemented this function. For example, the U.S. group Takeout home module, Sina Weibo's personal details page. How to achieve this function quickly! The following by the author to tell you how three lines of code, integrated this feature ...

Principle Introduction:

To make a view transparent, we'll think of two scenarios, setting the view's alpha value to 0, or set the view's BackgroundColor to Clearcolor. But Uinavigationbar is a very special view, it has no alpha attribute, then we can set opaque (opacity) to No, the code to try

Scenario I: Opacity is no

Navigationbar. Opaque = NO;

Scenario Two: background color of Clearcolor

Navigationbar. Backgroudcolor = [uicolor clearcolor];

As a result, the eggs are completely useless. What should I do now? At this point we have to look at the structure of the Uinavigationbar view, such as.

Now I teach you a little trick. Take a look at the following code:

Set an empty picture

[self. Navigationcontroller. Navigationbar setbackgroundimage:[[UIImage alloc]init] Forbarmetrics:uibarmetricsdefault];

Clear the border, set an empty picture

[self. Navigationcontroller. Navigationbar setshadowimage:[[[UIImage alloc]init]];

Then open the project hierarchy, and you'll find something amazing.

In contrast, you will find that there are only two layers left. Don't ask why, this is what the system does for you ... This happens when you set a background image.

Know the above principle, this is good to do, now as long as the monitoring, the controller internal ScrollView rolling, you can achieve the navigation bar gradually transparent effect.

• Business logic, functional implementation is actually not very difficult. But it also takes some time, the author here to share your own write a classification. To import this category, you only need to call two or three interfaces to implement this function.

  First look at the interfaces provided by the classifications

Category Introduction

• I write this classification can not only be used in the system Uitableviewcontroller and Uicollectionviewcontroller, (the system just call the classification of the two methods can be). And when you have 1 or more scrollview in your uiviewcontroller that you can scroll vertically, you can use it. (You need to tell the controller which scrollview to listen for scrolling, i.e. set Keyscrollview).

• Importantly, the code for this classification is very intrusive and easy to use. When you don't need these features, you just need to comment out a few lines of code. There is no effect on the original controller, and there is no need to change other code structures within the controller.

Classification code

Classification Interface#import<UIKit/UIKit.h>typedefstruct{BOOL isleftalpha;    BOOL Istitlealpha; BOOL Isrightalpha; }hybaritemalphacontrol;@interfaceUiviewcontroller (Navbarhidden)/** When there are multiple ScrollView in your controller, set the keyscrollview to be monitored*/@property (nonatomic,weak) Uiscrollview*Keyscrollview;/** Set whether the labels on the navigation bar need to be hidden*/- (void) Setbaritemalphacontrol: (Hybaritemalphacontrol) Isbaritemalphacontrol;/** * In the controller viewwillappear.viewwilldisappear need to call the interface * Avoid push to the next controller, eliminate the impact on other controller navigation bar*/- (void) Setinviewwillappear;- (void) Setinviewwilldisappear;/** Rate will determine the degree of color change, the greater the value, the more obvious the color change, the value range of rate is 0.01-0.999999*/- (void) Scrollcontrolrate: (cgfloat) Height colorwithred: (cgfloat) Red Green: (cgfloat) Green Blue: (cgfloat) Blue; @end

The following is the system Uitableviewcontroller, and the following is the code

Controller code:#import "TestViewController.h"#import "Uiviewcontroller+navbarhidden.h" @implementationTestviewcontroller- (void) viewdidload{[Super Viewdidload]; //Set property to automatically add 64 height when navigation bar is noSelf.automaticallyadjustsscrollviewinsets =NO; //set the head view of the TableViewUiimageview * ImageView = [[Uiimageview alloc]initwithframe:cgrectmake (0,0,0, -)]; Imageview.image= [UIImage imagenamed:@"1.jpg"]; Self.tableView.tableHeaderView=ImageView; }- (void) Scrollviewdidscroll: (Uiscrollview *) scrollview{[self scrollcontrolrate:0.5Colorwithred:0.0Green1.0Blue0.0 ];}- (void) Viewwillappear: (BOOL) animated{[Super viewwillappear:animated]; [Self setinviewwillappear];}- (void) Viewwilldisappear: (BOOL) animated{[Super viewwilldisappear:animated]; [Self setinviewwilldisappear];}@end

The following is a viewcontroller that contains a collectionview of its own creation.

Controller Code@implementationTestcollectioncontroller-(void) viewdidload{[Super Viewdidload]; //1. Set the property to automatically add 64 of the height of the navigation bar to noSelf.automaticallyadjustsscrollviewinsets =NO; //2. Set the contents of the navigation bar[self setupnavbar]; //3. If the custom sub-label on the navigation bar needs to be hidden, only the custom view will work. Invalid system default[Self Setbaritemalphacontrol: (Hybaritemalphacontrol) {0,1,1}]; //4. Set CollectionView[self setupcollectionview]; //5. Tell the program to control the change of the status bar according to which ScrollView scrollSelf.keyscrollview =Self.collectionview; [UIApplication Sharedapplication].statusbarstyle=uistatusbarstylelightcontent;} #warningListen for scrolling, call the Framework interface-(void) Scrollviewdidscroll: (Uiscrollview *) scrollview{//Rate will determine the degree of color change, the greater the value, the more obvious the color change, the value range of rate is 0.01-0.999999[Self scrollcontrolrate:0.5Colorwithred:1.0Green0.0Blue0.0 ]; }- (void) Viewwillappear: (BOOL) animated{[Super viewwillappear:animated]; [Self setinviewwillappear];}- (void) Viewwilldisappear: (BOOL) animated{[Super viewwilldisappear:animated]; [Self setinviewwilldisappear];}

Project source code sharing, I hope you like, download when the way star, good luck. Https://github.com/newyeliang/HYNavBarHidden.git

IOS: Navigation bar Scrolling transparency changes as the TableView scrolls