Blurry translucent effect of UINavigationBar/UIVisualEffectView while scrolling on a WKWebView? - ios

I'd like to achieve the same effect as in Safari where the navigation bar changes slightly in color to reflect the web page that passes through while scrolling.
The 6 years old method that used to work with UIWebView is to simply include these two lines of code:
webView.scrollView.contentInset = UIEdgeInsetsMake(44.0, 0.0, 0.0, 0.0);
webView.scrollView.scrollIndicatorInsets = _webView.scrollView.contentInset;
Since WKWebView the edge insets work much like content offset. It displays correctly initially but when you scroll the web page moves underneath the UINavigationBar/UIVisualEffectView making in it impossible to reach the top bar of websites that adjust accordingly, like at apple.com
Is there any other way?
The answers below are 6 years old and obsolete.

You need to move the web view under the navigation bar, and then set the web view's contentInset, like so:
navBar.frame = CGRectMake(0, 0, self.view.bounds.size.width, 44);
webView.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);
webView.scrollView.contentInset = UIEdgeInsetsMake(44, 0, 0, 0);
webView.scrollView.scrollIndicatorInsets = webView.scrollView.contentInset;

Go to you app setting in xcode and in Status Bar Style click the drop down and select "Light".
These should apply in all your app

Related

Programmatically setting content to fill screen between tab bar and nav controller

I have a UIwebview that I want to fill the screen between the navigation bar at the top and the tab bar at the bottom. My web view is being defined programmatically and I was initializing it with a frame as below.
I have been able to get the desired behavior by hard coding in some values, but I have seen that this does not work across all devices. Specifically, it seems that different OS's might consider (0,0) as different points on the screen (the top left corner of the screen for some, and the top left most corner under the nav bar for others).
My question is, how do I set the web view position and size to fill the screen across all devices? And can anyone explain why this doesn't behave as I think it ought to?
//iphone 5s running iOS 8
webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, screenWidth, screenHeight+20)];
//iphone 5 running iOS 7
webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 64, screenWidth, screenHeight-93)];
//what i thought would work for all, but doesnt fill the height of the screen...
webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, screenWidth, screenHeight)];

iOS - UIPageControl cuts bottom off

I'm creating a UIViewControl with this this website. I finished it, but when I load my image, the bottom of my image gets cut off. I'm sure the dimensions of the image are correct, besides the UIImageView is stretched throughout whole screen.
Since the whole code is on the site, I won't be adding anything here, except for one line I changed.
I changed
self.pageViewController.view.frame =
CGRectMake(0, 0, self.view.frame.size.width,
self.view.frame.size.height - 30);
to
self.pageViewController.view.frame =
CGRectMake(0, 0, self.view.frame.size.width,
self.view.frame.size.height);
The gap got smaller but is still there. It looks like this
Thank you.
Have you taken into account the height of the status bar at the top of the phone?
I think that in iOS 7 the status bar overlaps the content by default, you might have to slide the content down a bit.

UIWebView taking up all avaialble space inside UiNavigationController

I have a UiWebView that is accessed via a UiNavigation controller. In its view the toolbar is visible and the navigation bar is hidden.
I am trying to get the WebView to take up all the available space. I found this code:
- (void)viewDidLayoutSubviews
{
//make sure web view takes up all space
self.webView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
}
This seems to work, but I would like to do this without using code and have it work for 3.5in and 4in screens.
Is this possible?
Set the AutoresizingMask property of the webview to flexible width and height.
webview.autoresizingMask=UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;

ios7 status bar overlaps toolbar when using container view

I´v read the posts regarding this issue but found nothing to work, I think it must be since I am using a toolbar and have the View Controller embedded in a container view. The status bar always overlaps. No matter if I try to replace the toolbar or set different settings in IB. It also seems that since it´s inside a container view, setting the inferred option does not work. I even tried putting two toolbars on top, but only this one shows.
The status bar in iOS 7 is transparent, so if you want to have a look similar to that of iOS6, create a view of 20 pixels and add it inside your "container" view...
UIView *statusBarView = [[UIView alloc] initWithFrame: CGRectMake(0, 0, 320, 20)];
statusBarView.backgroundColor = [UIColor blackColor];
[containerViewController.view addSubview:statusBarView];
Then set the frame of your "contained" ViewController accordingly
containedViewController.frame = CGRectMake(0, 20, 320, itsCurrentHeight - 20);
This way the status bar should not overlap with your content anymore

UIView Components Not Moving With View

I have created a UIView in a storyboard. See here for more information. My issue is when the user "logs in" then I present a new view bringing it from the left side of a screen and the main view slides off to the left, like a push navigation, but all programmatically.
So I have decided to animate this "navigation" using the following code.
view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
view.backgroundColor = [UIColor whiteColor];
//add stuff to view
[view addSubview: label];
view.frame = CGRectMake(320, 0, 0, 480);
view.clipsToBounds = YES;
[self.view addSubview:view];
//show view
[UIView animateWithDuration:.5
animations:^{
self.view.frame = CGRectMake(0,0,0,480); //move self.view off left
view.frame = CGRectMake(0, 0, 320, 480); //move new view in place
}];
My view is being successfully displayed but the existing view, self.view is not going off the left side of the screen like I want it. It moves, but it doesn't take it's components with it... When I comment out //view.frame - CGRectMake(0,0,320,480); inside the animation, so I don't display the new view I get this in the simulator on login.
The white background of the view leaves the screen but the components do not. This causes an issue because when I put the two together it does not look like the "new view" is replacing the old view like a navigation push controller but instead sliding over it. Is there a way to move these components with the self.view when I move it off the screen
Thanks for the help!
I am not sure if you can move self.view. Even if it is possible, it's not a good idea...
Anyway your code
self.view.frame = CGRectMake(0,0,0,480);
doesn't slide the view. It scales the view into a zero-width rectangle, which explain why its subviews are still there. By default subviews are aligned to top-left corner of their superviews, and since self.view's top-left hasn't moved (still (0, 0)), they remain the same. The proper way to slide a view off the screen is:
self.view.frame = CGRectMake(-320,0,320,480); // width & height MUST remain unchanged
Still, this will NOT work, since you have made view a subview of self.view... which means this line:
view.frame = CGRectMake(0, 0, 320, 480);
will set view.frame relative to self.view which now has been slided off the screen! So they will be both gone. Another good reason why you shouldn't play with self.view.frame.
IMHO, you should create a view v1 as the main view, and v2 the view that appears when logged in. Make them both subviews of self.view, hide v2 behind v1 and when user logs in, slide v1 off the screen as described above. Or maybe put v1 to the right of v2, and slide them both (so v1 will be sliding out why v2 sliding in, similar to a navigation controller).

Resources