2020. 10. 8. 13:20
Swift에서 WKWebView Scroll 문제 해결 개발/Swift2020. 10. 8. 13:20
반응형
최근 회사에서 운영 중인 iOS 어플의 웹뷰를 앱 스토어의 권고 사항에 따라 UIWebView에서 WKWebView로 변경하였다.
WKWebView로 바꾸어서 그런지 일부 최신 폰에서 (보고 받은 것은 iPhone X, iPhone XR)
fixed 처리된 footer가 있는 줄 모르는 듯이 Scroll시 맨 아래까지 가지 않고 일부 내용을 가리게 되어 사용에 불편이 생겼다.
처음엔 그저 WKWebview의 문제인줄 알고 scroll bounces를 false로 적용하려고 하거나 status bar 문제 인가싶어 그 부분도 알아봤지만
더 찾아보니 iPhone 11에서 부터 Safe Area Zone이란 것이 생겨서 문제가 생긴 듯하였다.
그래서 해결한 코드를 공유하도록 하겠다.
import UIKit
import WebKit
class ViewController: UIViewController {
@IBOutlet var webView: WKWebView!
private func setupWebView() {
webView = WKWebView(frame: self.view.bounds, configuration: WKWebViewConfiguration())
view.addSubview(webView)
if #available(iOS 11.0, *) {
webView.scrollView.contentInsetAdjustmentBehavior = .never
} else {
// Fallback on earlier versions
webView.translatesAutoresizingMaskIntoConstraints = false
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: ["v0":webView]))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[v0]|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: ["v0":webView]))
}
}
override func viewSafeAreaInsetsDidChange() {
if #available(iOS 11.0, *) {
webView.translatesAutoresizingMaskIntoConstraints = false
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: ["v0":webView]))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-(\(self.view.safeAreaInsets.top))-[v0]-(\(self.view.safeAreaInsets.bottom))-|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: ["v0":webView]))
}
}
override func viewDidLoad() {
super.viewDidLoad()
self.setupWebView()
}
}위 코드처럼 iOS 11 버전 이상인지 아닌지에 따라 제약 조건을 분기하면 해결된다.
Safe Area Zone이 iOS 11 버전 이상부터 생김에 따라
safeAreaInsets 기능도 같이 iOS 11 버전 이상에서만 지원해주기 때문에 분기 코드는 필수이다.
만약, 하단은 가득 채우고 싶다면 25줄에서 -(\(self.view.safeAreaInsets.bottom))-를 삭제하면 된다.
참고 출처 : https://wit.nts-corp.com/2019/10/24/5731
stackoverflow.com/questions/45421548/ios-wkwebview-status-bar-padding
반응형
