ローディング中

【ios】Swiftでwebkitを使用してフリックで進む・戻るに対応してみる

基本業務の合間にちょこちょこと触り続けているswift。
前回から大した進歩ではありませんが、

フリックで進む・戻るを実装してみたいと思います。

目次

WebKitが良さげなのでそっちに移行

詳しい理由はわかりませんが、なんか良いらしいぞ!って事でWebKitを入れてみました。
フレームワークの実装方法はとても簡単。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-12-%e5%8d%88%e5%be%8c5-39-48
Generalの下の方にLinked Frameworks and Librariesとありますので

「+」をクリックして、WebKitを選択、

あとは

import Webkit

でimportしてあげるだけです。

ステータスバーを隠そう

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {

var webView: WKWebView!

override func viewDidLoad() {
super.viewDidLoad()
webView = WKWebView(frame: self.view.bounds)
webView.navigationDelegate = self
webView.UIDelegate = self
self.view.addSubview(webView)
webView.allowsBackForwardNavigationGestures = true

}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}

override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)

let url = NSURL(string: "https://awe-some.net")
let request = NSURLRequest(URL: url!)
webView.loadRequest(request)
}
override func prefersStatusBarHidden() -> Bool {
return true
}
}

今回はこんな感じのコードで実装しました。

webView.allowsBackForwardNavigationGestures = true

の部分でフリックで戻る、進むの動作を実装する事ができます。
めっちゃ楽チンですね。
UIWebViewでしようとおもったら割と面倒だったのに。
そしてこのままビルドするとこんな感じに。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-12-%e5%8d%88%e5%be%8c5-43-50

前回同様ステータスバーの下にViewが入り込んでいる形になります。
かぶっちゃうんですね。
改善方法としては

  • TOPにマージンを持たせる
  • ステータスバーを消しちゃう

のどちらかが考えられますが今回は消しちゃいます。

その消しちゃうコードがこちら

override func prefersStatusBarHidden() -> Bool {
return true
}

背景が黒すぎてわかりにくいですが、

しっかりとステータスバーが消えています。
これで、とりあえずはしたいことは実装できました。
次は何しようかなー。

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.