PastaCoder PastaCoder - 2 months ago 12
Swift Question

WKWebView added as Subview is not resized on rotation in Swift

I'm working on adding a new reading view to my browser app. It is another view controller, that only includes a WKWebView added as a subview with a button (and gesture) to close the view. Everything works great, but when I rotate the device, the subview isn't resized, so I have one half of the screen empty.

The WKWebView in the Reading View gets the URL of the main View Controller with a segue performed after the user taps a button on the main View Controller and that URL is stored as webpageURL.

Here is the code I used:

import UIKit
import WebKit

class ReadingViewController: UIViewController, UIGestureRecognizerDelegate, WKNavigationDelegate, WKScriptMessageHandler {

@IBOutlet weak var _closeButton: UIButton!
@IBOutlet weak var _progressView: UIProgressView!
@IBOutlet weak var _loadingErrorView: UIView!

var webpageURL: NSURL?

var _webView: WKWebView?
var _isMainFrameNavigationAction: Bool?
var _loadingTimer: NSTimer?

var _swipeFromTopRecognizer: UIScreenEdgePanGestureRecognizer?
var _panFromRightRecognizer: UIScreenEdgePanGestureRecognizer?
var _panFromLeftRecognizer: UIScreenEdgePanGestureRecognizer?
var _errorView: UIView?
var _isCurrentPageLoaded = false

var _progressTimer: NSTimer?
var _isWebViewLoading = false


override func viewDidLoad() {
super.viewDidLoad()

var contentController = WKUserContentController();
var scaleToFit = WKUserScript(source: "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);", injectionTime: WKUserScriptInjectionTime.AtDocumentStart, forMainFrameOnly: true)
contentController.addUserScript(scaleToFit)
contentController.addScriptMessageHandler(self, name: "callbackHandler")

var webViewConfiguration: WKWebViewConfiguration = WKWebViewConfiguration()
webViewConfiguration.allowsInlineMediaPlayback = true
webViewConfiguration.mediaPlaybackRequiresUserAction = false

_webView = WKWebView(frame: self.view.frame, configuration: webViewConfiguration)

self.view.addSubview(_webView!)
_webView!.navigationDelegate = self
self.view.sendSubviewToBack(_webView!)
_webView!.allowsBackForwardNavigationGestures = true

_loadingErrorView.hidden = true

_swipeFromTopRecognizer = UIScreenEdgePanGestureRecognizer(target: self, action: Selector("handleSwipeFromTop:"))
_swipeFromTopRecognizer!.edges = UIRectEdge.Top
_swipeFromTopRecognizer!.delegate = self
self.view.addGestureRecognizer(_swipeFromTopRecognizer!)

_progressView.hidden = true

var urlAsString = "\(webpageURL!)"
loadURL(urlAsString)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

// UI Control Functions

func gestureRecognizer(gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWithGestureRecognizer otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}

@IBAction func closeReadingView(sender: AnyObject) {
self.dismissViewControllerAnimated(true, completion: nil)
}

func closeButtonEnabled(bool:Bool) {
_closeButton.enabled = bool
}

func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
if(message.name == "callbackHandler") {
println("JavaScript is sending a message \(message.body)")
}
}


// WebView Functions

func webView(webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
_loadingErrorView.hidden = true
_isWebViewLoading = true
_progressView.hidden = false
_progressView.progress = 0
_progressTimer = NSTimer.scheduledTimerWithTimeInterval(0.01667, target: self, selector: "progressTimerCallback", userInfo: nil, repeats: true)
_loadingTimer = NSTimer.scheduledTimerWithTimeInterval(30, target: self, selector: "loadingTimeoutCallback", userInfo: nil, repeats: false)
}

func loadingTimeoutCallback() {
_webView?.stopLoading()
handleWebViewError()
}

func webView(webView: WKWebView, didCommitNavigation navigation: WKNavigation!) {
_isCurrentPageLoaded = true
_loadingTimer!.invalidate()
_isWebViewLoading = false

if self._webView!.URL == webpageURL! {
handleWebViewError()
println(webpageURL!)
println(self._webView!.URL!)
} else {
println("Page was loaded successfully")
println(webpageURL!)
println(self._webView!.URL!)
}
}

func webView(webView: WKWebView, didFinishNavigation navigation: WKNavigation!) {
_isCurrentPageLoaded = true
_loadingTimer!.invalidate()
_isWebViewLoading = false
}

func webView(webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: NSError) {
if let newFrameLoading = _isMainFrameNavigationAction {
} else {
handleWebViewError()
}
}

func webView(webView: WKWebView, didFailNavigation navigation: WKNavigation!, withError error: NSError) {
if let newFrameLoading = _isMainFrameNavigationAction {
} else {
handleWebViewError()
}
}

func webView(webView: WKWebView, decidePolicyForNavigationAction navigationAction: WKNavigationAction, decisionHandler: (WKNavigationActionPolicy) -> Void) {
if (navigationAction.targetFrame == nil && navigationAction.navigationType == .LinkActivated) {
_webView!.loadRequest(navigationAction.request)
}
_isMainFrameNavigationAction = navigationAction.targetFrame?.mainFrame
decisionHandler(.Allow)
}

func handleWebViewError() {
_loadingTimer!.invalidate()
_isCurrentPageLoaded = false
_isWebViewLoading = false
displayLoadingErrorMessage()
}

func progressTimerCallback() {
if (!_isWebViewLoading) {
if (_progressView.progress >= 1) {
_progressView.hidden = true
_progressTimer?.invalidate()
} else {
_progressView.progress += 0.2
}
} else {
_progressView.progress += 0.003
if (_progressView.progress >= 0.95) {
_progressView.progress = 0.95
}
}
}

func loadURL(urlString: String) {
let addrStr = httpifyString(urlString)
let readingAddr = addrStr.stringByAddingPercentEncodingForFormUrlencoded()!
let addr = NSURL(string: "http://mobilizer.instapaper.com/m?u=\(readingAddr)")
if let webAddr = addr {
let req = NSURLRequest(URL: webAddr)
_webView!.loadRequest(req)
} else {
displayLoadingErrorMessage()
}

}

func httpifyString(str: String) -> String {
let lcStr:String = (str as NSString).lowercaseString
if (count(lcStr) >= 7) {
if (lcStr.rangeOfString("http://") != nil) {
return str
} else if (lcStr.rangeOfString("https://") != nil) {
return str
}
}
return "http://"+str
}


func displayLoadingErrorMessage() {
_loadingErrorView.hidden = false
}

func handleGoBackPan(sender: UIScreenEdgePanGestureRecognizer) {
if (sender.state == .Ended) {
_webView!.goBack()
}
}

func handleGoForwardPan(sender: AnyObject) {
if (sender.state == .Ended) {
_webView!.goForward()
}
}

func handleSwipeFromTop(sender: AnyObject) {
self.dismissViewControllerAnimated(true, completion: nil)
}

override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
coordinator.animateAlongsideTransition({ context in
self._webView!.frame = CGRectMake(0, 0, size.width, size.height)
}, completion: nil)
}


}

And here are some screenshots to demonstrate the issue:
This is the view after it finished loading, working correctly:
This is how the view loads, working correctly

This is the view after rotating the device to landscape:
This is the view after rotation

And this is the scroll location after rotation:
Scroll location after rotation

Using self.view = _webView makes the view resize correctly, but ignores all the views on the Storyboard (since the View's contents are being rewritten).

How can I fix this issue (without rewriting self.view)?

Answer

I managed to solve the problem by using this line of code:

self._webView!.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight

:)

Comments