Перелистывание карт с помощью Swift и UIKit

Недавно мне потребовалось отобразить карточки в приложении для 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  за изображения своих карточек.