[iOS][Swift] Tweetbot 3 風の UI を実現する

Tweetbot 3 風の UI を実現する

iOS 用の Twitterクライアント Tweetbot 3 for Twitter で画像をタップすると、いい感じに画像を動かせます。このUIは良く出来ていますね。

今回はこれを手軽に再現できる OSS である、JTSImageViewControllerをご紹介します。

標準では Objective-C プロジェクトで使えますが、今回は 一手間かけて、Swift のプロジェクト上で使ってみようと思います。

JTSImageViewController

JTSImageViewControllerは、Jared Sinclairさんが GitHub で公開されている イメージビューア・コンポーネントです。

先ほどの Tweetbot 3 風の UI が、短いコードで実現できてしまいます。

早速使ってみましょう！

CocoaPods

まずは 任意のプロジェクトに CocoaPods を使って JTSImageViewController を組み込みましょう。

Podfile に以下の記述をし、pod install します。

pod 'JTSImageViewController', '~> 1.4'

画像を用意

今回は、以下の画像を使用させて頂いております。

The picture above is licensed under CC BY 2.0

Mount Pisgah County Park (1) by Nicholas A. Tonelli Follow

Storyboard

中央に、大きめのボタン（見た目の大きさは小さめ）を置きました。

後ほど使用する ViewController 等に、上のように接続しておきましょう。

Bridging Header

さて、このままでは Swift コード上から JTSImageViewController 関連のクラスを使えません。Bridging Header を使いましょう。

まず、Objective-C 用のヘッダファイルを Swift 上で読み込むため、Objective-C bridging headerファイルを作成します。ファイル名は、プロダクトモジュール名に続けて “-Bridging-Header.h” を付け加えた名前である必要があります。

次に、プロジェクト（ターゲット）の Build Settings で、Install Objective-C Compatibility Header が Yes になっていることを確認します。そして、Objective-C Bridging Headerに、作成したヘッダファイルの場所を記入します。頭にフォルダ名を付け忘れることが多いので注意です。

（2015/05/27追記）ヘッダファイルの中身は以下のようになります。

#import "JTSImageViewController/JTSImageViewController.h"

（2015/05/27追記）CocoaPods 0.36 より、Bridging Header を使わなくてもOKになっていました。

その代わりの手順です。まず以下の文を Podfile に加えます。

use_frameworks!

次に、OSSを使用する.swiftファイル冒頭に、明示的にimport文を付け加えます。今回の場合は、以下のとおりです。

import JTSImageViewController

参考

Inner Exception: Cocoapods use_frameworks! Means A Bridging Header Not Required for Objective-C Pods in Swift

CocoaPods 0.36 - Framework and Swift Support - CocoaPods Blog

コードを書く

ボタンを押した時に、イメージビューアを出したいので、先に作った tapButtonメソッド内に処理を書きます。

    @IBAction func tapButton(sender: AnyObject) {

        let imageInfo = JTSImageInfo.new()

        imageInfo.image = UIImage(named: "park.jpg")
        imageInfo.referenceRect = self.imageButton.frame
        imageInfo.referenceView = self.imageButton.superview
        
        let imageViewer = JTSImageViewController(imageInfo: imageInfo, mode: JTSImageViewControllerMode.Image, backgroundStyle: JTSImageViewControllerBackgroundOptions.Blurred)
        imageViewer.showFromViewController(self, transition: JTSImageViewControllerTransition._FromOriginalPosition)
    }

細かく見て行きましょう。

let imageInfo = JTSImageInfo.new()

最初に、JTSImageInfoのインスタンスを作ります。

imageInfo.image = UIImage(named: "park.jpg")
imageInfo.referenceRect = self.imageButton.frame
imageInfo.referenceView = self.imageButton.superview

JTSImageInfo は、画像データや、イメージビューアが出現する場所を指定するためのプロパティなどを持っています。各々指定しましょう。

imageInfo.imageURL = NSURL(string:"http://...jpg")

こんな風に、画像はURLを指定してネットから取得することも可能です。

let imageViewer = JTSImageViewController(imageInfo: imageInfo, mode: JTSImageViewControllerMode.Image, backgroundStyle: JTSImageViewControllerBackgroundOptions.Blurred)

次に、JTSImageViewControllerオブジェクトを作成します。引数に imageInfoを指定しています。

imageViewer.showFromViewController(self, transition: JTSImageViewControllerTransition._FromOriginalPosition)

最後に、 showFromViewController:メソッドで、実際にビューアを表示しています。

動かしてみる

タイムラインを使うアプリなどで活躍しそうですね。お疲れ様でした！