PopupView

Swift Version Platform SPM IOS MIT

Implementation of view popups written with SwiftUI

Bottom Top Center
Bottom Top Center

Requirements

Platform Minimum Swift Version Installation
iOS 15+ 5.7 Swift Package Manager

Installation

The Swift package manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler.

Once you have your Swift package set up, adding PopupView as a dependency is as easy as adding it to the dependencies value of your Package.swift.

dependencies: [
    .package(url: "https://github.com/Mijick/PopupView.git", branch(“main”))
]

Usage

  1. Setup project
  2. Implement animation protocol
  3. Present popup view
  4. Dismiss popup view

Setup project

Inside @main structure body call the implementPopupView method

  var body: some Scene {
        WindowGroup(content: ContentView().implementPopupView)
  }

Animation protocols

The library provides an ability to use custom views. In order to present a view on top of other views, it is necessary to inherit from one of the protocols during popup creation:

  • TopPopup – presents popup view from the top
  • CentrePopup – presents popup view from the center
  • BottomPopup – presents popup view from the bottom

Common Setup

Inheritance from one of the popup protocols requires the implementation of the following requirements:

  1. Set the id parameter to control the uniqueness of the views being presented
let id: String { "some_id" }
  1. Implement createContent method. It’s used instead of the body property, and declares the design of the popup view

func createContent() -> some View {
        VStack(alignment: .leading, spacing: 0) {
            Text("First")
            Spacer.height(12)
            Text("Another element")
        }
        .padding(.top, 36)
}
  1. Implement configurePopup(popup: Config) -> Config method to setup UI of presented view Each protocol has its own set of configuration type

An example of implementing BottomPopup protocol configurations setups

func configurePopup(popup: BottomPopupConfig) -> BottomPopupConfig {
        popup
            .contentIgnoresSafeArea(true)
            .activePopupCornerRadius(0)
            .stackedPopupsCornerRadius(0)
}

Available Configurations

TopPopup CentrePopup BottomPopup
backgroundColour ✅ ✅ ✅
contentIgnoresSafeArea ✅ ❌ ✅
horizontalPadding ✅ ✅ ✅
bottomPadding ❌ ❌ ✅
topPadding ✅ ❌ ❌
stackedPopupsOffset ✅ ❌ ✅
stackedPopupsScale ✅ ❌ ✅
stackedElementsLimit ✅ ❌ ✅
cornerRadius ❌ ✅ ❌
activePopupCornerRadius ✅ ❌ ✅
stackedPopupsCornerRadius ✅ ❌ ✅
activePopupCornerRadius ✅ ❌ ✅
dragGestureProgressToClose ✅ ❌ ✅
dragGestureAnimation ✅ ❌ ✅
tapOutsideToDismiss ❌ ✅ ❌
transitionAnimation ✅ ✅ ✅

TopPopup

Safe area Ignore safe area
Top Top

CentrePopup

TopPopup

BottomPopup

Safe Area Ignore Safe Area
Bottom Bottom

Popup Stack

The PopupView allows you to stack views and present several popups on the screen at the same time. The library automatically manages the display of multiple pop-up windows depending on the type of presentation.

Bottom stack Top stack Different view heights Bottom stack
Bottom Top Bottom bottom

Popup presentation

To present a view, it is enough to initialize it and call the method present

 SomeView().present()

Popup dismiss

Call the method dismiss inside the popup view to dismiss it

It’s also available to dismiss any view with methods inside the PopupManager class:

  • dismissLast – Dismisses the last presented popup view
PopupManager.dismissLast()
  • dismiss(id:) – Dismisses the presented popup view with concrate id
PopupManager.dismiss(id: "some_id")
  • dismissAll – Dismisses all presented popup views
PopupManager.dismissAll()

Project example

PopupView-Example – example of usage PopupView library

GitHub

View Github