使用Koloda View在Swift中构建类似Tinder(国内的探探社交应用)的卡片

在过去几年中,随着社交网络应用程序的普及,约会应用程序也迅速出现。其中一个最突出的应用是Tinder。它不仅是一个很棒的约会应用程序,而且还在视图动画或过渡方面创建了新的iOS趋势,例如Tinder Card Swipe或Tinder UI

在这个iOS教程中,我们将学习如何在Swift中构建Tinder Swipe Cards,以便您可以将此功能包含在iOS应用程序中。目前有一些图库支持这种类型的可滑动卡片,其中一个是KolodaView。在本教程中,我们将向您展示如何使用代码示例在Swift中实现此动画。

1.简介

要了解有关Koloda View库的一般详细信息,请参阅此处的官方文档。在这一部分中,我们将为您提供一个高级概述。这个库的亮点是灵感来自Tinder的滑动到界面。该团队 在解释如何设计UI及其工作原理方面做得非常出色。您可以阅读他们的教程以了解有关其作用机制的更多信息。

Koloda View库通过利用协议使用相同的  dataSourcedelegate设计模式。这些模式的灵感来自UITableView和UICollectionView设计。iOS工程师使用这个库非常方便,因为他们已经熟悉了整体架构模式。我们需要做的就是使我们的视图控制器符合两个协议,并处理必要的功能。现在让我们开始具体学习如何构建像Tinder这样的应用程序,通过利用Koloda View来获得Tinder-esque卡片接口。

2.在Swift中构建iOS Tinder卡

首先,由于这是第三方 库,您需要从Carthage,CocoaPod或手动(“拖放”)安装它,以便将其作为Xcode项目的依赖项包含在内。像往常一样我们将通过CocoaPods安装KolodaView 。因此,在Podfile中添加以下pod依赖项:

pod “Koloda”

让我们运行新创建的Xcode项目,然后在工作区中使用相同的名称编写代码。这个Swift教程的主题将是Marvel漫威的英雄。当我们写这篇文章的时候,整个世界都在为Endgame复仇者4疯狂- 这十年的电影让我们想把它作为一个 关于长途旅行和钢铁侠的致敬。如果你不熟悉这部电影,不用担心,无论如何你都会完全理解这部教程(哈哈哈哈)。现在,让我们写一些代码。

第1步:设置Tinder UI

通过使用Interface Builder,将UIView对象拖到故事板上。为它添加约束(您可以参考我们的方式或添加您自己的约束)。在Identity Inspector中,  我们为UIView对象设置了一个自定义类(KolodaView),如下所示:

注意将module设置为Koloda,否则,您的应用程序将crash。之后,将IBOutlet连接从屏幕上的UIView拖到UIViewController。不要忘记导入Koloda库,以便代码编译成功。

第2步:遵守DataSource和delegate协议

在视图控制器的viewDidLoad 中,让我们添加以下代码段

override func viewDidLoad(){
    super.viewDidLoad()

    kolodaView.dataSource = self
    kolodaView.delegate = self
  }
}

正如我们所说的,我们遵守这些协议是在相同的方式,类似我们一直使用的UITableViewUICollectionView。 我们已经分离了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的功能相同。在那里,我们声明物品的数量(Tinder卡)以及它们的显示方式。对于KolodaViewDelegate您将处理每个项目(在每张可刷卡片上)的执行操作。这些只是一些基本的例子。实际上,您可以使用此库支持的许多协议方法,如下所示:

对于  KolodaViewDataSource

-  func kolodaSpeedThatCardShouldDrag(_ koloda:KolodaView) - > DragSpeed 

-  func koloda(_ koloda:KolodaView,viewForCardOverlayAt index:Int) - > OverlayView?

这里有一个注意事项,要在滑动(左/右)上设置自定义叠加操作,您应该在OverlayView中覆盖didSet of overlayState属性。

对于  KolodaViewDelegate, 您可以在其文档中找到此库支持的所有协议。在这个iOS教程中,我想提一些我们认为最重要的协议。

func kolodaDidRunOutOfCards(_ koloda:KolodaView)

此功能非常  值得注意,因为在视图用完卡片后,您无法将UI留空。您必须处理这种情况,例如隐藏Koloda或显示告诉用户没有其他卡的视图。请记住,优雅地对待您的空状态是一种令人敬畏的设计技巧,并使您的移动应用程序脱颖而出。

  • func koloda (_ koloda:KolodaView,didSelectCardAt index:Int )

当用户点击Tinder卡时(类似于UITableViewDelegate的didSelectRowAt),将调用此函数。例如,在我们的iOS应用示例中,我们显示了警报。其余的委托方法主要涉及动画,所以你应该仔细研究它们,使你的约会应用程序更丰富的视觉功能。现在,让我们运行应用程序来查看我们的英雄。

 3.结论

