Swift ｜Instagramライク｜画像ダブルタップして♡を表示させる

#前提

環境
- Xcode7.2.1
言語
- Swift2.1

今回はXcodeプロジェクトの立ち上げからStep by Stepに説明するので、
実際は[Step4](http://qiita.com/TouMotonori/items/b17b26527355e3020699#step4%E3%82%B8%E3%82%A7%E3%82%B9%E3%83%81%E3%83%A3%E3%83%BC%E3%82%92%E8%AA%8D%E8%AD%98%E3%81%95%E3%81%9B%E3%82%8B)あたりからダブルタップ機能の実装をする。　
サンプルコードはGitHubにあげたので、[一番後ろへ](http://qiita.com/TouMotonori/items/b17b26527355e3020699#github)

#Step1：オリジナルを見てみる
いつタップされたのがわからないため、ちょっと見づらいかもしれない
最後に完成品のGIFを載せた!!

![iphone.gif](https://qiita-image-store.s3.amazonaws.com/0/62774/b886d4b0-564f-1901-dd10-6b8d5e1e0e39.gif)

仕組みとしては、
画像を2回連続タップされたときにいいねのアクション（今回はアニメーションについて）を加える
（もうひとつのアクション、サーバーとのやり取りは今回では扱わない）
ちなみに、よければInstagramのフォローよろしくお願いします笑
<a href="https://www.instagram.com/petesayotou/?ref=badge" target="_blank" class="ig-b- ig-b-v-24"><img src="//badges.instagram.com/static/images/ig-badge-view-24.png" alt="Instagram" /></a>

#Step2：プロジェクトの準備
作成の流れはこんな感じ。
1. Single Viewアプリを作成
2. StoryBoardでtableViewを追加
3. IBOutletでtableViewとViewControllerをリンクさせる
4. tableViewのいろいろを設定する

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var tableview: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableview.delegate = self
        self.tableview.dataSource = self        
    }

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        // 後ほどCustomCell.swiftでクラスを作成する
        let cell = tableView.dequeueReusableCellWithIdentifier("CustomCell") as? CustomCell
        return cell!
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}
```

#Step3： カスタマイズセルのXibを作成

1. 「cmd + N」 or File -> New -> Files
2. iOSを選んでCocoa Touch Classの作成
3. Also create XIB fileにチェック入れる
4. 名前を決めて、SubclassをUITableViewCellにする。（今回のクラス名はCustomCell）
5. IdenifierもCustomCellにする
6. XIBファイルは下のようにImageViewを2つ追加して、大きい方は下で、小さい方（♡）は上<img width="357" alt="Screen Shot 2016-03-17 at 17.21.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/62774/c14a711f-db91-06d5-08f7-3f28cd6f91f4.png">



7. 作ったCustomCellクラスにIBOutletをリンクさせる
8. 表示させるイメージを`hidden = true`にする

ここまでのCustomCell.swift

```swift:CustomCell.swift
import UIKit

class CustomCell: UITableViewCell {

    @IBOutlet weak var bigImage: UIImageView!
    
    @IBOutlet weak var likeImage: UIImageView!
    
    override func awakeFromNib() {
        self.likeImage?.hidden = true
        super.awakeFromNib()
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
    
}
```
8. ViewControllerでXIBファイルを読み込み

```swift:ViewController.swift
override func viewDidLoad() {
        super.viewDidLoad()
        
        self.sharesTableView.delegate = self
        self.sharesTableView.dataSource = self
        
        // Reading xib class
        let nib: UINib = UINib(nibName: "CustomCell", bundle: nil)
        self.sharesTableView.registerNib(nib, forCellReuseIdentifier: "CustomCell")
        
        self.sharesTableView.estimatedRowHeight = 320.0
        self.sharesTableView.rowHeight = UITableViewAutomaticDimension
        
    }

```

#Step4：ジェスチャーを認識させる
1. 2回連続タップしたかのBool変数を宣言
2. UITapGestureRecognizerを使ってDoubleTapを認識する定数を宣言
3. UITapGestureRecognizerでaction: "onDoubleTap:"といれる。

```swift:CustomCell.swift
import UIKit

class CustomCell: UITableViewCell {

    @IBOutlet weak var bigImage: UIImageView!
    
    @IBOutlet weak var likeImage: UIImageView!
    
    @IBOutlet weak var likeLable: UILabel!
        
    var didDoubleTap: Bool = false
    
    override func awakeFromNib() {
        
        
        let doubleTapGesture = UITapGestureRecognizer(target: self, action: "onDoubleTap:")
        
        doubleTapGesture.numberOfTapsRequired = 2
        
        self.bigImage.userInteractionEnabled = true
        self.bigImage.addGestureRecognizer(doubleTapGesture)
        
        self.likeImage?.hidden = true

        super.awakeFromNib()
    }


    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

    }
    
}

```

#Step5：アニメーションをつける
CustomCell.swiftの中に以下のアニメーション機能を追加
（今回は単純なアニメーションを実装する。-->>表示してフェードアウト）

```swift:CustomCell.swift
    // onDoubleTapはUITapGestureRecognizerのactionと一致
    func onDoubleTap(sender: UITapGestureRecognizer) {
        
        didDoubleTap = true
        
        print("Double Tapped")
        
        // ここで好きなアニメーションを実装できる
        self.likeImage?.hidden = false
        self.likeImage?.alpha = 1.0
        
        UIView.animateWithDuration(0.5, delay: 0.4, options: UIViewAnimationOptions.CurveEaseIn, animations: {
            
            self.likeImage?.alpha = 0
            
            }, completion: {
                (value:Bool) in
                
                self.likeImage?.hidden = true
        })
    }
```

#完成品を見てみる
![iphone.gif](https://qiita-image-store.s3.amazonaws.com/0/62774/2e49c478-5254-b754-c33e-013c387a0741.gif)



#GitHub
[doubleTapLikeAnimation](https://github.com/TouMotonori/doubleTapLikeAnimation)

#UITableView関連記事
[Swift ｜UITableView｜cellのアニメーションをカスタマイズする](http://qiita.com/TouMotonori/items/86f9fa548ae5e5610f9f)