在過去幾年中，隨著社交網(wǎng)絡應用程序的普及，約會應用程序也迅速出現(xiàn)。其中一個最突出的應用是Tinder。它不僅是一個很棒的約會應用程序，而且還在視圖動畫或過渡方面創(chuàng)建了新的iOS趨勢，例如Tinder Card Swipe或Tinder UI
在這個iOS教程中，我們將學習如何在Swift中構(gòu)建Tinder Swipe Cards，以便您可以將此功能包含在iOS應用程序中。目前有一些圖庫支持這種類型的可滑動卡片，其中一個是KolodaView。在本教程中，我們將向您展示如何使用代碼示例在Swift中實現(xiàn)此動畫。
1.簡介
要了解有關Koloda View庫的一般詳細信息，請參閱此處的官方文檔。在這一部分中，我們將為您提供一個高級概述。這個庫的亮點是靈感來自Tinder的滑動到界面。該團隊 在解釋如何設計UI及其工作原理方面做得非常出色。您可以閱讀他們的教程以了解有關其作用機制的更多信息。
Koloda View庫通過利用協(xié)議使用相同的 dataSource和delegate設計模式。這些模式的靈感來自UITableView和UICollectionView設計。iOS工程師使用這個庫非常方便，因為他們已經(jīng)熟悉了整體架構(gòu)模式。我們需要做的就是使我們的視圖控制器符合兩個協(xié)議，并處理必要的功能?，F(xiàn)在讓我們開始具體學習如何構(gòu)建像Tinder這樣的應用程序，通過利用Koloda View來獲得Tinder-esque卡片接口。
2.在Swift中構(gòu)建iOS Tinder卡
首先，由于這是第三方 庫，您需要從Carthage，CocoaPod或手動（“拖放”）安裝它，以便將其作為Xcode項目的依賴項包含在內(nèi)。像往常一樣，我們將通過CocoaPods安裝KolodaView 。因此，在Podfile中添加以下pod依賴項：
pod “Koloda”
讓我們運行新創(chuàng)建的Xcode項目，然后在工作區(qū)中使用相同的名稱編寫代碼。這個Swift教程的主題將是Marvel漫威的英雄。當我們寫這篇文章的時候，整個世界都在為Endgame復仇者4瘋狂- 這十年的電影讓我們想把它作為一個 關于長途旅行和鋼鐵俠的致敬。如果你不熟悉這部電影，不用擔心，無論如何你都會完全理解這部教程（哈哈哈哈）。現(xiàn)在，讓我們寫一些代碼。
第1步：設置Tinder UI
通過使用Interface Builder，將UIView對象拖到故事板上。為它添加約束（您可以參考我們的方式或添加您自己的約束）。在Identity Inspector中， 我們?yōu)閁IView對象設置了一個自定義類（KolodaView），如下所示：
注意將module設置為Koloda，否則，您的應用程序?qū)rash。之后，將IBOutlet連接從屏幕上的UIView拖到UIViewController。不要忘記導入Koloda庫，以便代碼編譯成功。
第2步：遵守DataSource和delegate協(xié)議**
在視圖控制器的*viewDidLoad *中，讓我們添加以下代碼段
override func viewDidLoad（）{
super.viewDidLoad（）
kolodaView.dataSource = self
kolodaView.delegate = self
}
正如我們所說的，我們遵守這些協(xié)議是在相同的方式，類似我們一直使用的UITableView或UICollectionView。 我們已經(jīng)分離了KolodaView，將****dataSource、delegate給他們自己的擴展，以便更容易解釋：
extension ViewController: KolodaViewDelegate {
func kolodaDidRunOutOfCards(_ koloda: KolodaView) {
koloda.reloadData()
}
func koloda(_ koloda: KolodaView, didSelectCardAt index: Int) {
let alert = UIAlertController(title: "Congratulation!", message: "Now you're \(images[index])",
preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "OK", style: .default))
self.present(alert, animated: true)
}
}
extension ViewController: KolodaViewDataSource {
func kolodaNumberOfCards(_ koloda:KolodaView) -> Int {
return images.count
}
func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
let view = UIImageView(image: UIImage(named: images[index]))
view.layer.cornerRadius = 20
view.clipsToBounds = true
return view
}
}
如您所見，KolodaViewDataSource中的兩個委托方法與UITableViewDataSource的功能相同。在那里，我們聲明物品的數(shù)量（Tinder卡）以及它們的顯示方式。對于KolodaViewDelegate，您將處理每個項目（在每張可刷卡片上）的執(zhí)行操作。這些只是一些基本的例子。實際上，您可以使用此庫支持的許多協(xié)議方法，如下所示：</pre>
對于 KolodaViewDataSource：
func kolodaSpeedThatCardShouldDrag（_ koloda：KolodaView） - > DragSpeed
func koloda（_ koloda：KolodaView，viewForCardOverlayAt index：Int） - > OverlayView？
這里有一個注意事項，要在滑動（左/右）上設置自定義疊加操作，您應該在OverlayView中覆蓋didSet of overlayState屬性。
對于 **KolodaViewDelegate， **您可以在其文檔中找到此庫支持的所有協(xié)議。在這個iOS教程中，我想提一些我們認為最重要的協(xié)議。
func kolodaDidRunOutOfCards（_ koloda：KolodaView）
此功能非常 值得注意，因為在視圖用完卡片后，您無法將UI留空。您必須處理這種情況，例如隱藏Koloda或顯示告訴用戶沒有其他卡的視圖。請記住，優(yōu)雅地對待您的空狀態(tài)是一種令人敬畏的設計技巧，并使您的移動應用程序脫穎而出。
func koloda （_ koloda：KolodaView，didSelectCardAt index：Int ）
當用戶點擊Tinder卡時（類似于UITableViewDelegate的didSelectRowAt），將調(diào)用此函數(shù)。例如，在我們的iOS應用示例中，我們顯示了警報。其余的委托方法主要涉及動畫，所以你應該仔細研究它們，使你的約會應用程序更豐富的視覺功能?，F(xiàn)在，讓我們運行應用程序來查看我們的英雄。
** 3.結(jié)論**
好的！我們成功地使用KolodaView構(gòu)建了一個簡單的Tinder UI Card Swipe Swift。在不久的將來，這種行為 將變得越來越普遍，所以我們希望你會喜歡這篇文章。如果您喜歡，請不要忘記分享這篇文章。此外，如果您正在尋找建立自己的約會應用程序，您可以通過這個教程設計和開發(fā)。
快樂的編碼！
PS：這個項目中使用的所有圖像都可以在這里下載：https：//www.pixelstalk.net/thor-backgrounds-free。
