Недавно мне потребовалось отобразить карточки в приложении для iPhone, а затем, щелкнув по нему, перевернуть карточку. В этой статье подробно рассказывается, как это сделать с помощью Swift и UIKit.
Обратите внимание, что эта статья использует Swift в качестве примера, поэтому вам понадобится бета-версия Xcode 6, которая поддерживает язык. Конечно, то, что объясняется в этой статье, можно сделать с помощью Objective-C и более старой версии XCode.
Сначала начните с создания базового iPhone «Single View Application». Затем добавьте изображения (back.png и front.png), которые будут представлять карты, в проект XCode. Они здесь:
Я нашел изображения здесь . У них также есть целая колода карт, если требуется.
Давайте начнем с показа только обратной стороны карты. Итак, в вашем ViewController.swift объявите следующие атрибуты.
class ViewController: UIViewController { var cardView: UIView! var back: UIImageView! var front: UIImageView! }
В функции viewDidLoad мы динамически создадим cardView и добавим заднее изображение карты. Это код, который достигает этого.
override func viewDidLoad() { super.viewDidLoad() front = UIImageView(image: UIImage(named: "front.png")) back = UIImageView(image: UIImage(named: "back.png")) let rect = CGRectMake(20, 20, back.image.size.width, back.image.size.height) cardView = UIView(frame: rect) cardView.addSubview(back) view.addSubview(cardView) }
Если вы запустите приложение сейчас, оно должно просто показать заднюю часть игральной карты следующим образом:
Давайте добавим распознавание жестов в imageView, чтобы он распознавал, когда кто-то нажимает на него.
Вам необходимо создать UITapGestureRecognizer и передать селектор в его инициализатор. Поэтому для этого вам нужно изменить функцию viewDidLoad, чтобы она выглядела следующим образом:
override func viewDidLoad() { super.viewDidLoad() back = UIImageView(image: UIImage(named: "back.png")) let singleTap = UITapGestureRecognizer(target: self, action: Selector("tapped")) singleTap.numberOfTapsRequired = 1 let rect = CGRectMake(20, 20, back.image.size.width, back.image.size.height) cardView = UIView(frame: rect) cardView.addGestureRecognizer(singleTap) cardView.userInteractionEnabled = true cardView.addSubview(back) view.addSubview(cardView) }
Это вызовет прослушиваемую функцию, которая еще не существует. Итак, давайте добавим функцию в контроллер и просто запишем ее в консоль.
func tapped() { println("tapped") }
Теперь, если мы запустим приложение, нажав на обратную сторону игральной карты, должно появиться сообщение «постучал», появившееся в нашей консоли.
Так что теперь мы можем загрузить изображение, и оно может распознавать пользователей, нажимающих на него.
Давайте добавим переменную, чтобы указать, какую сторону карты мы показываем в данный момент. Поэтому в ViewController добавьте эту переменную экземпляра.
var showingBack = true
По умолчанию это значение true, так как мы сначала отображаем заднюю часть карты.
В UIView есть функция класса, которая позволяет переходить из одного представления в другое. Это именно то, что нам нужно.
UIView.transitionFromView(back, toView: front, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromRight, completion: nil)
Функция принимает от и до представлений, продолжительность перехода в секундах, такие параметры, как анимация перехода и блок завершения. Под крышками он удаляет fromView от своего родителя и заменяет его toView.
Так что, если мы соберем это вместе, это будет выглядеть так.
func tapped() { if (showingBack) { UIView.transitionFromView(back, toView: front, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromRight, completion: nil) showingBack = false } else { UIView.transitionFromView(front, toView: back, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromLeft, completion: nil) showingBack = true } }
Если вы запустите приложение, оно должно выглядеть следующим образом.
Итак, это все. Весь исходный код этого блога можно найти здесь, и еще раз спасибо Iron Star Media за изображения своих карточек.