OCSwipeCards: UI component

The OCSwipeCards is a flexible card view that can be customized to display multiple cards and their details. It can be shown as a single card as will as a stack of cards with a maximum count of 3. Each swipe card can include a image, title, information and button. The appearance of the card can be customized using different style options

The entire card is a touch and actionable area. It is swappable left and right. Also, it can be triggered by the external user interactions. The card is not clickable. Only the button as a clickable functionality.

Features

• User can pass the desired details to show like image, title, information, style
• In style, user can change card style like background, image, title, information and buttons etc

Installation

1. Copy the SwipeCard component folder into your Xcode project.

2. Use the OCSwipeCards view in your SwiftUI code:

Parameters:

• viewModel : ViewModel class containing array of OCSwipeCardInfo
• swipeCardViewStyle : User can change card style like swipeCardBackgroundColor, iconColor, titleColor, descriptionColor and buttonColor
• swipeAnimation : We can choose the swipe animation type like swipeLeft and swipe right
• onCardButtonTap : Will give the callback with card information for a particular card button selection.
• onRemoveCard : Will give the callback with card information after card removal

import SwiftUI

struct OCSwipeCardTemplate: View {
        @State var swipeAnimation: SwipeCardAnimation = .unknown
        
        var body: some View {
            VStack(spacing: 20) {
                let swipeCardInfo = OCSwipeCardInfo(id: 1, imageType: .local(image: Image("ButtonPlaceholderIcon"), title: "Test title1", description: "Test Description", buttonTitle: "Button title")
                
                let swipeCardInfo2 = OCSwipeCardInfo(id: 2, imageType: .local(image: Image("ButtonPlaceholderIcon"), title: "Test title2", description: "Test Description", buttonTitle: "Button title")
                
                let swipeCardInfo3 = OCSwipeCardInfo(id: 3, imageType: .local(image: Image("ButtonPlaceholderIcon"), title: "Test title3", description: "Test Description", buttonTitle: "Button title")
                
                OCSwipeCards(viewModel: OCSwipeCardContainerViewModel(swipeCardInfoList: [swipeCardInfo, swipeCardInfo2, swipeCardInfo3]), swipeAnimation: $swipeAnimation, onSelect: { swipeCardInfo in
                    debugPrint("SwipeCard \(swipeCardInfo.title) selected")
                })
                .padding(32)
                .frame(width: 328, height: 420, alignment: .center)
                
            }
            Spacer(minLength: 10)
            setSwipeButtonsContainerView
        }
        
        /// Left swipe / Right swipe button container view
        private var setSwipeButtonsContainerView: some View {
            HStack(alignment: .center) {
                OCButton(title: "Swipe Left",
                         type: .primary,
                         isEnabled: .constant(true),
                         maxWidth: .infinity) { _ in
                    self.swipeAnimation = .swipeLeft
                    
                }
                
                OCButton(title: "Swipe Right",
                         type: .primary,
                         isEnabled: .constant(true),
                         maxWidth: .infinity) {  _ in
                    self.swipeAnimation = .swipeRight
                }
                
                                OCButton(title: "Swipe Right",
                         type: .primary,
                         isEnabled: .constant(true),
                         maxWidth: .infinity) {  _ in
                    self.swipeDirection = .right
                }
                
            }
        }
}