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

スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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

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

スポンサーリンク

WKWebView を使う WebView 画面のコード

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

このままですと、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

以上の作業を行った後に再ビルド。これで WebView ページを表示させた時に、ウェブページのヘッダー部が Navigation Bar の下に潜り込んで隠れるのを防ぐことができました。

スポンサーリンク
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!