adaptive_card_layout

CardView is a versatile SwiftUI component for displaying a collection of views in a card-like format. It supports both grid and horizontal scrolling layouts and includes optional scaling effects

Features

• Display views in a grid or horizontal scrolling layout
• Optional scaling effect for views based on their position
• Can display views in carousel format with optional scaling
• Customizable view dimensions and spacing
• Accepts an array of content views

Horizontal scroll:

• Display cards in carousel
• Change the number of rows as per requirement
• Based on the number rows selected the the content in the array gets adjusted
• Add scaling effect

Vertical scroll view:

• Display cards in a grid
• Change the number of columns as per the requirement
• Based on the number of columns selected the content of the array gets adjusted

• Change the frame width as per your requirement

Properties

• viewsArray: [Binding<[AnyView]>] - An array of views to be displayed.
• gridView: Binding - Whether to display the views in a grid layout or carousel format(horizontal scrolling)
• scale: Bool - Whether to apply a scaling effect. Default is false.
• scaleFactor: CGFloat - Adjust the amount of scaling as per your requirement. Default is 1.1
• frameWidth: CGFloat - The width of each view. Default is 150.
• frameHeight: CGFloat - The height of each view. Default is 150.
• additionalFrameHeight: CGFloat - Additional height given to the view for horizontal scrolling to avoid overlapping or breaking of view. Default is 30
• RowOrColumnNo: Binding - The number of columns required in the grid layout or the number of rows required for the horizontal scrolling layout .
• verticalSpacing: vertical spacing between the cards. Default is 10.
• horizontalSpacing: Horizontal spacing between the cards. Default is 10.
• onTap: ((Int) -> Void)? - An optional closure to handle tap gestures on the views.

Installation

• Add the package through swift package manager to your project https://swiftpackageindex.com/softsuave-tech-matrix/adaptive_card_layout

• Alternatively you can also install through cocoapods pod 'adaptive_card_layout'

Useage

Step 1:

• Create a custom view which you want to show in the card

import SwiftUI

struct CustomView1: View {
    
    var text: String
    var color: Color 
    var image: String
    
    var body: some View {
        VStack(alignment:.center) {
            Text(text)
                .font(.title)
                .foregroundColor(.white)
            Image(systemName: image)
                .resizable()
                .frame(width: 50, height: 50)
                .foregroundColor(.yellow)
                
        }
        .frame(width: 180, height: 300)
        .background(color)
        .cornerRadius(10)
        .padding()
    }
}

Step 2:

• Import CardViewAdvanced library in your parent view

• Create an array of views as per your requirement

  private var imageArray: [String:String] = ["CustomView 1":"magnifyingglass","CustomView 32":"moon.fill","CustomView 23":"sun.min","CustomView 33": "cloud","CustomView 4":"moon","CustomView 5":"sun.max","CustomView 6":"sun.snow", "CustomView 7":"sun.max.fill", "CustomView 8":"moon.zzz", "CustomView 92":"cloud.snow.fill", "CustomView 22":"cloud.snow", "CustomView 11":"sun.snow.fill","CustomView 12": "cloud.fog", "CustomView 21":"magnifyingglass","CustomView 2":"moon.fill","CustomView 3":"sun.min","CustomView 13": "cloud","CustomView 14":"moon","CustomView 15":"sun.max","CustomView 16":"sun.snow", "CustomView 17":"sun.max.fill", "CustomView 18":"moon.zzz", "CustomView 9":"cloud.snow.fill", "CustomView 10":"cloud.snow", "CustomView 19":"sun.snow.fill","CustomView 20": "cloud.fog"]
    
    @State private var viewsArray: [AnyView] = []
  
    init() {
        _viewsArray = State(initialValue: imageArray.map { item in
            AnyView(CustomView1(text: item.key, color: Color.random, image: item.value))
        })
    }

Step 3:

• Pass the array of views in your parent view
• Set values of the params as per your requirement

CardView(viewsArray: $viewsArray, scale: true, frameWidth: 180, frameHeight: 300,additionalFrameHeight: 30, gridView: $isGridView, RowOrcolumnNo: $columnNo) { indexNo in
print(indexNo)
}

Contributing

Contributions are always welcome! For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Author

• @softsuave-tech-matrix

Feedback

If you have any feedback, please reach out to us at techmatrix@softsuave.com