【Swift】Tabbarコントローラーを使って、webサイトを表示してみる

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ページが表示されるよ。