更新日: 2015年12月18日
Swift & iOS

WKWebView/UIWebViewでNavigation Barの下にウェブページが隠れるのを回避

iOS/Swift 開発で WKWebView を使って WebView を表示させていたのですが、画面上部の Navigation Bar に重なってウェブページのヘッダー部が隠れてしまっていました。WebView でこれを回避して、ウェブページのヘッダー部を NavigationBar に重ならせずに表示する方法。

— 環境 —
Xcode 7.0
Swift 2.0
Mac OS X Yosemite 10.10.5

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

WKWebView を使う WebView 画面のコード

WKWebView を使う WebView コントローラーのコードは以下のようなもの。

import WebKit

class ExampleWebViewController: UIViewController, WKUIDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()

        // set WKWebView
        let webView: WKWebView! = WKWebView()
        webView.UIDelegate = self
        self.view.addSubview(webView)
        webView.frame = self.view.bounds
        // request and load url
        let urlString = "http://example.com"
        let encodedUrlString = urlString.stringByAddingPercentEncodingWithAllowedCharacters( NSCharacterSet.URLQueryAllowedCharacterSet() )
        let url = NSURL(string: encodedUrlString!)
        let request = NSURLRequest(URL: url!)
        webView.loadRequest(request)
    }

    // ...
}

import WebKit

class ExampleWebViewController: UIViewController, WKUIDelegate {

override func viewDidLoad() {

super.viewDidLoad()

// set WKWebView

let webView: WKWebView! = WKWebView()

webView.UIDelegate = self

self.view.addSubview(webView)

webView.frame = self.view.bounds

// request and load url

let urlString = "http://example.com"

let encodedUrlString = urlString.stringByAddingPercentEncodingWithAllowedCharacters( NSCharacterSet.URLQueryAllowedCharacterSet() )

let url = NSURL(string: encodedUrlString!)

let request = NSURLRequest(URL: url!)

webView.loadRequest(request)

}

// ...

}

このままですと、WebView ページを表示させた時に、ウェブページのヘッダー部が NavigationBar の下に潜り込んで隠れてしまっていた。

Storyboard で Extend Edges の Under Top Bars のチェックを外す

WebView ページを表示時に、ウェブページのヘッダー部が NavigationBar に重ならないようにするには、Storyboard の設定で Extend Edges の Under Top Bars のチェックを外すと良い。

1. Xcode で Storyboard を表示させて該当のコントローラー（今回の例では ExampleWebViewController）を選択します。
2. Attributes Inspector を開く。
3. View Controller の Extend Edges にある項目「Unser Top Bars」のチェックを外します。

Screen_Shot_2015-12-18_at_14_00_32