Koloda:iOS平台Tinder风格卡片滑动组件,支持动态加载与自定义交互

KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS.

分支13Tags35
文件最后提交记录最后更新时间
9 年前
9 年前
8 年前
10 年前
9 年前
10 年前
9 年前
10 年前
10 年前
11 年前
9 年前

KolodaView Carthage兼容

Swift 2.2.x

Yalantis

请阅读我们博客上的这篇文章:如何使用Swift构建类似Tinder的Koloda。 还有另一篇:Koloda:类似Tinder的动画版本2 —— 在Pixate中原型设计与Swift开发

预览 预览

用途

KolodaView是一个旨在简化iOS上实现Tinder风格卡片功能的类。它提供了类似UITableView的数据源/代理接口,用于动态加载视图,同时实现了高效的视图加载和卸载。

支持的操作系统与SDK版本

  • 支持的构建目标 - iOS 9.0 (Xcode 8)

ARC兼容性

KolodaView需要ARC支持。

Cocoapods版本

pod 'Koloda', '~> 4.0'

线程安全

KolodaView 是从UIView派生的子类,并且和所有UIKit组件一样,它只能在主线程中被访问。你可能会希望使用线程来加载或更新KolodaView的内容或项目,但务必确保在内容加载完成后,在更新KolodaView之前切换回主线程。

安装

要通过CocoaPods进行安装,请将以下行添加到你的Podfile中。

use_frameworks!
pod "Koloda"

注意:由于 CocoaPods/CocoaPods#4420 问题,在使用 Xcode 7.1 和 CocoaPods v0.39.0 编译项目时出现了一个问题。不过,有一个临时的解决方法: 在 Podfile 文件的末尾添加以下几行代码:

post_install do |installer|
`find Pods -regex 'Pods/pop.*\\.h' -print0 | xargs -0 sed -i '' 's/\\(<\\)pop\\/\\(.*\\)\\(>\\)/\\"\\2\\"/'`
end

要通过 Carthage 安装,请将以下行添加到您的 Cartfile 文件中。

github "Yalantis/Koloda"

要在应用中手动安装 KolodaView 类,只需将 KolodaView、DraggableCardView 和 OverlayView 类的文件(演示文件和资源文件不需要)拖入您的项目中。此外,您还需要安装 facebook-pop。如果使用 CocoaPods,请添加桥接头。

使用方法

  1. 在 MyKolodaViewController 类中导入 Koloda 模块

    import Koloda
    
  2. 将 KolodaView 添加到 MyKolodaViewController 中,然后为其设置数据源和代理

    class ViewController: UIViewController {
        @IBOutlet weak var kolodaView: KolodaView!
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            kolodaView.dataSource = self
            kolodaView.delegate = self
        }
    }
    
  3. 使 MyKolodaViewController 遵守 KolodaViewDelegate 协议,并根据需要重写一些方法,例如

    extension MyKolodaViewController: KolodaViewDelegate {
        func kolodaDidRunOutOfCards(koloda: KolodaView) {
            dataSource.reset()
        }
    
        func koloda(koloda: KolodaView, didSelectCardAtIndex index: Int) {
            UIApplication.sharedApplication().openURL(NSURL(string: "http://yalantis.com/")!)
        }
    }
    
  4. 使 MyKolodaViewController 遵守 KolodaViewDataSource 协议并实现所有方法,例如

    extension MyKolodaViewController: KolodaViewDataSource {
    
        func kolodaNumberOfCards(koloda:KolodaView) -> Int {
            return images.count
        }
    
        func koloda(koloda: KolodaView, viewForCardAtIndex index: Int) -> UIView {
            return UIImageView(image: images[Int(index)])
        }
    
        func koloda(koloda: KolodaView, viewForCardOverlayAtIndex index: Int) -> OverlayView? {
            return NSBundle.mainBundle().loadNibNamed("OverlayView",
                owner: self, options: nil)[0] as? OverlayView
        }
    }
    
  5. KolodaView 使用默认实现。覆盖它以自定义其行为

另外,请查看 使用 Carthage 的示例项目。

属性

KolodaView 具有以下属性:

weak var dataSource: KolodaViewDataSource!

一个遵循KolodaViewDataSource协议的对象,能够提供用于填充KolodaView的视图。

weak var delegate: KolodaViewDelegate?

一个支持 KolodaViewDelegate 协议并能响应 KolodaView 事件的对象。

public var currentCardIndex

KolodaView 中前卡的索引(只读)。

public var countOfCards

KolodaView 中的卡片数量(只读)。要设置此数量,请实现数据源方法 kolodaNumberOfCards:。

var countOfVisibleCards

显示在KolodaView中的卡片数量。 方法

KolodaView类具有以下方法:

func reloadData()

此方法从数据源重新加载所有KolodaView项视图,并刷新显示效果。

func resetCurrentCardNumber()

此方法将 currentCardNumber 重置并调用 reloadData,从而使 KolodaView 从头开始加载。

func revertAction()

应用撤销动画并递减当前卡片编号。

func applyAppearAnimation()

应用出现动画效果。

func swipe(.Left)

应用向左滑动动画和动作,增加当前卡片编号。

func swipe(.Right)

应用向右滑动动画和操作,增加当前卡片编号。

