Swiftpack.co -  mahmudahsan/SwiftUI-Action-Sheet-Custom-View-Card as Swift Package
Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
mahmudahsan/SwiftUI-Action-Sheet-Custom-View-Card
A SwiftUI based custom sheet card to show information in iOS application.
.package(url: "https://github.com/mahmudahsan/SwiftUI-Action-Sheet-Custom-View-Card.git", from: "0.2.5")

ActionSheetCustomViewCard

iOS Swift Package Manager Twitter: @mahmudahsan

A SwiftUI based custom sheet card to show any custom view inside the card in iOS application.

Demo

Features

  • Any custom view you can show inside the card

Related Library

How to use

Add this Swift package to your project

https://github.com/mahmudahsan/SwiftUI-Action-Sheet-Custom-View-Card

Demo

Import and use

import SwiftUI
import ActionSheetCustomViewCard

struct ContentView: View {
    @State var showingSheet = false
    
    var content: some View {
        VStack {
            Text("Custom Info Sheet")
                .font(.largeTitle)
                .padding()
            Button(action: {
                showingSheet = true
            }) {
                Text("Open Sheet")
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
    
    func hideActionSheet() {
        showingSheet = false
    }
    
    var actionSheet: some View {
        ActionSheetCustomViewCard(content: {
            VStack {
                HStack {
                    Spacer()
                }
                HStack {
                    ZStack (alignment: .top){
                        HStack (alignment: .top){
                            Button(action: {
                                self.hideActionSheet()
                            }, label: {
                                Image(systemName: "xmark")
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: 14, height: 14)
                                    .foregroundColor(.black)
                            })
                            .frame(width: 20)
                            .padding(.top, 2)
                            
                            Spacer()
                        }
                        
                        Spacer()
                        Text("Why do I need to connect to do the job?")
                            .multilineTextAlignment(.center)
                            .font(Font.system(size: 16.0, weight: .semibold, design: .rounded))
                            .padding(.horizontal, 72)
                            .fixedSize(horizontal: false, vertical: true)
                        
                        Spacer()
                    }
                }
                .padding(.bottom, 20)
                .padding(.horizontal, 18)
                
                Text("orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a tempor nibh. Morbi porttitor leo nulla, vitae fringilla mauris molestie vel. Fusce lobortis, quam id luctus rutrum, urna sem tincidunt augue, sit amet varius diam odio quis massa.")
                    .multilineTextAlignment(.leading)
                    .fixedSize(horizontal: false, vertical: true)
                    .padding(.horizontal, 40)
                    .foregroundColor(.gray)
            }
            
        },
            isShowing: $showingSheet,
            outOfFocusOpacity: 0.2
        )
    }
    
    var sheetView: some View {
        VStack {
            Spacer()
            actionSheet
        }
    }
    
    var body: some View {
        ZStack {
            content
            sheetView
        }
    }
}

Steps

  1. Add import ActionSheetCustomViewCard in your SwiftUI View
  2. Define a @State var showingSheet = false state
  3. Create the sheet view and pass any custom view
ActionSheetCustomViewCard(content: {
                VStack {
                    HStack {
                        Spacer()
                    }
                    HStack {
                        ZStack (alignment: .top){
                            HStack (alignment: .top){
                                Button(action: {
                                    self.showingSheet = false
                                }, label: {
                                    Image(systemName: "xmark")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .frame(width: 14, height: 14)
                                        .foregroundColor(.black)
                                })
                                .frame(width: 20)
                                .padding(.top, 2)
                                
                                Spacer()
                            }
                            
                            Spacer()
                            Text("Why do I need to connect to do the job?")
                                .multilineTextAlignment(.center)
                                .font(Font.system(size: 16.0, weight: .semibold, design: .rounded))
                                .padding(.horizontal, 72)
                                .fixedSize(horizontal: false, vertical: true)
                            
                            Spacer()
                        }
                    }
                    .padding(.bottom, 20)
                    .padding(.horizontal, 18)
                    
                    Text("orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a tempor nibh. Morbi porttitor leo nulla, vitae fringilla mauris molestie vel. Fusce lobortis, quam id luctus rutrum, urna sem tincidunt augue, sit amet varius diam odio quis massa.")
                        .multilineTextAlignment(.leading)
                        .fixedSize(horizontal: false, vertical: true)
                        .padding(.horizontal, 40)
                        .foregroundColor(.gray)
                }
                
            },
                isShowing: $showingSheet,
                outOfFocusOpacity: 0.2
            )

  1. Use the sheet in your main view within a ZStack, otherwise the black background view will not show correctly
var body: some View {
        ZStack {
            content
            sheetView
        }
    }

For more examples open /Demo/Demo.xcodeproj

  1. How to Change color of the sheet card background
        ActionSheetCustomViewCard(content: {
            // Add any custom view 
            // Text("Hello")
        },
            isShowing: $showingSheet,
            outOfFocusOpacity: 0.2 // gray background opacity
        )

Questions or feedback?

GitHub

link
Stars: 2
Last commit: 4 days ago

Ad: Job Offers

iOS Software Engineer @ Perry Street Software
Perry Street Software is Jack’d and SCRUFF. We are two of the world’s largest gay, bi, trans and queer social dating apps on iOS and Android. Our brands reach more than 20 million members worldwide so members can connect, meet and express themselves on a platform that prioritizes privacy and security. We invest heavily into SwiftUI and using Swift Packages to modularize the codebase.

Release Notes

Fixed an weird bug
4 days ago

When the sheet shows within a TabView the content pushed a bit down.

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API