Tabbarってありますよね。 よくアプリとか使ってると見るやつ。こんな感じのもの↓
今回はこれを実装していきたいと思う。 そしてこのTabbarを選択したら、別々のwebページを表示する実装を書く。
Tabbar作成
ViewControllerを選択し、「Editor」→「Enbed in」→「Tab bar Controller」を選択。
すると以下のように、tabbarが表示されるようになる。
この状態ではまだ、１つしかBarが存在しないので、数を増やしていこう。今回は3つ作成することにします。
数を増やすには、新たにViewControllerを追加しましょう。
新たに追加したら、追加したViewControllerとTabbarを紐付けます。 controlキーを押しながら新しく追加したViewControllerに引っ張る。「view controllers」を選択すれば関連づけることができます。
こんな感じになったはず。
これをもう一個作って3つのTabbarを作リましょう。 3つつけて同じように繋げるとこんな感じになります。
いい感じですね。 これで それぞれをクリックすると関連づけたページにいくはずです。そのページの実装は何もしてないので、実装が必要だけどね。
webViewを配置する
Tabbarはできたので、今度はそれぞれのページにwebサイトを表示させていきます。
webViewを選択して、viewControllerに配置していく。 表示するwebサイトは画面いっぱいだから、webViewは画面いっぱいに伸ばして配置。
この作業をそれぞれのviewControllerで行ったら次はコードを書いていく作業。
### ViewControllerにファイルを紐づける まだ新しく作ったViewControllerには紐づいたファイルがないので、新たにファイルを作って紐付けよう。
作ったclassをViewControllerに関連づけるのを忘れないように。
コードを書いていく
関連づけが終わったら、いよいよWebサイトを表示するコードを書いていこう。
webViewをコードに紐づける
関連づけたファイルでstoryboard上のwebViewを使えるようにするため、outletで紐づけておきましょう。
@IBOutlet weak var webView: UIWebView!
紐づけたらその変数を使ってコードを書いていきます。
info.plistをいじる
全てのHTTP通信を許可するためにinfo.plistをいじります。 「App Transport Security Settings 」を追加し、Allows Arbitrary Loads をYESに書き換える。
webページを表示する記述をする
override func viewDidLoad() { super.viewDidLoad() // 読み込むURLを指定 let url = URL(string: "https://www.yahoo.co.jp/") // URL型に変換 let urlRequest = URLRequest(url: url!) // URL型のものをNSURL型に変換 webView.loadRequest(urlRequest) //これでwebViewに指定したURLのサイトが表示される }
インジケーターを表示する
webページが表示されるまでくるくる回っているやつよくみますよね。あれを表示させてみます。
indicatorを作成
「Activity Indicator View」というものをwebView状に配置し、outletでコード上に関連づけておきましょう。
@IBOutlet weak var indicator: UIActivityIndicatorView!
Delegateを追加
Delegateメソッドを使えるようにするため、UIWebViewDelegateを追加します。
class ViewController: UIViewController, UIWebViewDelegate{ //UIWebViewDelegateを追加 @IBOutlet weak var webView: UIWebView! override func viewDidLoad() { super.viewDidLoad() webView.delegate = self //Delegateメソッドを使えるように取り込む } }
Delegateメソッドを記述する
続いてdelegateメソッドを追加します。
func webViewDidStartLoad(_ webView: UIWebView) { //webViewにサイトの読み込みが開始された時に呼ばれるデリゲートメソッド indicator.startAnimating() //indicatorを回し始めるメソッド indicator.isHidden = false //indicatorを表示 } func webViewDidFinishLoad(_ webView: UIWebView) { //webサイトの読み込みが完了した時に呼ばれるデリゲートメソッド indicator.stopAnimating() //indicatorを止める indicator.isHidden = true //indicatorを隠す }
これでインジケーターの表示は完了。
戻るボタン、進むボタン
戻るボタンと進むボタンは、buttonを配置してActionで紐付ける。 そして、webサイトが表示されているwebViewに対してgoBack()とgoForward()をつけてあげればok。
@IBAction func back(_ sender: Any) { webView.goBack() } @IBAction func go(_ sender: Any) { webView.goForward() }
これで進むことも戻ることもできる。 今まで書いてきたことをそれぞれのViewControllerに記述して、サイトのURLを変更すれば違うwebページが表示されるよ。