[iOS 10] SFSafariViewControllerのバーの色を変更できるようになりました

2016.10.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

iOS 9まで

iOS 9までは以下のようにSFSafariViewControllerViewプロパティのtintColorを設定することでバー(ツールバーなど)内のコントロールの色を変更することはできましたが、バーの色を変更するようなAPIは提供されていませんでした。

import UIKit
import SafariServices

class ViewController: UIViewController {

    @IBAction func didTapButton(sender: AnyObject) {
        let url = NSURL(string: "https://dev.classmethod.jp/author/kato-jun/")
        let vc = SFSafariViewController(URL: url!)

        // バー内のコントロールの色が変わる
        vc.view.tintColor = UIColor.redColor()

        presentViewController(vc, animated: true, completion: nil)
    }
}

実行結果

SFSafariViewController_ios_9

iOS 10から

iOS 10ではSFSafariViewControllerに以下のプロパティが追加されました。

  • preferredBarTintColor
  • preferredControlTintColor

これらのプロパティを設定することでバー内のコントロールの色に加え、バーの色も変更することができるようになりました。

ただし、Safariアプリの方でPrivate Browsing Modeが有効になっていると、これらのプロパティを設定しても反映されないのでご注意ください。

以下のサンプルコードでは、バーの色を黒、バー内のコントロールの色を赤に変更しています。

import UIKit
import SafariServices

class ViewController: UIViewController {

    @IBAction func didTapButton(_ sender: AnyObject) {
        let url = URL(string: "https://dev.classmethod.jp/author/kato-jun/")
        let vc = SFSafariViewController(url: url!)

        // バーの色が変わる
        vc.preferredBarTintColor = UIColor.black
        // バー内のコントロールの色が変わる
        vc.preferredControlTintColor = UIColor.red

        present(vc, animated: true)
    }

}

実行結果

SFSafariViewController_ios_10

ちなみに

試してわかったことですが、preferredBarTintColorの色に合わせてそれに合うようにプログレスの色も自動で変わるようです。

preferredBarTintColorが白(UIColor.white)の場合

SFSafariViewController_progress_blue

preferredBarTintColorが黒(UIColor.black)の場合

SFSafariViewController_progress_white

まとめ

iOS 10でバーの色を変えられるようになったことでアプリのテーマカラーなどをSFSafariViewControllerにも設定できるようになりました。 そういった意味で、少しずつSFSafariViewControllerがアプリに組み込みやすくなってきたと思います。

参考