public func frameForCardAtIndex(index: Int) -> CGRect

计算卡片的帧。适用于重写。查看示例以了解更多相关信息。

协议

KolodaView 依照苹果公司数据驱动视图的惯例,提供了两个协议接口,分别是 KolodaViewDataSource 和 KolodaViewDelegate。KolodaViewDataSource 协议包含以下方法:

func koloda(kolodaNumberOfCards koloda: KolodaView) -> Int

返回 KolodaView 中的项目(视图)数量。

func koloda(koloda: KolodaView, viewForCardAtIndex index: Int) -> UIView

返回在KolodaView指定索引处显示的视图。

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

返回指定索引处的卡片叠加视图。若要在滑动(左/右)时设置自定义叠加操作,您应该重写 OverlayView 中 overlayState 属性的 didSet 方法。(见示例)

KolodaViewDelegate 协议包含以下方法:

func koloda(koloda: KolodaView, allowedDirectionsForIndex index: Int) -> [SwipeResultDirection]

返回给定卡片的允许方向,默认为 [.Left, .Right]。

func koloda(koloda: KolodaView, shouldSwipeCardAtIndex index: Int, inDirection direction: SwipeResultDirection) -> Bool

在 KolodaView 执行滑动卡片操作前,会调用此方法。返回 true 或 false 以允许或拒绝滑动操作。

func koloda(koloda: KolodaView, didSwipeCardAtIndex index: Int, inDirection direction: SwipeResultDirection)

当KolodaView进行卡片滑动操作时,会调用此方法。无论卡片是 由程序控制滑动还是通过用户交互滑动,此方法都会被调用。

func kolodaDidRunOutOfCards(koloda: KolodaView)

当KolodaView没有卡片可以显示时,会调用此方法。

func koloda(koloda: KolodaView, didSelectCardAtIndex index: Int)

当其中一张卡片被轻触时,会调用此方法。

func kolodaShouldApplyAppearAnimation(koloda: KolodaView) -> Bool

在重新加载时,此方法将被触发,此时若有任何卡片被展示。如果您在该方法中返回 YES,或者未实现此方法,koloda 将应用出现动画。

func kolodaShouldMoveBackgroundCard(koloda: KolodaView) -> Bool

在正面卡片开始滑动时,此方法将被触发。如果您在此方法中返回YES或者不实现此方法,koloda将会在正面卡片拖动时,随之移动背景卡片。

func kolodaShouldTransparentizeNextCard(koloda: KolodaView) -> Bool

在 koloda 的布局确定以及滑动操作之后,此方法会被触发。如果您在该方法中返回 YES 或者不实现此方法,koloda 将会使下一张位于正面卡片下方的卡片变为透明。

func koloda(koloda: KolodaView, draggedCardWithPercentage finishPercentage: CGFloat, inDirection direction: SwipeResultDirection)

每当 KolodaView 识别到卡片拖动事件时,会调用此方法。

func kolodaSwipeThresholdRatioMargin(koloda: KolodaView) -> CGFloat?

返回在拖动方向上,从卡片中心到边缘需要拖动的距离百分比,以达到触发滑动手势的条件。默认行为(或者返回NIL)会将此阈值设置为距离的一半。

func kolodaDidResetCard(koloda: KolodaView)

此方法在重置卡片后触发。

func koloda(koloda: KolodaView, didShowCardAtIndex index: Int)

该方法在一张卡片展示完毕并且动画完成后被调用。

func koloda(koloda: KolodaView, shouldDragCardAtIndex index: Int) -> Bool

当卡片开始被拖动时,会调用该方法。如果您在该方法中返回YES,或者不实现该方法,卡片将朝着拖动的方向移动。如果您返回NO,则卡片将不会移动。

发布说明

版本 3.1

  • 支持多方向
  • 添加用于禁用滑动的委托方法

版本 3.0

  • 动态插入/删除/重新加载特定卡片的能力
  • 外部动画器
  • 大重构。 更多信息
  • Swift 2.2 支持

版本 2.0

  • Swift 2.0 支持

版本 1.1

  • 新的委托方法
  • 修复了一些小问题

版本 1.0

  • 发布版本。

使用 KolodaView 的应用

预览

告诉我们!

如果您能发送使用我们组件的项目链接给我们,我们将非常高兴。只需发送电子邮件至 github@yalantis.com。如果您有任何关于动画的问题或建议,也请告诉我们。

附言:我们即将发布更多令人赞叹的代码和一个关于如何将iOS(Android)的用户界面做得更好的教程。敬请期待!

许可

MIT许可(MIT)

版权所有 © 2016 Yalantis

特此免费授予任何获得本软件及其相关文档文件(以下简称“软件”)副本的个人,以不受限制地处理软件,包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本,并允许获得软件的个人按照以下条件这样做:

上述版权声明和本许可声明应包含在所有软件副本或实质部分中。

软件按“原样”提供,不提供任何形式的保证,无论是明确的还是隐含的,包括但不限于对适销性、特定目的的适用性和非侵权性的保证。在任何情况下,作者或版权持有者均不对任何由本软件或其使用或其他与本软件相关的行为产生的索赔、损害或其他责任负责。

项目介绍

KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS.

定制我的领域