ITblog

XcodeでWebviewを画面ピッタリに表示する

2015年07月22日

Xcodeで、とりあえず簡単にWebviewを使ってシンプルにウェブページを表示するだけのアプリを作ってみました。

手順
1・Single Veiwのプロジェクト作成
2・storyboadに、右下からWebviewのパーツをドラッグ&ドロップ
3・Webviewを選択し、大きさを画面ちょうどに調整
4・Webviewを選択し、右下にある四角い図形を選択し、Add Constrantsで、上が20、左右下は0に変更。Add 4 constrantsで適用

add 4 constraints

5・Webviewを選択し、右上の「Scales Page To Fit」にチェックを入れる

「Scales Page To Fit」にチェックを入れる

6・ViewControllerに必要なコードを追記

これでコンパイルして実行。

すると、ウェブページは表示されたのですが、右に謎のマージンが開いた状態に。

ここは、左メニューの「Constraints」で、設定されているConstraintsをチェックしていき、項目の中にある「Second item」を調整していくことで画面ピッタリに表示されるようになりました。


↓Story boardのConstraintsが余白に関係しているので、この中から関係ある余白の設定を調整する。


↑Relative to marginのチェックを外す

ポイントとしては、「Scale to Page To Fit」にチェックを入れることと、Constaraints追加後、左メニューに表示される各「Constraints」の設定が余白を表しているので、変な余白が入っている場合は、大抵このどこかにおかしいところがあるということです。
ここを調整していくことで画面ピッタリに表示されるようになりました。

怪しいConstraintsの設定のSecond Itemを「Superview.Leading Margin」にして、Relative Marginのチェックを外してみてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です