iOS top view with visual difference effect, blur effect

Attached to my demo source: Https://github.com/wqhiOS/WUParallaxView

First look at the effect:

Conducive to AutoLayout can be very simple to complete the visual difference between the effect, where the default everyone has mastered the AutoLayout.

The first step is to complete the basic work with a new project as follows: and put TableView in the Viewcontroller,

(can use the code can also use storyboard, I am more lazy, so ... ）

To add a constraint to TableView, the distance from the top of the parent view must be 0, not 64 ah ... Such as:

The basic task is complete. The following actions are important ...

People generally do here will have a question, is to put the top of the head view, and tab view as TableView Headerview it? Or is it a sub-view as a controller view?

If the effect is only to look at the head of the effect of the TableView, the top of the head view as a headerview is also possible, but we need to let tableview up when the tab can hover over the navigation bar, so this scheme is not feasible.

So, I decided to put the top of the head View and the tabs on the view Controller's views above, (the top head view of the picture, you can find a way to put up on the line). As shown in the following:

After the release, do AutoLayout automatic layout, need to pay attention to! No matter how we slide the TableView, the top of the tab is close to the bottom of the top head view, so this constraint cannot be less! If you still do not understand these constraints, you can go to my demo inside to take a look.

At this time, we will encounter a problem, our tableview is full of the entire screen placement, if I now head view and tab on the controller's view, will not block the contents of TableView.

It's important to come! Because the content of TableView needs to be displayed under the tabs, the top spacing of the content is set to the Head View + TAB view height, the code is as follows:

0 0 0);

Get here, we run the project, it will be the effect, but at this time the top of the head view can not be based on our sliding offset to change

In order to be able to change the height of the top head view: We can associate his height constraint in the controller:

With the constraint, we can change the size of the top head view based on the sliding offset, so that the width of the image changes as the height changes, we need to set the Mode property of the top head view to Aspect Fill:

Then set the agent for TableView. Follow the uiscrollviewdelegate to implement the following method so that TableView changes the size of the height constraint just associated when sliding.

1- (void) Scrollviewdidscroll: (Uiscrollview *) ScrollView {2     3     //calculates the offset, which defaults to -289;4CGFloat beginoffsety =-(Kheadh +Kbarh);5CGFloat OffsetY = Scrollview.contentoffset.y-beginoffsety;6     7     //pull down: offsety is negative, and it's getting smaller when the height of the picture needs to be bigger8     //Pull up: offsety is positive and getting bigger, this is the picture height needs to be smaller9     Ten     //so OneCGFloat height = kheadh-OffsetY; A     //when you drag up, the head view will be smaller, so that the tabs can stay below the navigation bar. The minimum height required to set the picture is 64.  -     if(Height <Kheadminh) { -Height =Kheadminh; the     } -      -Self.headViewHeight.constant =height; -      +      -     //set the transparency of the navigation bar +CGFloat alpha = OffsetY/(Kheadh-Kheadminh); A     if(Alpha >=1) { atAlpha =1; -     } -NSLog (@"%f", Alpha); -Self.navigationController.navigationBar.alpha =Alpha; -Self.visualEffectView.alpha =Alpha; -}

In order to be able to hover the selector under the navigation bar, we want to set the height of the picture, the minimum is 64.

Note: Remember to add the following code to the Viewdidload, otherwise the page will be transparent when the navigation bar is 1 instead of 0.

Self.automaticallyadjustsscrollviewinsets = YES;

In this small example, I also use the glass effect, in the picture becomes smaller, make it more and more blurred, use is iOS8 after Uivisualeffectview ... But there is a small problem is that I run on the simulation, you can see the blur effect, but the test on the real machine, there is no blur effect, if you know who can tell me ha.

iOS top view with visual difference effect, blur effect