8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SFSafariViewControllerの表示アニメーションを変更する

Posted at

SFSafariViewControllerとは

SFSafariViewControllerはiOS9から追加されたWebを表示するためのViewControllerです。
SafariとのCookieの共有が出来たり、コンテンツブロックが出来たりURLが表示されていたりと便利ですが、カスタマイズ性はほぼほぼ皆無です。

GoogleがOAuth認証時にUIWebview/WKWebviewをブロックすることを決定しているので、ネイティブ側でSDKを使用しない場合にはこれを使う他ないでしょう

使い方

SFSafariViewControllerはただのViewControllerなので、生成してpresentViewControllerしてあげれば使うことが出来ます。

今回初めてSwift書いてみましたが、presentViewControllerがなくなっていてpresentになっていたりCGRectMakeがなかったりと戸惑ってしまいました。

ViewController.swift



import UIKit
import SafariServices

class ViewController: UIViewController {
    private var launchButton: UIButton?

    override func viewDidLoad() {
        super.viewDidLoad()

        launchButton = UIButton()
        launchButton?.frame =  CGRect(x: 0, y: 0, width: 100, height: 20)
        launchButton?.layer.masksToBounds = true
        launchButton?.setTitle("Launch", for: UIControlState.normal)
        launchButton?.backgroundColor = UIColor.black;

        launchButton?.layer.position = CGPoint(x: self.view.frame.width / 2, y: 200)

        launchButton?.addTarget(self, action: #selector(self.onClickLaunchButton(_:)), for: UIControlEvents.touchUpInside)
        self.view.addSubview((launchButton)!);


    }

    internal func onClickLaunchButton(_ sender: AnyObject) {
        let sfvc = SFSafariViewController(url: NSURL(string: "https://google.com")! as URL)
        present(sfvc, animated: true, completion: nil);
    }

}



上記のonClickLaunchButtonにてSFSafariViewControllerを生成してpresentで表示しています。

これを起動してみると下記のようになります。

後述の件がわかりやすいように、iOS Simulatorを slow animation設定しています。

sfvc1.gif

このように簡単にwebページを表示することが出来ました

アニメーションが変更されない

ここからが本題です。

SFSafariViewControllerはただのViewControllerなので、presentの引数のanimatedをtrueにして、SFSafariViewController自身のmodalTransitionStyleに値を設定することで表示時のアニメーションを変更することが出来ます。

組み込みにあるアニメーションの種類は下記の4つです。
UIModalTransitionStyle.CoverVertical
UIModalTransitionStyle.CrossDissolve
UIModalTransitionStyle.FlipHorizontal
UIModalTransitionStyle.PartialCurl

先程のコードに
sfvc.modalTransitionStyle = UIModalTransitionStyle.crossDissolve とすることで、表示アニメーションを変更することが出来ます。

ですが、SFSafariViewControllerに限ってはこれらの値を設定しても変更されません。
先程表示されたような、横から表示になってしまうのです。

解決法

modalPresentationStyleにUIModalPresentationStyle.overFullScreenを設定する。
これだけです。
上記設定をしつつ、任意のUIModalTransitionStyleをmodalTransitionStyleに設定することでアニメーションを変更することが出来ます。


    internal func onClickLaunchButton(_ sender: AnyObject) {
        let sfvc = SFSafariViewController(url: NSURL(string: "https://google.com")! as URL)
        sfvc.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
        sfvc.modalTransitionStyle = UIModalTransitionStyle.crossDissolve
        present(sfvc, animated: true, completion: nil);
    }


dissolve.gif

flipHorizontalを設定すると、クルッと回転して表示もできます。


    internal func onClickLaunchButton(_ sender: AnyObject) {
        let sfvc = SFSafariViewController(url: NSURL(string: "https://google.com")! as URL)
        sfvc.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
        sfvc.modalTransitionStyle = UIModalTransitionStyle.flipHorizontal
        present(sfvc, animated: true, completion: nil);
    }


flipHorizontal.gif

8
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?