好的!我们成功地使用KolodaView构建了一个简单的Tinder UI Card Swipe Swift。在不久的将来,这种行为  将变得越来越普遍,所以我们希望你会喜欢这篇文章。如果您喜欢,请不要忘记分享这篇文章。此外,如果您正在寻找建立自己的约会应用程序,您可以通过这个教程设计和开发。

快乐的编码!

PS:这个项目中使用的所有图像都可以在这里下载:https://www.pixelstalk.net/thor-backgrounds-free。



原文地址:https://www.cnblogs.com/zhanggen/p/10861399.html

时间: 2024-11-09 09:39:53

使用Koloda View在Swift中构建类似Tinder(国内的探探社交应用)的卡片的相关文章

Swift中的类似scala的foldleft方法的实现

extension Array {     func foldLeft(a:T, action:(T, T)->T)->T {         var ret:T = a         for b:T in self {             ret = action(ret,b)         }         return ret     } } 把这个放到项目当中任何一个swift文件当中,即可全局访问. 示例: 求最小值 var t = [1,3,5,4,9,100,6,-2]

<转>在Swift中构建assert()

__FILE__ 和 __LINE__这两个神奇的宏定义是C语言中偶尔有用的特性.他们被构建在预处理程序中,并在C语言语法分析程序运行前被展开.尽管Swift没有预处理程序,它却提供了名称相似的类似功能,但隐藏着极其不同的实现方式. 内建标识符 就像在the Swift programming guide中描述的那样,Swift有很多内建标识符,包括__FILE__, __LINE__, __COLUMN__, 和 __FUNCTION__.这些表达式可以在任何地方使用,并被语法分析器在源码对应

swift 中元组

在swift中元组类似与C语言中的结构体,在一个元组中可以包含多种数据类型,在swift中主要用于函数中做为函数返回值 Example:元组定义 方式一: let stu: (String,Int,Double,Int) = ("qj",25,175.0,80); 方式二: let stu1 = (name:"zhsan", age:25); 访问方式: 方式一:stu.0,stu.1.... 方式二:let(name,age,height,score) = stu

swift中类似宏定义

建一个类 如,在Contans.swift中 import UIKit let kMAIN_SIZE = UIScreen.mainScreen().bounds 在其他地方直接用 比如在 MyTabbarViewController.swift中 var bgView = UIView(frame:CGRectMake(0, 0, kMAIN_SIZE.width, kMAIN_SIZE.height - 20 - 44)); swift中类似宏定义,布布扣,bubuko.com

swift中 类似OC的宏定义

OC 中调试打印 /** *  自定义Log */ #ifdef DEBUG #define JYLog(...)        NSLog(__VA_ARGS__) #else #define JYLog(...) #endif // swift中我写了这么一个类,进行调试输出 调用方法  Debug.Log(error) import UIKit class Debug: NSObject{ // TODO: 为调试修改 private static let debug = true cla

Swift中类似C++和ruby中的final机制

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们知道在C++和ruby语言的错误处理中有一种final机制,发生在无论是否出现错误都会执行的情况.这时适合处理收尾或清理工作. 在Swift中同样存在一个defer语法,后面跟闭包可以完成类似的功能,只不过defer不仅仅可以用在错误处理中,它可以用在任何需要清理的情况: var isTrue = false func test(name:String)-

Swift 中的闭包与 C 和 Objective-C中的 blocks 以及其它一些编程语言中的 lambdas 比較类似。

闭包是功能性自包括模块,能够在代码中被传递和使用. Swift 中的闭包与 C 和 Objective-C中的 blocks 以及其它一些编程语言中的 lambdas 比較相似. 闭包能够 捕获 和存储其所在上下文中随意常量和变量的引用. 这就是所谓的闭合并包裹着这些常量和变量,俗称闭包.Swift会为您管理在 捕获 过程中涉及到的内存操作. 注意:假设您不熟悉 捕获 (capturing) 这个概念也不用操心.后面会具体对其进行介绍. 在Swift函数章节中介绍的全局和嵌套函数实际上也是特殊的

Swift中使用构建配置来支持条件编译-b

在Objective-C中,我们经常使用预处理指令来帮助我们根据不同的平台执行不同的代码,以让我们的代码支持不同的平台,如: 1 2 3 4 5 6 7 8 9 #if TARGET_OS_IPHONE     #define MAS_VIEW UIView              #elif TARGET_OS_MAC     #define MAS_VIEW NSView #endif 在swift中,由于对C语言支持没有Objective-C来得那么友好(暂时不知swift 2到C的支持

如何在Swift中创建自定义控件

更新通知:这篇引导教程由Mikael Konutgan使用iOS 8和Swift语言重新制作,在Xcode6和7上测试通过.原始教程是由Colin Eberhardt团队制作的. 用户界面控件是许多应用的重要组成部分.使用这些控件,可以让用户查看应用的内容或与他们的应用进行交互.苹果提供了一个控件集,像UITextField, UIButton 和 UISwitch.灵活使用这些工具箱中已经存在的控件,可以让你创建各种各样的用户界面. 但是,有的时候你可能需要做一些与众不同的事情:库中的控件已经