SwiftUI’s Half Sheet for Sleek User Interfaces

3 min readDec 19, 2023

Creating sleek and interactive half-bottom sheets in SwiftUI for a next-level user experience

In the dynamic world of SwiftUI, developers are constantly exploring innovative ways to enhance user interfaces and create seamless interactions. One such intriguing concept is the “Half Sheet,” a sleek bottom navigation panel that provides a user-friendly experience. This article delves into the inner workings of a SwiftUI extension designed to effortlessly implement a Half Sheet in your iOS applications.

SwiftUI allows developers to extend the capabilities of built-in views using extensions. The provided code introduces an extension on the View type, enabling the creation of a half sheet for improved user interface design.

extension View {
    // MARK: For bottom Sheet

    func halfSheet<SheetView: View>(showSheet: Binding<Bool>, @ViewBuilder sheeView: @escaping () -> SheetView) -> some View {
        return background {
            HalfSheetHelper(sheetView: sheeView(), showSheet: showSheet)
        }
    }
}

Now that we’ve explored the SwiftUI extension, let’s take a deeper dive into the complementary HalfSheetHelper structure. This structure serves as the bridge between SwiftUI and UIKit, facilitating the presentation of the Half Sheet. We'll unravel the code step by step to understand its functionality.

import SwiftUI

// UIKit Integration...
struct HalfSheetHelper<SheetView: View>: UIViewControllerRepresentable {
    var sheetView: SheetView
    @Binding var showSheet: Bool
    let controller = UIViewController()

    func makeUIViewController(context: Context) -> UIViewController {
        controller.view.backgroundColor = .clear
        return controller
    }

    func updateUIViewController(_ uiViewController: UIViewController, context:
        Context)
    {
        if showSheet {
            // presenting Modal View....
            let sheetController = CustomHostingController(rootView: sheetView)
            uiViewController.present(sheetController, animated: true) {
                DispatchQueue.main.async {
                    self.showSheet.toggle()
                }
            }
        }
    }
}

In the realm of SwiftUI and UIKit integration, the provided CustomHostingController plays a pivotal role in enhancing the presentation of the Half Sheet. This class extends UIHostingController and is tailored to cater specifically to the requirements of a Half Sheet interface. Let's dissect this code to understand how it contributes to the seamless user experience.

import SwiftUI

// Custom UIHostingController for halfSheet....
class CustomHostingController<Content: View>: UIHostingController<Content> {
    override func viewDidLoad() {
        // setting presentation controller properties...
        if let presentationController = presentationController as?
            UISheetPresentationController
        {
            // Note: this large for full screen and medium for half bottom sheet
            presentationController.detents = [
                .medium()
//                .large()
            ]

            // To show grab portion...
            presentationController.prefersGrabberVisible = true
        }
    }
}

Now this how to use the halfSheet call in view page

// MARK: - PROPERTIES
@State private var isSheetPresented = false

// MARK: - BODY
var body: some View {
  VStack(alignment: .leading) {
     HStack(spacing: 16) {
      ...
     }
.
.
.
  }
  .halfSheet(showSheet: $isSheetPresented, sheeView: {
       // put the UI in here
       CommentsView(comments: post.comments)
   })
.
.

Transform Your Ideas into Reality with Expert iOS & Flutter Development! 🚀 Are you looking to bring your app concept to life? I specialize in crafting exceptional iOS and Flutter applications that stand out in the digital world. Let’s collaborate to turn your vision into a stunning, functional app. Contact me today to start your app development journey!”