
O objetivo deste projeto é recriar a interface do usuário Discover em Shazam (que eu acho que é uma ótima e divertida maneira de exibir conteúdo) em combinação com um estilo Tinder de cartões deslizantes para a esquerda/direita. A idéia por trás disso é que, em alguns casos, você não deseja desviar os cartões, mas mantenha -os disponíveis para mais tarde. Esta implementação permite isso. E é uma maneira divertida de interagir com o conteúdo.
Ele é construído com um UICollectionView e um fluxo de fluxo personalizado.
Para instalar com o Cocoapods, basta adicionar a seguinte linha ao seu poder:
pod 'VerticalCardSwiper'Para instalar com o Cartago, basta adicionar a seguinte linha ao seu PODFILE:
github "JoniVR/VerticalCardSwiper" Para experimentar VerticalCardSwiper
pod try VerticalCardSwiperou abra o projeto e execute o exemplo.
VerticalCardSwiper se comporta muito como um UICollectionView padrão. Para usá -lo dentro do seu 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 regular, você pode recarregar os dados ligando cardSwiper . reloadData ( ) cardSwiper . focussedCardIndexcardSwiper . scrollToCard ( at : Int , animated : Bool ) - > BoolcardSwiper . cardForItem ( at : Int ) - > CardCell ? cardSwiper . swipeCardAwayProgrammatically ( at : Int , to : SwipeDirection , withDuration : TimeInterval = 0.3 ) - > BoolCertifique -se de atualizar primeiro o seu DataSource, caso contrário, ocorrerá um erro.
cardSwiper . moveCard ( at : Int , to : Int )
cardSwiper . deleteCards ( at : [ Int ] )
cardSwiper . insertCards ( at : [ Int ] ) Para lidar com gestos de furto, implemente o VerticalCardSwiperDelegate .
class ViewController : UIViewController , VerticalCardSwiperDelegate {
override func viewDidLoad ( ) {
super . viewDidLoad ( )
cardSwiper . delegate = self
}
func willSwipeCardAway ( card : CardCell , index : Int , swipeDirection : SwipeDirection ) {
// called right before the card animates off the screen (optional).
}
func didSwipeCardAway ( card : CardCell , index : Int , swipeDirection : SwipeDirection ) {
// 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).
}
} Subclasse o CardCell para personalizar os cartões.
class ExampleCardCell : CardCell {
} Joni van ROOST, [email protected]
O VerticalCardSwiper está disponível sob a licença do MIT. Consulte o arquivo de licença para obter mais informações.
Sinta -se à vontade para enviar uma solicitação de tração, abrir um problema ou forçar este projeto. Qualquer ajuda é sempre apreciada. Um grande obrigado a todos os colaboradores!