前提
環境
- Xcode7.2.1
言語
- Swift2.1
今回はXcodeプロジェクトの立ち上げからStep by Stepに説明するので、
実際はStep4あたりからダブルタップ機能の実装をする。
サンプルコードはGitHubにあげたので、一番後ろへ
Step1：オリジナルを見てみる
いつタップされたのがわからないため、ちょっと見づらいかもしれない
最後に完成品のGIFを載せた!!
仕組みとしては、
画像を2回連続タップされたときにいいねのアクション（今回はアニメーションについて）を加える
（もうひとつのアクション、サーバーとのやり取りは今回では扱わない）
ちなみに、よければInstagramのフォローよろしくお願いします笑
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ファイルは下のようにImageViewを2つ追加して、大きい方は下で、小さい方（♡）は上
作ったCustomCellクラスにIBOutletをリンクさせる
表示させるイメージを
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：ジェスチャーを認識させる
- 2回連続タップしたかのBool変数を宣言
- UITapGestureRecognizerを使ってDoubleTapを認識する定数を宣言
- UITapGestureRecognizerでaction: "onDoubleTap:"といれる。
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
})
}
完成品を見てみる
