VerticalCardSwiper
Shazam Discover UI 和 Tinder 的结合,用 UICollectionView 和 Swift 构建。
项目目标和信息
这个项目的目标是重新创建 Shazam 中的 Discover UI(我认为这是一种很好的、有趣的内容展示方式),并结合 Tinder 样式的左右滑动卡片。这个想法背后的想法是,在某些情况下,您可能不想直接滑动卡片移除它们,而是希望它们仍然可供后续使用。这种实现方式允许这样做。同时,这也是一种有趣的内容交互方式。
使用 UICollectionView
和自定义布局构建。
要求
- iOS 9.0+
- Swift 5
安装
CocoaPods
使用 CocoaPods 安装,只需在 Podfile 中添加以下行
pod 'VerticalCardSwiper'
Carthage
使用 Carthage 安装,只需在 Podfile 中添加以下行
github "JoniVR/VerticalCardSwiper"
示例
尝试 VerticalCardSwiper
pod try VerticalCardSwiper
或打开项目并运行示例。
用法
VerticalCardSwiper
的行为与标准的 UICollectionView
类似。要在 UIViewController
内部使用它
import VerticalCardSwiper
class ExampleViewController: UIViewController, VerticalCardSwiperDatasource {
private var cardSwiper: VerticalCardSwiper!
override func viewDidLoad() {
super.viewDidLoad()
cardSwiper = VerticalCardSwiper(frame: self.view.bounds)
view.addSubview(cardSwiper)
cardSwiper.datasource = self
// register cardcell for storyboard use
cardSwiper.register(nib: UINib(nibName: "ExampleCell", bundle: nil), forCellWithReuseIdentifier: "ExampleCell")
}
func cardForItemAt(verticalCardSwiperView: VerticalCardSwiperView, cardForItemAt index: Int) -> CardCell {
if let cardCell = verticalCardSwiperView.dequeueReusableCell(withReuseIdentifier: "ExampleCell", for: index) as? ExampleCardCell {
return cardCell
}
return CardCell()
}
func numberOfCards(verticalCardSwiperView: VerticalCardSwiperView) -> Int {
return 100
}
}
属性
/// Indicates if side swiping on cards is enabled. Set to false if you don't want side swiping. Default is `true`.
@IBInspectable public var isSideSwipingEnabled: Bool = true
/// Allows you to enable/disable the stacking effect. Default is `true` (enabled).
@IBInspectable public var isStackingEnabled: Bool = true
/// The transform animation that is shown on the top card when scrolling through the cards. Default is 0.05.
@IBInspectable public var firstItemTransform: CGFloat = 0.05
/// The inset (spacing) at the top for the cards. Default is 40.
@IBInspectable public var topInset: CGFloat = 40
/// The inset (spacing) at each side of the cards. Default is 20.
@IBInspectable public var sideInset: CGFloat = 20
/// Sets how much of the next card should be visible. Default is 50.
@IBInspectable public var visibleNextCardHeight: CGFloat = 50
/// Vertical spacing between the focussed card and the bottom (next) card. Default is 40.
@IBInspectable public var cardSpacing: CGFloat = 40
/// Allows you to set the view to Stack at the Top or at the Bottom. Default is true.
@IBInspectable public var isStackOnBottom: Bool = true
/// Sets how many cards of the stack are visible in the background
@IBInspectable public var stackedCardsCount: Int = 1
/**
Returns an array of indexes (as Int) that are currently visible in the `VerticalCardSwiperView`.
This includes cards that are stacked (behind the focussed card).
*/
public var indexesForVisibleCards: [Int]
其他
UICollectionView
一样,您可以通过调用来重新加载数据
就像普通cardSwiper.reloadData()
获取当前聚焦的卡片索引
cardSwiper.focussedCardIndex
通过调用滚动到特定的卡片
cardSwiper.scrollToCard(at: Int, animated: Bool) -> Bool
获取指定索引的卡片
cardSwiper.cardForItem(at: Int) -> CardCell?
通过程序滑动卡片移除
cardSwiper.swipeCardAwayProgrammatically(at: Int, to: SwipeDirection, withDuration: TimeInterval = 0.3) -> Bool
在运行时移动/删除/插入卡片
请确保首先更新您的数据源,否则将发生错误。
cardSwiper.moveCard(at: Int, to: Int)
cardSwiper.deleteCards(at: [Int])
cardSwiper.insertCards(at: [Int])
委派
处理滑动手势,实现VerticalCardSwiperDelegate
。
class ViewController: UIViewController, VerticalCardSwiperDelegate {
override func viewDidLoad() {
super.viewDidLoad()
cardSwiper.delegate = self
}
func willSwipeCardAway(card: CardCell, index: Int, swipeDirection: CellSwipeDirection) {
// called right before the card animates off the screen (optional).
}
func didSwipeCardAway(card: CardCell, index: Int, swipeDirection: CellSwipeDirection) {
// handle swipe gestures (optional).
}
func didCancelSwipe(card: CardCell, index: Int) {
// Called when a card swipe is cancelled (when the threshold wasn't reached)
}
func sizeForItem(verticalCardSwiperView: VerticalCardSwiperView, index: Int) -> CGSize {
// Allows you to return custom card sizes (optional).
return CGSize(width: verticalCardSwiperView.frame.width * 0.75, height: verticalCardSwiperView.frame.height * 0.75)
}
func didScroll(verticalCardSwiperView: VerticalCardSwiperView) {
// Tells the delegate when the user scrolls through the cards (optional).
}
func didEndScroll(verticalCardSwiperView: VerticalCardSwiperView) {
// Tells the delegate when scrolling through the cards came to an end (optional).
}
func didDragCard(card: CardCell, index: Int, swipeDirection: SwipeDirection) {
// Called when the user starts dragging a card to the side (optional).
}
func didTapCard(verticalCardSwiperView: VerticalCardSwiperView, index: Int) {
// Tells the delegate when the user taps a card (optional).
}
func didHoldCard(verticalCardSwiperView: VerticalCardSwiperView, index: Int, state: UIGestureRecognizer.State) {
// Tells the delegate when the user holds a card (optional).
}
}
自定义
从CardCell
派生子类来自定义卡片。
class ExampleCardCell: CardCell {
}
关键特性
- Shazam Discover UI,支持分页
- 类似Tinder的滑动风格
- 可选择禁用侧面滑动
- 设置自定义的堆叠卡片数量
- README.md文件中的代码文档
- CocoaPods支持
- Carthage支持
- SPM支持
- 差异支持
作者
Joni Van Roost, [email protected]
许可证
VerticalCardSwiper遵循MIT许可证,更多详情请参阅LICENSE文件。
更多信息
请随意提交拉取请求、开启问题或复制此项目。任何帮助都将是受欢迎的。向所有贡献者表示衷心的感谢!