I have an e-mail application,
which shows the content in an UIWebView inside an UISplitViewController.
Everything works fine until i rotate the device, when already zoomed in/out in the UIWebView.
When rotating the device, i adjust the frame of the UIWebView in
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
The problem is, when i zoomed in/out in the UIWebViewand then rotate the device.
The content isn't resized to it's new frame, which leads to a gray/black border in the content, or the content can be scrolled horizontal.
Addional information:
The UIWebViewis a subview on a UIScrollView which can be scrolled.
When the UIWebViewis totally visible the scrollEnabledof the UIScrollViewis disabled and the UIWebView can be scrolled.
Above picture shows the UIWebViewin landscape when selecting an email.
This is the state before rotating in both cases.
[Not zoomed before rotating]Above picture shows that the UIWebView is correctly resizing the content to it's new frame.
[Zoomed before rotating]Above picture shows the UIWebView after zooming in landscape and then rotating to portrait
-> content isn't correctly shown
Information of the UIWebView.scrollView in - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation:
<_UIWebViewScrollView: 0xb1322a0; frame = (0 0; 768 960); clipsToBounds = YES; autoresize = H; gestureRecognizers = <NSArray: 0xb1321d0>; layer = <CALayer: 0xb132270>; contentOffset: {0, 0}>
frame is correct!
Edit: Solution!!
i managed to solve it by updating the viewport width after rotating the device
CGFloat fll_width = self.view.frame.size.width;
NSString* adsl_javascript_string = [NSString stringWithFormat:#"var setViewPortScript = document.createElement('meta');\
setViewPortScript.setAttribute('name', 'viewport');\
setViewPortScript.setAttribute('content', 'width = %f');\
document.getElementsByTagName('head')[0].appendChild(setViewPortScript);", fll_width];
[adsc_webview stringByEvaluatingJavaScriptFromString:adsl_javascript_string];
i managed to solve it by updating the viewport width after rotating the device
CGFloat fll_width = self.view.frame.size.width;
NSString* adsl_javascript_string = [NSString stringWithFormat:#"var setViewPortScript = document.createElement('meta');\
setViewPortScript.setAttribute('name', 'viewport');\
setViewPortScript.setAttribute('content', 'width = %f');\
document.getElementsByTagName('head')[0].appendChild(setViewPortScript);", fll_width];
[adsc_webview stringByEvaluatingJavaScriptFromString:adsl_javascript_string];
This seems to be a bug also in iOS 7 and iOS 8.
A fix would be this:
First resize the frame on layout changes:
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
_webView.frame = self.view.bounds;
}
Then on the rotation callback reset the zoomScale to 0. Yes, 0!
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
// Allow the animation to complete
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[_webView.scrollView setZoomScale:0 animated:YES];
});
}
You can also use the new function
- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
// Allow the animation to complete
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[_webView.scrollView setZoomScale:0 animated:YES];
});
}
Related
I've created UIView Containing UILabel inside (as suggested in: AutoLayout with rotated UI Elements). The problem is that it does not want to autolayout when I rotate it by 90 degrees (see pictures).
Image before rotation:
and after:
Rotation is done by:
yTitleView.translatesAutoresizingMaskIntoConstraints = NO;
yTitleLabel.transform = CGAffineTransformMakeRotation (-3.14/2);
Constraints between SleepScoreUILabel and blue UIView are just to keep some distance between them:
EDIT1:
Tried with suggestions of #bennegeek
yTitleLabel.translatesAutoresizingMaskIntoConstraints = YES;
CGRect frame = yTitleLabel.frame;
bottom.active = NO;
top.active = NO;
leading.active = NO;
trailing.active = NO;
yTitleLabel.transform = CGAffineTransformMakeRotation (-M_PI/2);
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
yTitleLabel.frame = frame;
});
But the result is:
If after those operations I turn the constraints back active, I get:
[super viewDidLoad];
// Do any additional setup after loading the view.
if (INTERFACE_IS_IPHONE5) {
CGPoint center = _canvas.center;
CGRect frame = _canvas.frame;
frame.size.width = frame.size.height = 568;
_canvas.frame = frame;
_canvas.center = center;
}
When rotate the screen the image does not show full width of the iPhone. I am think this line of code in the view did load is causing it. Trying to update the app for iPhone 6 and 6 Plus. Any ideas?
You need to implement the method for landscape and portrait mode. Refer this Apple Documentation
I have a detail view where I want to show a title, subtitle and content for articles. I want to be able to use HTML to format the text, so I've used a UIWebView for showing the article body. This works perfectly.
How ever, all of this, is inside a UIScrollView, so my issue is that I have to calculate the height of the UIScrollView?
This is how it works today:
And this is how it looks like in Storyboard:
So what I need to find out, is what is the correct code and syntax to calculate the correct height of the UIScrollView? Amongst several things, I tried [self.scrollView sizeToFit] without luck.
EDIT: Apparently it sets the correct heights with the code below, but seems like the view never updates.
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
// get height of content in webview
CGFloat height = [[webView stringByEvaluatingJavaScriptFromString:#"document.body.scrollHeight;"] floatValue];
// set new frame height
CGRect frame = webView.frame;
frame.size.height = height;
webView.frame = frame; // webview is now correct height
// set new frame height for scrollview (parent of webview)
CGRect scrollFrame = self.scrollView.frame;
scrollFrame.size.height = webView.frame.origin.y + height;
self.scrollView.frame = scrollFrame;
// log to console for cross checking
NSLog(#"new frame: %f, scrollview frame: %f", scrollFrame.size.height, self.scrollView.frame.size.height);
}
The console reports the apparently correct height:
new frame: 582.000000, scrollview frame: 582.000000
And a quick check in Photoshop as well, this seems to be correct:
The summed value of green and blue area is 582 pixels, but the scrollview still just scrolls the 504 pixel area from below the navigation bar to the bottom of the screen (to the bottom of the tab bar).
The webview has internally a scrollview. You can query its size by webview.scrollView.contentSize. You have to wait with this until the webview has finished rendering.
So, in the -webViewDidFinishLoad: delegate method you can get the optimal height of the webView through webView.scrollView.contentSize.height. You can then resize the webView to this height and layout the other views appropriately. If all of this is done in a custom view, the proper way of doing this would probably be to just call [theView setNeedsLayout] and override -layoutSubviews in theView.
You also should set webView.scrollView.alwaysBounceVertically to NO.
I solved the problem.
First of all, just expand the UIWebView to a height higher than the content ever will be (e.g. 2000 pixels).
The delegate method code that makes the magic happen
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
// set height for webiew
webView.autoresizesSubviews = NO;
webView.translatesAutoresizingMaskIntoConstraints = YES;
webView.scrollView.autoresizesSubviews = NO;
webView.scrollView.translatesAutoresizingMaskIntoConstraints = YES;
CGFloat height = [[webView stringByEvaluatingJavaScriptFromString:#"document.getElementById('content').clientHeight;"] floatValue] + 80; // +80 for tabbar and spacing
CGRect frame = webView.frame;
frame.size.height = height;
webView.frame = frame;
// fix height of scroll view as well
self.scrollView.translatesAutoresizingMaskIntoConstraints = YES;
self.scrollView.contentSize = CGSizeMake(320, (self.webView.frame.origin.y + self.webView.frame.size.height));
}
In Xcode 5.1 I have created a very simple single view app for iPhone and put the source code at GitHub:
I have disabled Autolayout and put the following views in each other: scrollView -> contentView -> imageView (here fullscreen):
For the contentView and imageView I've disabled Autoresizing and set their frames to {0, 0, 1000, 1000} - both in the Storyboard and in the viewDidLoad method.
I have enabled double tap and pinch gestures for zooming.
For double tap the image is zoomed at 100% or 50% width.
This works initially, but after device rotation it breaks:
The zoom doesn't work properly and the image is offset - you can't scroll to its top left corner:
Here is my very short code in ViewController.m, please advice how to fix it:
- (void)viewDidLoad
{
[super viewDidLoad];
_imageView.frame = CGRectMake(0, 0, 1000, 1000);
_contentView.frame = CGRectMake(0, 0, 1000, 1000);
}
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
float scale = _scrollView.frame.size.width / 1000;
_scrollView.minimumZoomScale = scale;
_scrollView.maximumZoomScale = 2 * scale;
_scrollView.zoomScale = 2 * scale;
_scrollView.contentSize = CGSizeMake(1000, 1000);
}
- (UIView*)viewForZoomingInScrollView:(UIScrollView*)scrollView
{
return _contentView;
}
- (IBAction)scrollViewDoubleTapped:(UITapGestureRecognizer*)sender
{
if (_scrollView.zoomScale < _scrollView.maximumZoomScale)
[_scrollView setZoomScale:_scrollView.maximumZoomScale animated:YES];
else
[_scrollView setZoomScale:_scrollView.minimumZoomScale animated:YES];
}
UPDATE: I've tried using Reveal app (here fullscreen), but couldn't find anything useful for me:
My source code seems to be okay, but in Interface Builder I had to disable "Autoresize Subviews" for the scrollView:
I want to use a UIScrollView as my main container in the app, enabling me to swipe back and forth between subviews. To achieve this, I created a UIViewController subclass with a UIScrollView IBOutlet:
In the viewDidLoad method I construct the sub-pages:
for (int i= 0; i< pageCount; i++)
{
CGRect frame = self.scrollView.frame;
frame.origin.x = frame.size.width * i;
frame.origin.y = 0;
UIWebView* aWebView= [[UIWebView alloc] initWithFrame:frame];
[self.scrollView addSubview:aWebView];
}
When launching the app (portrait mode), everything works. That is, the UIWebViews are layed out side by side with the correct dimensions, and I can swipe back and forth between them.
When I rotate to landscape, it seems that neither the scrollview size nor the subviews are resized.
I don't know what I should do in order to resize the subviews and the scrollview itself, or at what point in code I should do anything, and I cant seem to find any examples for this.
Anyone know what to do?
[edit] Attempt to adjust sizes as suggested by mahboudz:
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * pageCount, self.scrollView.frame.size.height);
for (int i= 0; i< pageCount; i++)
{
CGRect frame = self.scrollView.frame;
frame.origin.x = frame.size.width * i;
frame.origin.y = 0;
UIWebView* view= [[self.scrollView subviews] objectAtIndex:i];
view.frame= frame;
}
}
This kind of does what I want, but has the following issues:
1) one can see the subviews grow to correct screen size upon changing orientation
2) when the current page is, for example, page 2 of 5 pages, the page is not fully visible after orientation was changed, but is off-screen by like 40 pixels
3) I get strange effects depending on whether the app is launched in portrait or landscape mode (simulator), ill try to explain:
When the app is launched in portrait mode:
The shape/border of the subviews looks messed up/offscreen, see screenshots:
http://i53.tinypic.com/21jr76x.png
when I rotate to landscape, everything looks okay, scrolling works superb. even when I rotate back to portrait, everything is great now:
http://i55.tinypic.com/if3iiw.png
When the app is launchend in landscape mode:
I get the same messed up/offscreen glitches as in portrait mode
Switching back and forth between portrait and landscape fixes this for landscape mode
BUT: Portrait mode will have the subviews with the width of the landscape mode, thus subviews are too wide
I tried to fix 1) doing the code above in willRotateToInterfaceOrientation however it completely messed up the layout.
I fixed 2) by adding the following code to didRotateFromInterfaceOrientation:
// update the scroll view to the appropriate page
CGRect frame = self.scrollView.frame;
frame.origin.x = frame.size.width * self.currentPage;
frame.origin.y = 0;
[self.scrollView scrollRectToVisible:frame animated:NO];
Note: current page is determined in scrollViewDidScroll
I dont have any idea how to fix 3)
You would need to reset the frame size, content size and the content offset in order to get the subviews in a proper position.
CGFloat screenHeight =[UIScreen mainScreen].bounds.size.height;
CGFloat screenWidth =[UIScreen mainScreen].bounds.size.width;
self.scrollView.frame = CGRectMake(0, 0, screenWidth, screenHeight);
self.scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * numberOfPages, self.scrollView.frame.size.height);
self.scrollView.contentOffset = CGPointMake(visiblePageBeforeRotation * self.scrollView.bounds.size.width, 0);
This code should be placed in the method
-(void)willRotateToInterfaceOrientation: (UIInterfaceOrientation)orientation duration:(NSTimeInterval)duration
Check as well the answer on this question:
Clean autorotation transitions in a paging UIScrollView
It has good example named Rotolling for rotating UIScrollView with paging enabled.
Hope this helps.
P.S: I am facing a problem on repositioning the center of the UIWebView on the rotation.
You need to implement viewWillRotate/viewDidRotate and make adjustments to our content size and orientation as needed.