[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
参考
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:メソッドで、実際にビューアを表示しています。
動かしてみる
タイムラインを使うアプリなどで活躍しそうですね。お疲れ様でした!