softsuave-tech-matrix/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<Bool> - 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<Int> - 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

```swift 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

Package Metadata

Repository: softsuave-tech-matrix/adaptive_card_layout

Default branch: main

README: README.md