SwiftUI Custom Sheets Quarter, Half and Full Sheets

SwiftUI Custom Sheets Quarter, Half and Full Sheets

ContentView.swift

 
//
//  ContentView.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    @State private var sheetMode: SheetMode = .none
    
    var body: some View {
        ZStack {
            SheetView(sheetMode: $sheetMode) {
                
                if sheetMode == .quarter {
                    VStack {
                        Text("Hello World! Sheets in SwiftUI")
                            .font(.body).foregroundColor(.white)
                        Spacer()
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.yellow)
                    .clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
                }else if sheetMode == .half {
                    VStack {
                        Text("Hello World! Sheets in SwiftUI")
                            .foregroundColor(.white)
                        Spacer()
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.green)
                    .clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
                }else if sheetMode == .full {
                    VStack {
                        Text("Hello World! Sheets in SwiftUI")
                            .foregroundColor(.white)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.orange)
                    .clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
                }else {
                    VStack {
                        Text("Hello World! Sheets in SwiftUI")
                            .foregroundColor(.white)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.red)
                    .clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
                }
                
            }
            
            VStack {
                Button(action: {
                    sheetMode = .quarter
                }) {
                    HStack {
                        Text("Show Quater")
                            .font(.system(size: 18))
                            .fontWeight(.bold)
                    }
                    .frame(width: 200)
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.yellow)
                    .cornerRadius(40)
                }
                
                Button(action: {
                    sheetMode = .half
                }) {
                    HStack {
                        Text("Show half")
                            .font(.system(size: 18))
                            .fontWeight(.bold)
                    }
                    .frame(width: 200)
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.green)
                    .cornerRadius(40)
                }
                
                Button(action: {
                    sheetMode = .full
                }) {
                    HStack {
                        Text("Show full")
                            .font(.system(size: 18))
                            .fontWeight(.bold)
                    }
                    .frame(width: 200)
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.orange)
                    .cornerRadius(40)
                }
                
                Button(action: {
                    sheetMode = .none
                }) {
                    HStack {
                        Text("Show none")
                            .font(.system(size: 18))
                            .fontWeight(.bold)
                    }
                    .frame(width: 200)
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.red)
                    .cornerRadius(40)
                }
                
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

SheetView.swift

 
//
//  SheetView.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//

import SwiftUI

struct SheetView<Content: View>: View {

    let content: () -> Content
    var sheetMode: Binding<SheetMode>
    
    init(sheetMode: Binding<SheetMode>, @ViewBuilder content: @escaping () -> Content) {
        
        self.content = content
        self.sheetMode = sheetMode
        
    }
    
    private func calculateOffset() -> CGFloat {
        
        switch sheetMode.wrappedValue {
            case .none:
                return UIScreen.main.bounds.height
            case .quarter:
                return UIScreen.main.bounds.height - 200
            case .half:
                return UIScreen.main.bounds.height/2
            case .full:
                return 0
        }
        
    }
    
    var body: some View {
        content()
            .offset(y: calculateOffset())
            .animation(.spring())
            .edgesIgnoringSafeArea(.all)
    }
}

struct SheetView_Previews: PreviewProvider {
    static var previews: some View {
        SheetView(sheetMode: .constant(.none)) {
            VStack {
                Text("Hello World")
            }.frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.blue)
            .clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
        }
    }
}

enum SheetMode {
    case none
    case quarter
    case half
    case full
}