A few words implement navigation bar transparent gradient –ios

First, let's look at the effect.

At first when we had just set a picture as its head view, it was like this

1. First of all, we need to make the nav bar transparent.

So first we need to know that setting Navigationbar's backgroundcolor as clear is useless, you can try to set it clear, but it's useless, for a moment we'll know

And for the navigation bar to be transparent, most of the way online is

[self. Navigationcontroller. Navigationbar setbackgroundimage:[UIImage new]

Forbarmetrics: Uibarmetricsdefault];

self. Navigationcontroller. Navigationbar. ShadowImage = [UIImage new];

You can run these two sentences into your program and you will find that this is really possible, then we can get a few messages from it

1. We set the backgroundimage, stating that maybe there is a ImageView child view on our Navigationbar, and we see the navigation bar actually see this picture, so set it to no picture we can see the transparency, and set BackgroundColor but not

2. We also set the ShadowImage as no diagram, it is actually the line under the navigation bar, if you do not write the second sentence you will see a string

Let's take a look at the structure of Navigationbar.

We can clearly see that navigationbar behind him is a view of the type _uinavigationbarbackground (Uiimageview subclass), and most of what we see is actually it, The second arrow where the ImageView is the string, he is added to our background imageview above, we set the BackgroundImage is actually set the image of _uinavigationbarbackground

Run effect

2. Let it be more than just transparent

We have a couple of options.

1. Set a gradient picture

   According to the above set to transparent method, we can most directly think of or setbackgroundimage, according to the sliding distance to set the image alpha, yes, we are going to set the picture, instead of setting the UIView, This will require you to continue to generate new images to backgroundimage, so that the feeling is not very good?

2. Run-time dynamic binding

   We can dynamically bind his background view at run time, and then set his background transparency, there is a three-party framework for dynamically binding the navigation bar color gradient through category mode, and interested friends can study ltnavigation by themselves.

3. Get the ImageView directly, then set his transparency.

   In fact, as we can see from the structure diagram, he is a child view of the Navigationbar, and we can iterate through the navigationbar.subviews through the for...in loop and get the view.

Of course, more simply, it's actually the first one in Subviews, that is, we can do that

Barimageview = self. Navigationcontroller. Navigationbar. Subviews. Firstobject

We can use a global imageview to quote him, lest we always write a long list of

3. Actually, it's ready.

What else do we need to do? Yes, the last step, we just need to dynamically change the background color (or transparency) of the Barimageview in Scrollviewdidscroll, depending on the offset.

For example we need to change between 64 (the default minimum offset) to 200

- (void)scrollviewdidscroll:(uiscrollview *)ScrollView {

cgfloat minalphaoffset =- ;

cgfloat maxalphaoffset = ;

cgfloat Offset = ScrollView. Contentoffset. Y;

cgfloat Alpha = (offset - minalphaoffset) / ( Maxalphaoffset - minalphaoffset);

_barimageview. Alpha = Alpha;

}

So you can achieve the effect of the picture I had at the beginning of the article (not really, tintcolor and Satusbarstyle have not changed)

Tips

1. You can also dynamically change the color of the status bar and caption to match the navigation bar

Status bar

[[uiapplication sharedapplication] setstatusbarstyle: uistatusbarstylelightcontent];

Title Color

Self. Navigationcontroller. Navigationbar. Titletextattributes = @{nsforegroundcolorattributename : [uicolor somecolor ]}

Navigation bar child control color

Self. Navigationcontroller. Navigationbar. Tintcolor = [uicolor somecolor];

2. Pay attention to releasing TableView's delegate (or you will find out where you are when you enter and exit)

- (void)viewwillappear:(BOOL)animated {

[Super Viewwillappear: Animated];

self. TableView. Delegate = self;

}

- (void)viewwilldisappear:(BOOL)animated {

[Super Viewwilldisappear: Animated];

self. TableView. Delegate = nil;

}

3. The navigation bar is public

So you may need to set the navigation bar in the viewwilldisappear to look like you need it.

One more thing (this word learn from Steve jobs)

I myself encapsulated some navigation bar change effect, easy to use, welcome to try Mxnavigationbarmanager

Https://github.com/cwxatlm/MXNavigationBarManager

A few words implement navigation bar transparent gradient –ios