전제 조건

환경
- Xcode7.2.1
언어
- Swift2.1
이번에는 Xcode 프로젝트의 시작부터 Step by Step에서 설명합니다.
실제로 단계 4 정도부터 더블 클릭 기능을 설치합니다.　
샘플 코드가 GitHub에게 주어졌기 때문에끝까지

Step1: 오리지널 작품 보기

언제 눌렸는지 몰라서 좀 못생겼나봐요.
마지막으로 최종 품목 GIF!!

구조로 삼다
그림을 두 번 연속 클릭할 때 좋은 동작을 넣는다(이번에는 애니메이션에 관한 것이다)
(다른 동작, 서버와의 대화는 이번에 처리하지 않음)
그나저나 가능하면 인스타그램을 팔로우하세요.

Step2: 프로젝트 준비

제작의 흐름은 이런 느낌이다.
1. Single View 응용 프로그램 만들기
2. StoryBoard에 tableView 추가
3. IBOutlet에서 tableView 및 ViewController 연결
4. 다양한 tableView 설정
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

「cmd + N」 or File -> New -> Files

iOS를 선택하여 Cocoa Touch Class 만들기

Also create XIB file

선택

이름을 결정하고 Subclass를 UITableViewCell로 설정합니다.(이번 클래스 이름은 CustomCell)

Idenifier도 CustomCell

로 설정

XIB 파일은 다음과 같이 2개의 ImageView를 추가합니다. 큰 것은 아래, 작은 것은 위

IBOutlet을 제작된 CustomCell 클래스에 연결

이미지를 hidden = true

로 표시합니다.
지금까지 CustomCell.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
    }

}

ViewController에서 XIB 파일 읽기

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: 제스처 인식

두 번 연속 클릭한 볼 변수 성명

UITapGestureRecognizer를 사용하여 DoubleTap 상수 식별 선언

UITapGesture Recognizer에서 "onDouble Tap:"이라고 합니다.

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에 다음 애니메이션 기능 추가
(이번에는 간단한 애니메이션을 구현할 것입니다. -->> 표시 및 페이드아웃)
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
        })
    }

완제품을 보다

GitHub

doubleTapLikeAnimation

UITableView 관련 기사

사용자 정의 전환 애니메이션