[Swift] WKWebViewを使ってみる(2) - URLバーを設置する
引き続きiOS8から追加されたWebKitを使ってみます。
前回はただ単にWKWebViewを表示しただけだったのでブラウザのようなGUIを追加していきます。
URLバーの設置でやることは以下です。
- URLバーを設置し現在表示されているページのURLをテキストで表示する
- URLバーの右端に更新ボタンを設置する
- テキスト入力エリア編集中は更新ボタンは非表示にし、同じ場所にテキスト削除ボタンを表示する（iOSのSafariのような振る舞い）
- URLバーのテキスト入力エリアを編集できるようにし、キーボードのreturnがタッチされたら編集されたURLをリクエストする
今回は「1. URLバーを設置し現在表示されているページのURLをテキストで表示する」についてです。
1. URLバーを設置し現在表示されているページのURLをテキストで表示する
まず、実際にURLバーを設置する前に、表示されているURLの取得方法についてです。
UIWebViewではstringByEvaluatingJavaScriptFromStringメソッドでjavascriptを実行し、サイトタイトルやURLを取得していました。
WKWebViewではそれらをプロパティとして取得することができます。
|
1 2 3 4 |
// URLを取得 self.webview?.URL // タイトルを取得 self.webview?.title |
では、どのタイミングでタイトルやURLを取得できるようになるのでしょうか？
WKWebViewにはいくつかのデリゲートが用意されています。
WKWebViewでウェブページを表示する際、以下のデリゲートが順番に呼ばれます。
1)
|
1 |
func webView(webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) |
ページの読み込みが開始した時に呼ばれます。
2)
|
1 |
func webView(webView: WKWebView, didCommitNavigation navigation: WKNavigation!) |
Appleのドキュメントを見て翻訳かけてもいまいちよく分からなかったのですが以下のページが参考になりました。
「iOS 8から追加されたWebKit Frameworkを使ってみる」によると
“ページが見つかり、読み込み開始。”
とのことです。
3)
|
1 |
func webView(webView: WKWebView, didFinishNavigation navigation: WKNavigation!) |
ページの読み込みが完了した時に呼ばれます。
以上の3つです。他にもページの読み込みに失敗した場合に呼ばれるデリゲート等もありますが今回は触れません。
確認してみた結果、URLはdidCommitNavigationで、タイトルはdidFinishNavigationで取得できているのが確認できていましたが今回のURLバーのテキストの更新はdidFinishNavigationで行います。
では、URLの取得方法、取得できるタイミングが分かったので実装していきましょう。
前回のコードに追記していく形で進めます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class ViewController: UIViewController ,WKNavigationDelegate{ var webview : WKWebView? var urlBar : UIView? var urlBarForm : UIView? var urlTextField : UITextField? override func viewDidLoad() { super.viewDidLoad() // デバイスのCGRectを取得 var deviceBound : CGRect = UIScreen.mainScreen().bounds // WKWebView self.webview = WKWebView(frame: CGRectMake(0, 60, deviceBound.size.width, deviceBound.size.height - 60)) self.webview?.navigationDelegate = self self.webview?.loadRequest(NSURLRequest(URL: NSURL(string:"http://www.google.co.jp")!)) self.view.addSubview(self.webview!) |
先ほどのデリゲートを受け取る場合はWKNavigationDelegateをクラス宣言の後に記述（1行目）し、WKWebViewのnavigationDelegateプロパティにデリゲート先を指定する必要があります（17行目）。
また、URLバーに使うUIVeiwやUITextFieldをインスタンス変数として宣言しておきます。（5〜7行目）
テキストエリアは編集できるようにUILabelではなくUITextFieldを使用します。
URLバーを表示されるため、WKWebViewのy座標と高さも前回から変更しています。（16行目）
※URLバーの高さを40pxにするため、WKWebViewのy座標を[ステータスバーの高さ(20px) + URLバーの高さ(40px)] = 60px としています。高さもデバイスの高さから60px分引いています。
次にURLバー部分のコードを記述します。viewDidLoad内に追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// URLBar self.urlBar = UIView(frame: CGRectMake(0, 20, deviceBound.size.width, 40)) let urlBarBorderColor : CGColorRef = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1.0).CGColor let urlBarBorder : CALayer = CALayer() urlBarBorder.frame = CGRectMake(0, 39.5, deviceBound.size.width, 0.5) urlBarBorder.backgroundColor = urlBarBorderColor self.urlBar?.layer.addSublayer(urlBarBorder) self.view.addSubview(self.urlBar!) // URLBarのテキストフォーム背景 self.urlBarForm = UIView(frame: CGRectMake(10, 8, deviceBound.size.width - 20, 40 - 16)) self.urlBarForm?.backgroundColor = UIColor(red: 0.9, green: 0.9, blue: 0.9, alpha: 1.0) self.urlBarForm?.layer.cornerRadius = 6 self.urlBarForm?.clipsToBounds = true self.urlBar?.addSubview(self.urlBarForm!) // URLBarのテキストフォーム self.urlTextField = UITextField(frame: CGRectMake(8, 1, self.urlBarForm!.frame.width - 24, self.urlBarForm!.frame.height)) self.urlTextField?.font = UIFont.systemFontOfSize(12) self.urlTextField?.keyboardType = .URL self.urlBarForm?.addSubview(self.urlTextField!) |
urlBarが薄いグレーのバー部分、urlBarFormがurlTextFieldの下に表示される角丸の濃いグレー部分、urlTextFieldはURLの文字列が表示される部分です。
最後にdidFinishNavigationが呼ばれた時にurlTextFieldにページのURLが表示されるようにします。
|
1 2 3 4 5 |
// ページの読み込みが完了した時の処理 func webView(webView: WKWebView, didFinishNavigation navigation: WKNavigation!) { self.urlTextField?.text = self.webview?.URL?.absoluteString } |
WKWebViewで取得できるURLプロパティは型がNSURLなのでabsoluteStringメソッドで文字列で取得します。
これで下記のようなURLバーが表示されました。
少しはブラウザっぽい見た目になりましたが機能的にはまだまだです。
次回は「2. URLバーの右端に更新ボタンを設置する」の実装を行います。
